Bootstrip grid elements - vertically align most content to top but button to bottom

Question

I'm using a Bootstrap 4 grid to display some elements - the titles and textual content of which I want vertically-top aligned (which they are). There is then a <button> at the end of each grid element that I want to be vertically aligned bottom, level with any other <buttons> in other grid elements that may happen to be on that row (responsive).

I've seen examples of aligning everything to the bottom, but not mixing some elements. I've tried the suggestions in eg other similar posts

Here's my HTML:

<div class="row services">
    <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
           <h3 class="title">Element 1</h3>
              <p class="description collectiontext">Element description</p>
              <button class="btn btnGetQuote" onclick="javascript:functionA()">Get quote</button>
    </div>

    <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
           <h3 class="title">Element 2</h3>
              <p class="description collectiontext">Element description</p>
              <button class="btn btnGetQuote" onclick="javascript:functionB()">Get quote</button>
    </div>

    <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
           <h3 class="title">Element 2</h3>
              <p class="description collectiontext">Element description</p>
              <button class="btn btnGetQuote" onclick="javascript:functionB()">Get quote</button>
    </div>

    <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
           <h3 class="title">Element 3</h3>
              <p class="description collectiontext">Element description</p>
              <button class="btn btnGetQuote" onclick="javascript:functionC()">Get quote</button>
    </div>

    ...<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up"></div> * several

</div>

Any help would be appreciated..

score 1 · Accepted Answer · answered Mar 15 '20 at 20:41

You can wrap <h2> and <p> inside a <div> of each grid element.
Like this, you will have two children for each one: <div> and <button>.

Then, you can use some Bootstrap classes for a flexbox layout.

Add d-flex, flex-column justify-content-between to each grid element.
These classes will add display: flex, flex-direction: column and justify-content: space-between.

<div class="row services">

  <div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
    <div>
      <h3 class="title">Element 1</h3>
      <p class="description collectiontext">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid explicabo tempora nostrum, minus distinctio suscipit in? Nemo unde dolor amet perspiciatis blanditiis deleniti, explicabo sed necessitatibus maiores quae culpa libero?</p>
    </div>
    <button class="btn btnGetQuote" onclick="javascript:functionA()">Get quote</button>
  </div>

  <div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
    <div>
      <h3 class="title">Element 2</h3>
      <p class="description collectiontext">Element description</p>
    </div>
    <button class="btn btnGetQuote" onclick="javascript:functionB()">Get quote</button>
  </div>

  <div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
    <div>
      <h3 class="title">Element 3</h3>
      <p class="description collectiontext">Element description</p>
    </div>
    <button class="btn btnGetQuote" onclick="javascript:functionB()">Get quote</button>
  </div>

  <div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
    <div>
      <h3 class="title">Element 4</h3>
      <p class="description collectiontext">Element description</p>
    </div>
    <button class="btn btnGetQuote" onclick="javascript:functionC()">Get quote</button>
  </div>

  <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up"></div>

</div>

Thank you so much! This worked perfectly and was exactly what I was after. I don't think I'd have got there on my own with this as I couldn't find any examples that matched my desired use case, so thanks for taking the time to respond. — tornadof3, Mar 16 '20 at 18:44

Bootstrip grid elements - vertically align most content to top but button to bottom

1 Answers1