Creating three cards with identical height using Bootstrap and flexbox techniques

I am struggling to align 3 blocks in height and keep the yellow block fixed at the bottom of its parent container.

After trying different solutions, this is the outcome I have:

https://i.sstatic.net/QOHsV.png

The yellow block is not positioned correctly due to the height of the grey block.

I suspect that the "h-100" Bootstrap class is causing this issue, but I have been unable to find an alternative solution.

Do you have any suggestions or solutions to this problem?

Thank you for your help.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15777a7a61666167746555213b233b24">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="row">
  <div class="col-12 col-md-4 mb-1 mb-md-2">
    <a class="my-card d-block h-100" href="#">
      <div class="alert-container additional-message mb-0">
        <p class="alert"><span class="alert-title">txt</span></p>
      </div>
      <div class="p-1 px-lg-2 h-100 d-flex flex-column justify-content-between">
        <!-- RED BLOCK -->
        <div class="bg-danger">
          <p class="mb-0 lead font-weight-bold">title</p>
          <p class="mb-0 -mt-1 mt-md-0 ">3h</p>
        </div>
        <!-- YELLOW BLOCK -->
        <div class="bg-warning">
          <p class="mt-lg-1 mb-0 text-gray3"> txt <span class="d-none d-md-inline"> - </span><br class="d-block d-md-none"> tx t </p>
          <span class="btn btn-secondary mt-1 mt-lg-2">button</span>
        </div>
      </div>
    </a>
  </div>
  <div class="col-12 col-md-4 mb-1 mb-md-2">
    <a class="my-card d-block h-100" href="#">
      <div class="alert-container additional-message mb-0">
        <p class="alert"><span class="alert-title">txt</span></p>
      </div>
      <div class="p-1 px-lg-2 h-100 d-flex flex-column justify-content-between">
        <!-- RED BLOCK -->
        <div class="bg-danger">
          <p class="mb-0 lead font-weight-bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
            survived not only five centuries, but also</p>
          <p class="mb-0 -mt-1 mt-md-0 ">3h</p>
        </div>
        <!-- YELLOW BLOCK -->
        <div class="bg-warning">
          <p class="mt-lg-1 mb-0 text-gray3"> txt <span class="d-none d-md-inline"> - </span><br class="d-block d-md-none"> tx t </p>
          <span class="btn btn-secondary mt-1 mt-lg-2">button</span>
        </div>
      </div>
    </a>
  </div>
  <div class="col-12 col-md-4 mb-1 mb-md-2">
    <a class="my-card d-block h-100" href="#">
      <div class="alert-container additional-message mb-0">
        <p class="alert"><span class="alert-title">txt</span></p>
      </div>
      <div class="p-1 px-lg-2 h-100 d-flex flex-column justify-content-between">
        <!-- RED BLOCK -->
        <div class="bg-danger">
          <p class="mb-0 lead font-weight-bold">title</p>
          <p class="mb-0 -mt-1 mt-md-0 ">3h</p>
        </div>
        <!-- YELLOW BLOCK -->
        <div class="bg-warning">
          <p class="mt-lg-1 mb-0 text-gray3"> txt <span class="d-none d-md-inline"> - </span><br class="d-block d-md-none"> tx t </p>
          <span class="btn btn-secondary mt-1 mt-lg-2">button</span></div>
      </div>
    </a>
  </div>
</div>

cssbootstrap-4flexbox

Answer №1

