CODEWITHSUNDEEP
twitter-bootstrapcssflexboxbootstrap-4
Khajiit
Khajiit

Reputation: 5

Vertical alignment in Bootstrap 4 using flexbox

wondered if you could help me with this frustrating detail about Bootstrap 4:

I used the code from this page https://v4-alpha.getbootstrap.com/layout/grid/#vertical-alignment to explore align-self-start flexbox alignment. The code that they put in the example doesn't work, however. Is there any not very complicated way to make it work using the similar terms? Or is this piece of code completely invalid now: 

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Thank you!

Upvotes: 0

Views: 1117

Answers (1)

Asons
Asons

Reputation: 87191

To be able to actually see the difference, give the row a minimum height.

.row {
  border: 1px solid red;
  min-height: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three
    </div>
    <div class="col">
      One of three
    </div>
    <div class="col">
      One of three
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three
    </div>
    <div class="col">
      One of three
    </div>
    <div class="col">
      One of three
    </div>
  </div>
</div>

Upvotes: 1

Related Questions