How to vertically align in Bootstrap 4?

Question

I am trying to vertically align the contents of my jumbotron at center in Bootstrap 4 (4.0.0-alpha.6). This happens fine in Chrome and Safari on the Mac desktop, but neither on my iOS devices, where the text still aligns to the top.

I am forcing the jumbotron to display taller than it otherwise would with min-height, to accommodate a background picture.

Here is the HTML...

<!-- jumbotron -->
<div class="jumbotron jumbotron-fluid mb-0 cxt-bg-dark-grey cxt-bgimg-frame cxt-bgimg-tint cxt-bgimg-cook text-white text-center" style="min-height:500px"> <!-- .jumbotron-fluid and content in .container make jumbotron full-width and squared corners, cf. https://v4-alpha.getbootstrap.com/components/jumbotron/  -->
  <div class="container">
    <div class="row">
      <div class="col-md-12 cxt-title">
        <h1 class="display-4 pb-2">Jumbotron title</h1>
        <p class="lead pb-4">Sub-title sub-title sub-title v sub-title sub-title sub-title sub-title </p>
        <a class="btn btn-primary pmd-ripple-effect btn-lg mb-4" href="#" role="button">Get Started</a>
      </div>
    </div>
  </div>
</div>

Here is the CSS...

.cxt-bgimg-frame {
  width:100%;
  height:100%;
  height:calc(100% - 1px);
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex;
  align-items: center;
}
.cxt-bgimg-tint {
  background-color: rgba(10,10,10,0.6);
  background-blend-mode: multiply;
}
.cxt-bgimg-cook {
  background-image:url('path/to/my/image.png');
}

The key part is...

display: flex;
align-items: center;

As I said, it works fine on desktop, but not iOS devices like my iPad.

I have also tried adding some webkit references...

.cxt-bgimg-frame {
  width:100%;
  height:100%;
  height:calc(100% - 1px);
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
 -ms-flex-align: center;
 -webkit-align-items: center;
 -webkit-box-align: center;
 align-items: center;
}

... But that doesn't fix it.

I know, according to the release docs, that, as of Bootstrap 4.0.0 alpha 6, "Bootstrap 4 is now flexbox by default!" But I don't know whether that negates the need for me to call the flex stuff above.

How do I correctly get things to vertically align at center?

Solution should be a Bootstrap 4-centric solution.

Answer 1

To find out if you can use flexbox on a specific device, you need to look closer at the system + browser versions of your device and at caniuse flexbox .

For prefixing your CSS , use autoprefixer . For maximum browser compat, input > 0% in the tiny settings box at the bottom of the page.

If you did all of the above, your code should render correctly on any device featuring iOS 7.0 or above.

---

In its current form, your code doesn't provide a cross-browser flexbox solution, nor is it using Bootstrap 4's flexbox implementation, which is why you have trouble on iOS devices.
In order to center using Bootstrap's flexbox classes, you need to:

• apply .d-flex and .justify-content-center on parent
• apply a sufficient min-height on the same parent
• apply .align-self-center on the child

Example:

 .cxt-bgimg-frame { min-height:100vh; background: url('http://lorempixel.com/g/1024/768') no-repeat 50% 50% /cover; } .align-self-center.p-3 { background-color: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.21); box-shadow: 0 6px 6px -3px rgba(0,0,0,.2), 0 10px 14px 1px rgba(0,0,0,.14), 0 4px 18px 3px rgba(0,0,0,.12); } body {margin: 0;} 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <div class="jumbotron jumbotron-fluid mb-0 cxt-bg-dark-grey cxt-bgimg-frame cxt-bgimg-tint cxt-bgimg-cook text-white d-flex justify-content-center"> <div class="container align-self-center"> <div class="row"> <div class="col-md-12 cxt-title d-flex justify-content-center" style="min-height:70vh"> <div class="align-self-center text-center p-3"> <h1 class="display-4 pb-2">Jumbotron title</h1> <p class="lead pb-4">Sub-title sub-title sub-title v sub-title sub-title sub-title sub-title </p> <a class="btn btn-primary pmd-ripple-effect btn-lg mb-4" href="#" role="button">Get Started</a> </div> </div> </div> </div> </div> 

---

Answers to your comment questions:

The example I provided above is generic , aimed at helping anyone needing an example on Bootstrap 4's flexbox centering. You are completely free to change it to fit the specific needs of your project.

1. I added the styling to that box so you could see it. Of course you don't need to apply colors/shadows in your project.
2. Not necessarily. It depends on flex-direction . For a better understanding of the flexbox model I recommend a guide to flexbox and current specs .
3. a) vh means "viewport height/100" - it's completely different from 100% , because 100% can be 5 times the viewport height, depending on your content, while 100vh is always the viewport height. In today's web, vh is quite popular, as it enables you to have "full page height panels" which could be used with scollTo() type navigation. If you have a fixed navbar, you can use min-height: calc(100vh - Npx) where N is the size of your navbar in px .
   b) Yes, the slash / is intentional and it means "background-size". See background shorthand.