Implement a flex column layout for the anchor elements and make sure to include flex-fill on the red boxes.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfada0a0bbbcbbbdaebf8ffbe1f9e1fe">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-4 mb-1 mb-md-2">
      <a class="my-card d-block h-100" href="#">
        <div class="alert-container additional-message mb-0">
          <p class="alert"><span class="alert-title">txt</span></p>
        </div>
        
        <div class="p-1 px-lg-2 h-100 d-flex flex-column justify-content-between">
          <!-- RED BLOCK -->
          <div class="bg-danger flex-fill">
            <p class="mb-0 lead font-weight-bold">title</p>
            <p class="mb-0 -mt-1 mt-md-0 ">3h</p>
          </div>
          
          <!-- YELLOW BLOCK -->
          <div class="bg-warning">
            <p class="mt-lg-1 mb-0 text-gray3"> txt <span class="d-none d-md-inline"> - </span><br class="d-block d-md-none"> tx t </p>
            <span class="btn btn-secondary mt-1 mt-lg-2">button</span>
          </div>
        </div>
      </a>
    </div>
    
    <div class="col-4 mb-1 mb-md-2">
      <a class="my-card d-block flex-column h-100" href="#">
        <div class="alert-container additional-message mb-0">
          <p class="alert"><span class="alert-title">txt</span></p>
        </div>
        
        <div class="p-1 px-lg-2 h-100 d-flex flex-column justify-content-between">
          <!-- RED BLOCK -->
          <div class="bg-danger flex-fill">
            <p class="mb-0 lead font-weight-bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p class="mb-0 -mt-1 mt-md-0 ">3h</p>
          </div>
          
          <!-- YELLOW BLOCK -->
          <div class="bg-warning">
            <p class="mt-lg-1 mb-0 text-gray3"> txt <span class="d-none d-md-inline"> - </span><br class="d-block d-md-none"> tx t </p>
            <span class="btn btn-secondary mt-1 mt-lg-2">button</span>
          </div>
        </div>
      </a>
    </div>
    
    <div class="col-4 mb-1 mb-md-2">
      <a class="my-card d-block h-100" href="#">
        <div class="alert-container additional-message mb-0">
          <p class="alert"><span class="alert-title">txt</span></p>
        </div>
        
        <div class="p-1 px-lg-2 h-100 d-flex flex-column justify-content-between">
          <!-- RED BLOCK -->
          <div class="bg-danger flex-fill">
            <p class="mb-0 lead font-weight-bold">title</p>
            <p class="mb-0 -mt-1 mt-md-0 ">3h</p>
          </div>
          
          <!-- YELLOW BLOCK -->
          <div class="bg-warning">
            <p class="mt-lg-1 mb-0 text-gray3"> txt <span class="d-none d-md-inline"> - </span><br class="d-block d-md-none"> tx t </p>
            <span class="btn btn-secondary mt-1 mt-lg-2">button</span></div>
        </div>
      </a>
    </div>
  </div>
</div>

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

Is it possible to create this design using CSS?

I attempted to break away from the conventional square layout of the internet with this design, but I am struggling to utilize Z-index to layer the backgrounds effectively. Here is the current code: <!--############################################# ...

csstwitter-bootstrapbackgroundz-index

To fill the remaining white space, add an underline after the last line of text

I'm struggling to implement a SCSS/CSS styling concept where I need to add a solid line before or after the last line of a heading. The challenge is that the width of the last line varies based on the screen size. I am open to any suggestions. Here&a ...

htmlcssreactjssassnext.js

React DOM's offsetHeight prior to rendering

I am struggling to figure out how to position a React DOM element based on its offsetHeight. The issue is that I cannot determine the offsetHeight of an element that hasn't been created yet (so the height cannot be passed as a parameter to the render ...

javascriptcssreactjs

Display an icon to act as a separator between icons in CSS styling

Is there a way to display a spacer line before and after icons (cross symbols) while excluding the spacer line before and after buttons carrying the word "Cancel"? How can this be achieved? This is my CSS file: .Container > *:first-child::before, .Con ...

htmlcss

Horizontal image scrolling problem across different browsers

Check out my Fiddle. I'm having trouble with scrolling on different browsers. In Chrome, the scroll behaves as expected and stops when the content ends. However, in Firefox, it keeps scrolling even after reaching the end despite setting a fixed width ...

jqueryhtmlcssscroll

Are you looking to add some flair to your Flexbox layout using Media

I am in the process of developing a website using flexbox, and one key aspect of the design is to hide the navigation bar, specifically the left panel in this JSFiddle, when the viewport width is between 480px and 1023px. The current implementation achieve ...

htmlcsswebkitflexbox

