Equal height div within bootstrap column

Question

I have a group of three columns. Inside each column is the following:

1. A small circular div, which contains a font-awesome icon.
2. A small heading tag
3. Another div, which contains some text and a button.

I have been having issues with getting the third item to be an equal height with each other. I also need the buttons to be on the same height as well. I understand how to make divs the same height (shown here!)

However, I cannot get these divs to be of an equal height, and with the button to be in the same position. Here is the HTML code:

<div class="container-fluid">
<div class="row justify-content-center h-100">
  <div class="col-3">
    <div class="circleAboutUs">
      <i class="fas fa-user-astronaut fa-5x" style="color: white; padding-top: 25px; padding-left: 34px;"></i>
    </div>
    <h1 class="about-us-text">Hackers</h1>
    <div class="about-us-content-container">
      <div class="about-us-content-text">
        The early registration deadline is October 15th and regular registration closes November 3rd.
        For more information check out the FAQ!
      </div>
      <button class="about-us-button" type="button"><h2>Register</h2></button>
    </div>
  </div>
  <div class="col-3">
    <div class="circleAboutUs">
      <i class="fab fa-reddit-alien fa-5x" style="color: white; padding-top: 30px; padding-left: 28px"></i>
    </div>
    <h1 class="about-us-text">Mentors</h1>
    <div class="about-us-content-container">
      <div class="about-us-content-text">
        Interested in volunteering to help our hackers the day of the event?
        Sign up here to be a mentor for Codestellation.
      </div>
      <button class="about-us-button" type="button"><h2>Sign Up</h2></button>
    </div>
  </div>
  <div class="col-3">
    <div class="circleAboutUs">
      <i class="fas fa-space-shuttle fa-rotate-270 fa-5x" style="color: white; padding-right: 27px; padding-top: 14px; padding-bottom: 5px"></i>
    </div>
    <h1 class="about-us-text">Sponsors</h1>
    <div class="about-us-content-container">
      <div class="about-us-content-text">
        Codestellation can&#8217t take off without our sponsors!
        Learn more about what perks you&#8217ll recieve and how your partnership will contribute to the event.
      </div>
      <button class="about-us-button" type="button"><h2>Sponsor</h2></button>
    </div>
  </div>
</div>

Here is the CSS:

.circleAboutUs {
     border: 3px solid #FAA880;
     margin: 0 auto;
     border-radius: 100%;
     height: 140px;
     width: 140px;
     background-color: #FAA880;
 }

.about-us-content-container {
    margin: auto;
    border-radius: 10%;
    background-color: #FAA880;
    text-align: center;
    margin-bottom: 60px;
}

.about-us-content-text {
    font-family: 'Mina', 'Montserrat', monospace;
    padding: 25px 25px;
    font-size: 2em;
}

.about-us-text {
    text-align: center;
    color: #3A318C;
    font-family: 'Mina', 'Montserrat', monospace;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}

.about-us-button {
    border-radius: 20%/50%;
    border: 1px solid black;
    text-align: center;
    font-family: 'Mina', 'Montserrat', monospace;
    font-weight: bold;
    color: #3A318C;
    margin-bottom: 10px;
    padding-top:10px;
}

.about-us-button:hover {
   cursor: pointer;
    background-color: white;
}

.col-sm > .about-us-content-container {
    height: 55px;
}

It currently looks this: Example

I want it to maintain its responsiveness, so the header and the div still stack nicely on mobile.

Answer 1

This behavior can be easily achieved by using flex box.

• First, we create div wrapper for every child of all the columns in bootstrap.
• We set the height of those children to 100% in order to make them fill the whole containers.
• Then, we set flex-grow: 1 so the about-us-content-container will fill the whole container including spare spaces.
• But now about-us-content-container will have an auto margin, which prevents it from filling the whole container. So, we have to set the margin to 0.
• The about-us-content-container now fills all the spaces. But the button is still not at the bottom. We can get this by doing the same thing
  • Setting display to flex.
  • Setting flex-grow of the about-us-content-text to 1.
  • The buttons are now filling the whole width of about-us-content-container now. To avoid this, wrap a div around the buttons.

Here is the solution in Codepen: https://codepen.io/anhanhvina/pen/WKmoWQ

Below is the code that works. You can now add more classes to make it responsive.

.col-3 > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.about-us-content-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
}

.about-us-content-text {
  flex-grow: 1;
}


.circleAboutUs {
     border: 3px solid #FAA880;
     margin: 0 auto;
     border-radius: 100%;
     height: 140px;
     width: 140px;
     background-color: #FAA880;
 }

.about-us-content-container {
    margin: auto;
    border-radius: 10%;
    background-color: #FAA880;
    text-align: center;
    margin-bottom: 60px;
}

.about-us-content-text {
    font-family: 'Mina', 'Montserrat', monospace;
    padding: 25px 25px;
    font-size: 2em;
}

.about-us-text {
    text-align: center;
    color: #3A318C;
    font-family: 'Mina', 'Montserrat', monospace;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}

.about-us-button {
    border-radius: 20%/50%;
    border: 1px solid black;
    text-align: center;
    font-family: 'Mina', 'Montserrat', monospace;
    font-weight: bold;
    color: #3A318C;
    margin-bottom: 10px;
    padding-top:10px;
}

.about-us-button:hover {
   cursor: pointer;
    background-color: white;
}

.col-sm > .about-us-content-container {
    height: 55px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row justify-content-center h-100">
    <div class="col-3">
      <div>
        <div class="circleAboutUs">
          <i class="fas fa-user-astronaut fa-5x" style="color: white; padding-top: 25px; padding-left: 34px;"></i>
        </div>
        <h1 class="about-us-text">Hackers</h1>
        <div class="about-us-content-container">
          <div class="about-us-content-text">
            The early registration deadline is October 15th and regular registration closes November 3rd. For more information check
            out the FAQ!
          </div>
          <div>
            <button class="about-us-button" type="button">
              <h2>Register</h2>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div>
        <div class="circleAboutUs">
          <i class="fab fa-reddit-alien fa-5x" style="color: white; padding-top: 30px; padding-left: 28px"></i>
        </div>
        <h1 class="about-us-text">Mentors</h1>
        <div class="about-us-content-container">
          <div class="about-us-content-text">
            Interested in volunteering to help our hackers the day of the event? Sign up here to be a mentor for Codestellation.
          </div>
          <div>
            <button class="about-us-button" type="button">
              <h2>Sign Up</h2>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div>
        <div class="circleAboutUs">
          <i class="fas fa-space-shuttle fa-rotate-270 fa-5x" style="color: white; padding-right: 27px; padding-top: 14px; padding-bottom: 5px"></i>
        </div>
        <h1 class="about-us-text">Sponsors</h1>
        <div class="about-us-content-container">
          <div class="about-us-content-text">
            Codestellation can&#8217t take off without our sponsors! Learn more about what perks you&#8217ll recieve and how your partnership
            will contribute to the event.
          </div>
          <div>
            <button class="about-us-button" type="button">
              <h2>Sponsor</h2>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>