Is there a way to align this button vertically to the bottom of its container with Bootstrap 5?

I'm currently working from this codepen snippet and facing an issue where I can't seem to align the button in the left box to the bottom of the box. Despite trying multiple approaches, I haven't been able to achieve the desired alignment.

Check out the codepen snippet here

<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accec3c3d8dfd8decddcec99829f829c81cdc0dcc4cd9e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6c61617a7d7a7c6f7e4e3b203d203e236f627e666f3c">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"gt;</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;
}

View image of the problem here

Despite trying various Bootstrap 5 utilities, adjusting heights, changing display settings, and more, I am still unable to solve this alignment issue.

htmlcssbootstrap-5

Answer №1

To achieve this effect, you can utilize the Auto margins utilities from Bootstrap. Set the drop-shadow-box class to d-flex flex-column and assign the main div of the button to mt-auto. The structure of your code should resemble the following.

.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;
}
<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0929f9f848384829180b0c5dec3dec0dd919c809891c2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce9f2eff2ecf1bdb0acb4bdee">[email protected]</a>/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="text-center">Our Courses</h2>
      <div class="container">
        <div class="row">
          <div class="col-md-6 courses-container">
            <div class="drop-shadow-box d-flex flex-column">
              <div 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>
              </div>
                <div class="text-center mt-auto">
                  <a class="btn btn-primary btn-lg" href="#">FREE</a>
                </div>
            </div>
          </div>
          <div class="col-md-6 courses-container">
            <div class="drop-shadow-box d-flex flex-column">
              <div 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>
                <div class="text-center mt-auto">
                  <a class="btn btn-primary btn-lg" href="#">FREE</a>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</body>

</html>

Answer №2

For the desired output of having the button stick to the bottom in mid to large screen sizes, you can achieve this by adding Bootstrap classes d-flex flex-column to the 

<div class="drop-shadow-box">
and flex-grow-1 to the 
<span class="tpr-text-block" >
elements.

.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;
}
<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3919c9c878087819283b3c6ddc0ddc3de929f839b92c1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61030e0e15121513001121544f524f514c000d11090053">[email protected]</a>/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 d-flex flex-column">
              <span class="tpr-text-block flex-grow-1">
                <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 d-flex flex-column">
              <span class="tpr-text-block flex-grow-1" >
                <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>

Answer №3

I adjusted the heights of the text area to prevent overlapping with the buttons.

The buttons are now centered at the bottom of the page.

The colors indicate the boundaries of each div, but can be removed upon request.

<!DOCTYPE html>

<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</head>
<style>
  #mother {
    width 300px;
    position: absolute;
    height: 50px;
    text-align: center;
    bottom: 0;
    left: 40%;
  }
  
  .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;
  }
</style>

<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 id="box" style="height: 500px;" class="col-md-6 courses-container position-relative">
            <div style="height: 500px; background-color: pink;" class="drop-shadow-box">
              <div class="tpr-text-block" style="height: 400px; overflow: auto; ">
                <div style="height: 120px;">
                  <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>
                </div>
                <div style="margin: 10px;">
                  <p style="position: absolute; bottom: 10%; left: 15%; overflow: auto; height: 190px; background-color:yellow; width: 70%;">Gives you unlimited access to our Course One Courses to help you get your cert ificate. Our courses cover everything you need to pass your written Cert Tests. 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. 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>
                </div>
              </div>


            </div>

            <div id="mother" class="course-button-container text-center">
              <a class="btn btn-primary btn-lg" href="#">FREE</a>
            </div>
          </div>

          <div style="height: 500px;" class="col-md-6 courses-container position-relative">
            <div style="height: 500px; background-color: pink;" class="drop-shadow-box">
              <div class="tpr-text-block" style="height: 300px; overflow: auto; ">
                <div style="height: 120px;">
                  <h1 id="free-course-one-training" class="course-title">Course One Test Prep</h1>
                  <h3 id="free-course-test-prep">Course One Test Pep</h3>
                </div>
                <div style="margin: 10px;">
                  <p style="position: absolute; bottom: 10%; left: 15%; overflow: auto; height: 190px; background-color:yellow; width: 70%;">Gives you unlimited access to our Course One Courses to help you get your cert ificate. Our courses cover everything you need to pass your written Cert Tests. 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. 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>
                </div>
              </div>


            </div>

            <div id="mother" class="course-button-container text-center">
              <a class="btn btn-primary btn-lg" href="#">FREE</a>



            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</body>

</html>

Answer №4

To manually adjust the position, add the code below to the end of your CSS:

.course-button-container {margin-top: 65px;}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Include the <script> tag in the HTML code for an iframe without running it

