Bootstrap 4 aligning div to bottom of another div in column with different heights

Question

Please see code snipped: I am trying to align the divs with "Learn More" at the bottom of the columns at the same vertical height regardless of the height of the previous div.

Duplicate Disclaimer: I've been looking at How can I make Bootstrap columns all the same height? and How can I make Bootstrap 4 columns all the same height? which seem to be a similar problem. However, the solutions do not work for me as they are mostly for BS3 (e.g. I tried the examples with class="row-eq-height"), and most answers with regard to BS4 imply that the equal height is default in BS4.

However as you can see from the red borders, only the outer column height is "stretched" to the bottom by default, the inner one is only equal to text height. I'm very confused.

* { border: 1px solid red !important; }

<head>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"  integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
   
  </head>
  <body>
    <div class="row text-center no-gutters">
        <div class="col-sm-4">
          <div>
            <h4>Components and examples</h4>
            <p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
          </div>
          <div class="align-items-end">
            <a href="">Learn more 1</a>
          </div>
        </div>
         <div class="col-sm-4">
          <div>
            <h4>Components and examples</h4>
            <p class="body-block-3 mx-auto">one line text example</p>
          </div>
          <div class="align-items-end">
            <a href="">Learn more 2</a>
          </div>
        </div>
         <div class="col-sm-4">
          <div>
            <h4>Components and examples</h4>
            <p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
          </div>
          <div class="align-items-end">
            <a href="">Learn more 3</a>
          </div>
        </div>
      </div>
      </body>

Also, I've tried various Bootstrap alignment options such as strechting the middle div with "align-items-stretch" and using "d-flex align-items-end" for the last div. Nothing works.

David Lee · Accepted Answer · 2017-09-30T01:05:34.183

Columns in bootstrap are not display: flex and that is why the align-items-end is not working. Add the classes d-flex and flex-column to your column classes. Added the class .flex-1 and put this on your upper div.

* {
  border: 1px solid red !important;
}

.body-block-3 {
  max-width: 250px;
  margin-left: auto;
  margin-right: auto;
}

.flex-1 {
  flex: 1;
}

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

</head>

<body>
  <div class="row text-center no-gutters">
    <div class="col-sm-4 d-flex flex-column">
      <div class="flex-1">
        <h4>Components and examples</h4>
        <p class="body-block-3">multiple line text example random text should break across multiple lines</p>
      </div>
      <div>
        <a href="">Learn more 1</a>
      </div>
    </div>
    <div class="col-sm-4 d-flex flex-column">
      <div class="flex-1">
        <h4>Components and examples</h4>
        <p class="body-block-3">one line text example</p>
      </div>
      <div>
        <a href="">Learn more 2</a>
      </div>
    </div>
    <div class="col-sm-4 d-flex flex-column">
      <div class="flex-1">
        <h4>Components and examples</h4>
        <p class="body-block-3">multiple line text example random text should break across multiple lines</p>
      </div>
      <div>
        <a href="">Learn more 1</a>
      </div>
    </div>
  </div>
</body>

EDIT: Also wanted to mention you could use a boostrap utility class mb-auto instead of flex-1

    <div class="col-sm-4 d-flex flex-column">
      <div class="mb-auto">
        <h4>Components and examples</h4>
        <p class="body-block-3">one line text example</p>
      </div>
      <div>
        <a href="">Learn more 2</a>
      </div>
    </div>

However your upper div will not take up the entire space (stretch), not sure if this is an issue with your use case. If not, you would not have to make any new classes and would be following the docs on bootstrap's with align-item section

EDIT: Updated for .body-block-3 class

2 problems: I see that the upper divs are now left aligned (notice when you run it on screensize +1000px width). Also, the boxes now do not break properly anymore on mobile. — tealowpillow, Sep 30 '17 at 00:04
Is it maybe possible to somehow make the text divs the same high, or bottom align them? I tried this here http://getbootstrap.com.vn/examples/equal-height-columns/ but couldn't get it to work. According to the example one just has to add .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } — tealowpillow, Sep 30 '17 at 00:06
@tealowpillow Just made another edit and I think I got the result you are looking for. Dont forget the new class, `.flex-1`, when you implement. Let me know how it goes.... man CSS can be a pain sometimes — David Lee, Sep 30 '17 at 00:35
great, it does work now. However I had a max width with the 'body-block-3' class, which is in css: .body-block-3 { max-width: 250px; display: block;}. If I add this to your code, the text doesn't center align anymore despite having "text-center" in the row. I guess the display: block gets overwritten... Any idea how to solve that? — tealowpillow, Sep 30 '17 at 00:52
@tealowpillow View edit for update. You need to remove `display: block` and set `margins` to `auto` for left and right in your `.body-block-3` class — David Lee, Sep 30 '17 at 00:57

Bootstrap 4 aligning div to bottom of another div in column with different heights

1 Answers1