Equal height div within bootstrap column - html

Question

I have a group of three columns. Inside each column is the following:
A small circular div, which contains a font-awesome icon.
A small heading tag
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>