Bootstrap container always has 0 height

Question

I am trying to execute some simple container code to center an image, I cannot find it why my Container has a height of 0.

#test {
    background-image: url('https://via.placeholder.com/150');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}


<div class="container">
    <div class="row">
        <div class="col">
            <div id="test">

            </div>
        </div>
    </div>
</div>

Why does the container have a height of 0, and hence my image not appearing?

@PM77-1 I was under the assumption that the image would expand the container, are you implying that this is not the case and the background is being set to an empty container? — J.Doe, Dec 30 '18 at 03:59
height: 100vh; seems to fix the problemo. I thought containers functioned differently. — J.Doe, Dec 30 '18 at 04:00
Fixed item take height and. position from body.. thats why it's not showing any height... — Atul Rajput, Dec 30 '18 at 04:28
by default, container and test height is 0 , you should give #test a height. — Moslem Hadi, Dec 30 '18 at 07:26

score 0 · Answer 1 · answered Dec 30 '18 at 04:50

By default, block elements get their heights from their content. Content meaning what goes between the opening and closing tag of the element in the HTML. A background image would not be content, but can be thought of more like decoration.

You can set the height manually with css to whatever you like. Keep in mind though that an empty element is unsemantic code.

score 0 · Answer 2 · answered Dec 30 '18 at 05:05

Adding a height property could fix this as mentioned by you in comments.

Another alternative that would solve the problem with varying image sizes could be to use an img tag inside #test element.

<div id="test" style="background-image: url(/my-image.jpg);">
 <img src="/my-image.jpg" style="visibility: hidden;" />
</div>

This way the div takes up the height based on the image size.

score 0 · Answer 3 · answered Dec 30 '18 at 22:21

<div class="text-center d-flex" style="height: 100vh">
    <div class="container m-auto">
        <div class="row">
            <div class="col-8 mx-auto">
                <h1> YOU CAN DO IT </h1>
            </div>
            <div class="col-8 mx-auto">
                <h1> I should be centered </h1>
            </div>
        </div>
    </div>
</div>

Using margin:auto to vertically-align a div

As the second answer from the linked stackoverflow question over, it was because my parent was not of type flex.

Bootstrap container always has 0 height

3 Answers3