CODEWITHSUNDEEP
htmlcssflexboxbootstrap-4twitter-bootstrap-4
Cray
Cray

Reputation: 5483

Bootstrap 4: Align items inside flexbox item

I'm using Bootstrap 4 and Flexbox to align columns inside a row. I need the same height for all columns. So I use the class "align-items-stretch" (http://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items) to give them all the same height. Now I want to align the content inside the column to the bottom.

Is there a way with Flexbox? Or is it the wrong way?

<div class="row d-flex align-items-stretch">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Upvotes: 3

Views: 4665

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362280

This is hard to anwser without knowing the contents of the columns. Also, I don't understand how align-items-stretch is giving your columns full height as "stretch" is the default. There are several different ways with Flexbox it could be done.

<div class="row d-flex">
    <div class="col">
    </div>
    <div class="col">
    </div>
    <div class="col align-self-end">
    </div>
</div>

http://www.codeply.com/go/Kaby5SlKgM

Upvotes: 3

Related Questions