Bootstrap 4 - container with 100% height of section

Question

So here I have a problem with Bootstrap 4 (and also flexbox). Here is the code: HTML:

<section id="intro">  
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col align-self-center">
                <h1>We design things</h1>
            </div>
        </div>
    </div>
</section>

And CSS:

#intro {
    min-height: 65vh;
    background-image: url("../img/intro.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.container-fluid {
    height: 100%;
    min-height: 100%;
}

I want the .container-fluid to always be 100% of it's parent height, so if section has 100vh, container should also, if it has 50vh it also should have 50vh. How do I do that? I can't center something using flexbox if it's height is the height of h1.

Michael Benjamin · Accepted Answer · 2017-01-24T14:53:27.240

8

In general, when you want an element to be the height of its parent, make the parent a flex container.

#intro {
    min-height: 65vh;
    background-image: url("../img/intro.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex; /* NEW */
}

An initial setting of a flex container is align-items: stretch. This means that the children of a flex container will automatically stretch the full cross-size of the container. In row-direction that would be the height. Hence, apply display: flex or display: inline-flex to section#intro.

edited Jan 24 '17 at 14:53

answered Jan 24 '17 at 14:38

Michael Benjamin

346,931
104
581
701

1

Unfortunately, that didn't work - container is now centered, but it still has the height of h1 element, not section. – grhu Jan 24 '17 at 14:46
1

Your question was about making `container-flud` the same height as the parent. – Michael Benjamin Jan 24 '17 at 14:48
Here is the whole code: http://codepen.io/GRHU/pen/jywoQV Yes, I want to make .container-fluid, which is inside the #intro section full height of it's parent, which is 65vh and then use Bootstrap 4 class to make it centered horizontally and vertically. – grhu Jan 24 '17 at 14:54
[**Flex layout only works between parent and child**](http://stackoverflow.com/a/37844240/3597276). If you want to apply flex properties to the `h1`, then you need to make its parent a flex container (and remove artificial heights): [**revised codepen**](http://codepen.io/anon/pen/RKgmOX) – Michael Benjamin Jan 24 '17 at 14:57
2

Adding display: flex to .container-fluid fixed it, but I was so sure Boostrap 4, which is supposed to be built wth flexbox has it by default - it turns out that only rows have flex property which is weird. Thank for your help. – grhu Jan 24 '17 at 15:11

Bootstrap 4 - container with 100% height of section

1 Answers1