Ruby on Rails slider bar functionality

Currently, I am developing a video-focused application using Ruby 1.9.2 and Rails 3.1. One of the key features I need to implement is a slider bar that allows users to adjust the total duration of a video in real-time. Despite my attempts to use HTML5 fo ...

javascripthtmlruby-on-railscssslider

Resolved z-index problem in modal dialog box

My fixed modal has a z-index set to 100, but it seems to be positioned below an element with a z-index of 2 and a position set to relative. I'm not sure why this is happening. You can view the code in this fiddle. Any insights or assistance would be g ...

css

Spin the text within a div by 90 degrees and align it to the right side

I have been attempting to create an information box that contains a simple info text div. On the right side of this info box, I want to include a text labeled "more info" within a nested div to signify that the info box is interactive. To save space, I wou ...

css

Adjusting the navigation image as it passes through various div elements during scrolling

Is it possible to dynamically change an image in the navigation bar based on the user's scroll position? For example, I want pic1 to be displayed when the page content is at the top, then switch to pic2 once the user reaches the footer, and then back ...

javascripthtmljquerycss

The spacing within the table's <tr> elements does not get altered

I am struggling to add a small space in the table <tr> but my attempts have not been successful. How can I resolve this issue? Please refer to the image below for clarification: https://i.sstatic.net/HXdhq.png .panel-booking .panel-body { pad ...

htmlcsshtml-table

Achieving perfect centering in PrestaShop using CSS for both horizontal

Hello there, I require assistance with aligning some images in the center of my Prestashop webpage. I am specifically struggling with aligning 3 circular images at the bottom of the page (not social icons). I cannot figure out how to properly center these ...

cssgeometryprestashopcentering

Incorporate a video within the royal slider feature

Next is my deluxe slider code. This slider displays only images but I am looking to incorporate video as well. I have searched online and tried different solutions, but haven't found one that works for me. Can someone please guide me on how to achieve ...

javascriptjqueryhtmlcssslider

How can a borderless text field be created using Material UI?

Today, I delved into using Material UI for my React project. My goal is to create a registration form similar to this one. Essentially, I want 5 input text fields without any borders and with a simple background color effect when active. However, I'm ...

cssreactjsmaterial-ui

Arranging cards in a stack using VueJS

I am currently working with a small vue snippet. Originally, I had v-for and v-if conditions in the snippet, but due to issues reading the array, it is now hardcoded. The current setup produces three cards stacked on top of each other. I am exploring opti ...

javascripthtmlcssvue.js

Trouble with Setting a Background Image in Ionic with Javascript and Angular

I'm having trouble getting my background image to display in this Ionic project using CSS. It works when I embed it directly into the HTML, but that's not an ideal solution. I vaguely recall something about using base64 for images, but I'm n ...

javascripthtmlcsscordovaionic-framework

Crystal report for VS2010 displays scrollbars on the page

I like to present my report in a div container with overflow:scroll I have placed the crystal report viewer inside the DIV and expect it to stay within the div only, which it does. The div shows scroll bars when the report overflows. However, my page als ...

cssvisual-studio-2010crystal-reports

Issues with CSS hover event causing animation to fail to trigger

I have a container that contains an image holder and a text holder. I am able to set it so that when hovered over, the image scales and the same effect applies to the text. However, when attempting to set up the image holder hover to scale the image and ...

htmlcssanimationhovertransition

Error encountered while loading GitHub Pages resource

Currently, I am facing issues while attempting to host an Angular application with Bootstrap 4 on GitHub Pages using angular-cli-ghpages. The URL I am trying to deploy it at is , but I continuously encounter the following error: Failed to load resource: s ...

angulargithub-pagesbootstrap-4

Tips for encapsulating an image generated using execCommand

<input type="button" onclick="document.execCommand('insertimage',null,'http://barwoncopiers.com/wp-content/uploads/2011/03/linkedin-icon-45x45.jpg');" value="Img"/> <br> <div contenteditable="true" class="editor" id="edit ...

javascriptjqueryhtmlcssexeccommand