I have the following codepen snippet to work from. I can’t get the button in the left box to vertical-align to the bottom of the box. I’ve tried many different things with no luck.
https://codepen.io/rayjames/pen/LYJabMN
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="courses">
<h2 class="d-flex justify-content-center text-center">Our Courses</h2>
<div class="container">
<div class="row">
<div class="col-md-6 courses-container">
<div class="drop-shadow-box">
<span class="tpr-text-block">
<h1 id="free-course-one-training" class="course-title">Course One Test Prep</h1>
<h3 id="free-course-test-prep">Course One Test Prep</h3>
<p>
Gives you unlimited access to our Course One Courses to help you get your certificate. Our courses cover everything you need to pass your written Cert Tests.
</p>
</span>
<div class="">
<div class="course-button-container text-center">
<a class="btn btn-primary btn-lg" href="#">FREE</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 courses-container">
<div class="drop-shadow-box">
<span class="tpr-text-block" >
<h1 id="class-a-training" class="course-title">Course A Full Certificate</h1>
<h3 id="class-a-eldt-certificate-plus-free-permit-test-prep">Course A Full Certificate + <br>Course One Test Prep</h3>
<p>
Gives you unlimited access to all <span class="bold">REQUIRED THEORY</span> courses to get a Course A Full Certificate. Also includes unlimited access to our Course One Test Prep Courses to help you get your Cert. You will still need to go to a Cert School to do the Lab training.
</p>
<div class="text-center"><a class="btn btn-primary btn-lg" href="#">FREE</a></div>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.courses {
background-color: #ebf3fa;
padding-top: 1.3rem;
padding-bottom: 1.3rem;
}
.courses h2 {
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 1.3rem;
}
.courses .drop-shadow-box {
background-color: #fff;
height: 100%;
box-shadow: #ced7e0 5px 5px 15px 15px;
padding: 2rem;
margin: 0px 20px;
}
.courses-container {
margin-bottom: 2rem;
}
.course-title {
background-color: #0d314b;
color:#fff;
text-align:center;
}
I’ve tried all the different Bootstrap 5 utilities, also changing height, different displays, etc. and just can’t figure it out.
4
Answers
Put the following at the end of your CSS code if you want manually change the position
I set different heights on the text area so they won’t overlap with the button just in case.
I centered the buttons in the bottom.
The colors are just to show me the boundaries of each div. I will remove it upon request.
You can do this with use Auto margins utilities. Set the
drop-shadow-boxtod-flex flex-columnand add main div of button tomt-auto. Your code structure should be as below.By adding Bootstrap classes
d-flex flex-columnin<div class="drop-shadow-box">and;flex-grow-1in<span class="tpr-text-block" >elements you can get the desired output of button stick to bottom in mid to large screen sizes.