Currently, I am working on an HTML code that involves memory for an Iframe. Interestingly, whenever I use the append function, it not only executes the code but also carries out its intended task. html = $(parser.parseFromString($("#EHtml").val(), "text/h ...

javascriptjqueryhtmliframe

jQuery and CSS animation implemented on website performs flawlessly on all browsers, with the exception

I have recently started learning jQuery and I am facing an issue with the website linked below. It works perfectly in Firefox, Chrome, and Opera but not in Safari. <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic ...

jqueryhtmlcsssafari

Tips for deleting the drop-down arrow from Mozilla Firefox

Is there a way to eliminate the dropdown arrow that FireFox usually displays? I have included an image below showing what I am referring to: This is the CSS code I'm using: @-moz-document url-prefix(){ .class select { width: 110%; } } .class > ...

htmlcssfirefox

CSS-Only Menu Fails to Function with Image Overlayed on Top

I need help with a website I created where I want the header to be placed slightly on top of my CSS menu. However, when I overlay an image, I lose my CSS menu and I am looking for a way to keep it while still displaying the image. My goal is to have the C ...

htmlcss

What is the best way to convert my Chatbot component into a <script> tag for seamless integration into any website using React.js?

I have successfully integrated a Chatbot component into my Next.js application. https://i.stack.imgur.com/BxgWV.png Now, I want to make this component available for anyone to use on their own website by simply adding a tag. My initial approach was to cre ...

javascripthtmlreactjswebpacknext.js

How to create a personalized attribute for a form in Yii2

Currently, I am working on an active form and I would like to include a custom attribute. This is a standard form field: <?= $form->field($model, 'password')->textInput() ?> I want it to appear as: <label class="input"> < ...

jqueryhtmlformsyii2

Tips for managing the dimensions of the <label> element within a React component

I'm facing an issue where the element size is not matching the box size as expected. Additionally, the width property doesn't seem to work in React. Does anyone know how to solve this problem? const DragDrop = () => { ... return ( &l ...

cssreactjstypescriptlabel

Tips for blocking submissions when a user tries to input a hyperlink

I have encountered a problem in my journey of learning JS and unfortunately, I couldn't resolve it by myself. Lately, spam has been flooding through the form on my website and all my attempts with jQuery and JS to fix it have failed. As a last resort ...

javascripthtmljquery

How can I indicate to the browser that the HTML page should be accessed through SSL?

I've set up a certificate on my website. Now, I only want one specific page to be accessed through SSL. Do I need to add any markup on the page itself, or is there another setting elsewhere that I should use? ...

htmlssl

What is the best way to distribute multiple inline-block elements evenly?

Is it feasible to evenly distribute numerous elements in a div with adjustable width? Check out this example that doesn't work. While using text-align:center; will center the elements, margin:0 auto; does not have any effect. I am aiming for somethin ...

htmlpositioningcss

Support for TrueType fonts in web browsersLet me know if you

If I have a custom font in TTF format and want to check if @font-face supports it, what script can I use? What are the available options? ...

csshtmlfontsfont-face

Ways to insert a gap underneath every line

Hello, I'm struggling to create space below each line of code. I've tried using the br tag and margin property, but it didn't work. Can anyone help me with this? I'm not sure if the current HTML structure is correct or if I should swit ...

htmlcssrowlinespace

Styling the arrow of a CSS select box

Is it possible to place a dropdown arrow inside a select box? I have tried, but the arrow always displays behind the select box. How can I modify the CSS code to position the arrow properly inside the select box? .form-item-custom-search-types::before { ...

htmlcss

Is it possible to convert HTML to PDF on the server?

A PDF file is being created from an HTML file using the princexml pdf converter package. The data for the HTML file is provided by the server. In the browser, jQuery is used to generate the input string (HTML code) for creating the PDF. Once the input stri ...

jqueryhtmlprincexml

To modify the color of text in a mat-list-option item

Using the mat-selection-list component, I have set up a list of contacts displayed through mat-list-option: https://i.sstatic.net/ri4lP.png Currently, the background-color changes when I click on a specific contact-name (e.g. Graeme Swan), and it remains ...

cssangularangular-material

What is the best way to retrieve an <a> tag element using Selenium in Python?

I am fairly new to using Selenium and could use some guidance with the following issue. I am attempting to create a birthday bot for Facebook, but navigating through the platform's latest UI has been challenging with JavaScript disabled. I've bee ...

pythonhtmlcssselenium

One way to showcase a single piece of data without the need for looping is by utilizing the `

I am encountering an issue. Why does the insertAdjacentHTML("afterend") output keep looping? I only want to display "1" once, not repeatedly. var btn = document.getElementById("btnClick"); btn.addEventListener("click", function (e) { e.preventDefaul ...

javascripthtmlinsertadjacenthtml

My goal is to generate four HTML buttons that trigger specific functions: addition, subtraction, multiplication, and division

I am currently learning JavaScript, and I am facing some challenges with my assignment. The task is to create four buttons in HTML that trigger different functions - addition, subtraction, multiplication, and division. The goal is for the user to input two ...

javascripthtmlbuttononclickcalculator

Resolving Conflicting CSS Styles

It's frustrating to constantly have to ask questions. I've been struggling to implement code on my website, but every time I try to add something new, it just doesn't work. I even tried changing the CSS names, thinking that might solve the i ...

htmlcss

Troubleshooting the Issue of Missing Options in Bootstrap 5 Bootstrap-select in Laravel 8

Having an issue setting up bootstrap-select in Laravel using Laravel Mix. Despite everything appearing to be set up correctly, the options do not appear when clicking on the select. In my resources/js/Bootstrap.js file, I have added the necessary librarie ...

laravellaravel-8bootstrap-5bootstrap-select