0

Using bootstrap 4.0.0, I have the following code:

<div class="container">
<div class="row">

<div class="col-md-4">
  <div class="jumbotron mt-3 container-fluid" style="padding: 0.6em 1.6em;">
    <h5>Title</h5>
    <p style="font-size: 14px;">text text text</p>
    <button type="button" class="btn btn-primary"> Click me </button>
  </div>
</div>

... repeated many times

</div>
</div>

I am trying to create a grid of 3 by x jumbotrons. I am not able to expand the height of the jumbotrons as to cover 100% of the given row in which they are. Each one is with their own height. The ideal is that the <h5> and the <p> are top-aligned, while the <button> is bottom-aligned.

How can I achieve the above? Thanks

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
JoeSlav
  • 4,479
  • 4
  • 31
  • 50

1 Answers1

3

Use the flexbox utils for the jumbrotrons.

<div class="col-md-4">
     <div class="jumbotron mt-3 h-100 d-flex flex-column align-items-start" style="padding: 0.6em 1.6em;">
          <h5>Title</h5>
          <p style="font-size: 14px;">text texttext</p>
          <button type="button" class="btn btn-primary mt-auto"> Click me </button>
     </div>
</div>

https://www.codeply.com/go/4uafEjOFdn

  • h-100 - make jumbotron fill height of col
  • d-flex flex-column - display:flex the jumbotron the content vertically
  • align-items-start - align content down the left side
  • mt-auto - align bottom on the bottom

Related: Bootstrap 4 cards - align content at the bottom

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624