How to get Vertical Align in Bootstrap 4 working?

Question

I see Bootstrap 4 now uses flex-box for vertical alignment. See Here

I've got Bootstrap Version 4.0.0-alpha.6 linked on my site yet I still can't get it working like in the example above.

My code is:

<div class="container-fluid header">
    <div class="row align-items-center">
        <div class="col-md-2 logo">
            <h2>Logo</h2>
        </div>
        <div class="col-md-6">
            <nav class="nav">
                <span>Nav</span>
            </nav>
        </div>
    </div>
</div>

Would anyone know what I'm doing wrong?

My links:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

It's working fine [here](https://jsfiddle.net/9cmg7joe/) .. have you include bootstrap link? — Manish Patel, Sep 04 '17 at 11:07
@ManishPatel Yeah that's exactly like I have... I added my links above — MeltingDog, Sep 04 '17 at 11:11

Bellian · Accepted Answer · 2017-09-04T11:24:27.563

I works fine, but only if the col elements are smaller then the parent row element.

The alignment will just handle where the elements are placed within the available space. If both heights are equal there is no difference.

Please provide additional css codes if existent for further help.

.row{
  background: #aaa;
  height: 200px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid header">
    <div class="row align-items-center">
        <div class="col-md-2 logo">
            <h2>Logo</h2>
        </div>
        <div class="col-md-6">
            <nav class="nav">
                <span>Nav</span>
            </nav>
        </div>
    </div>
</div>

How to get Vertical Align in Bootstrap 4 working?

1 Answers1