CODEWITHSUNDEEP
htmltwitter-bootstrapcssflexbox
Vertisan
Vertisan

Reputation: 738

Flex not centering all columns in a row

I'm testing new Bootstrap 4-alpha.5 and now I'm using flexbox.

I want to center vertically all columns in the row, but it works only for the second column - why?

I tried center for both - row and every column.

http://codepen.io/vertisan/pen/QGOYwp 

<div class="login-page">
<div id="login-container">
  <div class="container-fluid">
    <div class="row flex-items-md-middle">
      <div class="col-md-8 login-container-intro flex-md-middle" style="background: url( http://placehold.it/1280x720/ff0000 );">
        <div class="login-content__intro">
          <img src="http://placehold.it/500x150" alt="" class="img-fluid mx-auto" />
        </div>
      </div>
      <div class="col-md-4 login-container-sidebar flex-md-middle">
        <div class="login-content__sidebar">
          <div class="login-form">
            <form>
              <div class="form-group">
                <label class="control-label" for="inputNormal">Normal input</label>
                <input type="text" class="form-control" id="inputNormal" placeholder="Placeholder text" />
              </div>

              <div class="form-group has-warning">
                <label class="control-label" for="inputWarning">Warning input</label>
                <input type="text" class="form-control" id="inputWarning" placeholder="Placeholder text" />
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

Upvotes: 1

Views: 105

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 370993

Keep in mind that flex layout exists only between parent and child elements. Ancestors above the parent and descendants below the children do not participate in flex layout.

It appears from your code that you're expecting some elements to inherit flex properties, but because they are beyond the scope of a flex formatting context, these properties are simply being ignored.

In your first column, the container .login-container-intro exists in a block formatting context (display: block). Make it display: flex and add align-items: center.

revised codepen

Learn more about the scope of a flex formatting context here: https://stackoverflow.com/a/37844240/3597276

Upvotes: 1

Related Questions