1

I am setting container to display: flex with the bootstrap 4 class d-flex but it is not going to 100% height. I want column to be 100% height so I can vertically center the contents.

Here is code snippet:

#recruitment-header {
  background-image: url(http://cdn01.androidauthority.net/wp-content/uploads/2015/11/00-best-backgrounds-and-wallpaper-apps-for-android.jpg);
  background-size: cover;
  min-height: 400px;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}
#recruitment-header .container, #recruitment-header .row {
  height: 100%;
}
#recruitment-header .slogan1 {
  font-size: 46px;
}
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>


<div id="recruitment-header" class="d-flex">
    <div class="container d-flex">
        <div class="row d-flex">
            <div class="col-12 d-flex flex-column justify-content-center">
                <div class="slogan1">message one</div>
                <div class="slogan2">message two</div>
            </div>
        </div>
    </div>
</div>

Why is it not going to 100% height?

Guerrilla
  • 13,375
  • 31
  • 109
  • 210
  • The accepted answer fixes the problem, but it doesn't really answer your question. Here's the reason `height: 100%` wasn't working: http://stackoverflow.com/a/31728799/3597276 – Michael Benjamin May 11 '17 at 03:30

1 Answers1

0

Try adding the following 

#recruitment-header .container, #recruitment-header .row {
  flex-direction: column;
  flex: 1;
}
Brandon Pereira
  • 183
  • 1
  • 8