Adjust the height of the column to fill the row in Bootstrap 4

I am facing an issue with a row and columns on my webpage. The cards within these columns have varying amounts of content, but I want them all to have the same height.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row mx-2 d-flex align-content-stretch flex-wrap flex-grow-1">
  <div class="col-md-3 ">
    <div class="card">
      <img src="image1.jpg" class="img-fluid" alt="" />
      <div class="card-body overflow-hidden text-center">
        <h4 class="color-primary">card 1</h4>
        <p></p>
        <a href="" class="btn btn-info"><i class="zmdi zmdi-download"></i>download</a>
      </div>
    </div>
  </div>
  <div class="col-md-3 ">
    <div class="card">
      <img src="image1.jpg" class="img-fluid" alt="" />
      <div class="card-body overflow-hidden text-center">
        <h4 class="color-primary">card 1</h4>
        <p></p>
        <a href="" class="btn btn-info"><i class="zmdi zmdi-download"></i>download</a>
      </div>
    </div>
  </div>
  <div class="col-md-3 ">
    <div class="card">
      <img src="image1.jpg" class="img-fluid" alt="" />
      <div class="card-body overflow-hidden text-center">
        <h4 class="color-primary">card 1</h4>
        <p></p>
        <a href="" class="btn btn-info"><i class="zmdi zmdi-download"></i>download</a>
      </div>
    </div>
  </div>
  <div class="col-md-3 ">
    <div class="card">
      <img src="image1.jpg" class="img-fluid" alt="" />
      <div class="card-body overflow-hidden text-center">
        <h4 class="color-primary">card 1</h4>
        <p></p>
        <a href="" class="btn btn-info"><i class="zmdi zmdi-download"></i>download</a>
      </div>
    </div>
  </div>
</div>

Despite trying content stretch and item stretch, I couldn't resolve the issue.

htmlcssbootstrap-4

Answer №1

Make columns in Bootstrap 4 row equal height

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<div class="row mx-2 d-flex align-content-stretch flex-wrap flex-grow-1">
  <div class="card-group">
  <div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
  <h5 class="card-title">card 1</h5>
  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  <a href="#" class="btn btn-primary">download</a>
</div>
  </div>
  <div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
  <h5 class="card-title">card 1</h5>
  <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
  <a href="#" class="btn btn-primary">download</a>
</div>
  </div>
  <div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
  <h5 class="card-title">card 1</h5>
  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
  <a href="#" class="btn btn-primary">download</a>
</div>
  </div>
</div>
</div>

Answer №2

Utilize the power of the Bootstrap 4 h-100 class to set the height to 100%.

<div class="card h-100">
  <img src="image1.jpg" class="img-fluid" alt="" />
  <div class="card-body overflow-hidden text-center">
    <h4 class="color-primary">Card 1</h4>
    <p></p>
    <a href="" class="btn btn-info"><i class="zmdi zmdi-download"></i>Download</a>
  </div>
</div>

This method ensures that your cards will maintain the same height within a row, regardless of varying content lengths.

Answer №3

To ensure all elements have the same height, utilize the display flex property within the inner column.

.col-md-3{
  display: flex;
}

Furthermore, adjust the width of .card to be 100%.

.card{
  width: 100%;
}

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

Trouble with Sass Imports in conjunction with BootStrap5 on ASP.NET Core MVC platform

As I delve into using Scss for Bootstraps 5, a new issue has arisen that I am struggling to resolve with the help of internet resources. Initially, I successfully compiled and made changes to my Sass file when importing the following declarations: @import ...

csssassasp.net-core-mvcbootstrap-5

How can I define the boundaries for the scrolling of a static background image?

Is there a way to limit how far a fixed background image can scroll down a page? Essentially, is it possible to change the background attachment to static when the bottom of the background image is 10px away from the bottom edge of its div container? In t ...

javascripthtmlcss

The function of jquery bootstrap model is not working as intended

Seeking assistance in opening a bootstrap modal upon click. Utilizing Drupal 7 and the latest Bootstrap version, 4.3.1. Javascript File jQuery.noConflict(); (function($){ $(function() { $('#myButton').click(function (e) { console.log(&ap ...

jquerybootstrap-4drupal-7

Modify the color scheme of the parent div by selecting the child div (using only CSS and HTML)

I am working with a nested div structure, where one is contained inside the other: <div class="outer"> <div class="inner"> </div> </div> It looks something like this: https://i.sstatic.net/r5qbD.png I ...

htmlcss

Angular Material Popup - Interactive Map from AGM

I am in the process of developing a material dialog to collect user location information using AGM (angular google maps). I have successfully implemented a map on my main page, but when the dialog is opened, it only shows a blank space instead of the map. ...

javascriptcssangulartypescriptangular-google-maps

Is there a way to ensure that the embedded map remains within the confines of its container?

I am trying to add a map to my website, but it is overflowing its container. I have attempted to reduce its width, but it still exceeds the boundaries of the div. Below is the Bootstrap code I am using: <link href="https://cdn.jsdelivr.net/npm/&l ...

htmlcssbootstrap-5

Apply CSS and HTML to enclose text within a stylish box

Seeking a solution to contain the output of a lengthy and wide real-time running log file within a border. The challenge lies in trying different CSS parameters without achieving the desired effect. Here's what has been attempted: .log_output { borde ...

htmlcss

The CSS overflow hidden attribute is leading to issues with the functionality of the Google Maps API

I am struggling to showcase a Google map as a tooltip using the qTip jQuery plugin. I have multiple elements on my page and need to assign overflow: hidden to all of them. Everything is functioning properly, except for the fact that the Google map toolti ...

cssgoogle-maps-api-3overflowhidden

Having trouble with Laravel 5.8 Bootstrap integration within JQuery?

i found a helpful resource at everything seems to be working well in the view, but i'm encountering issues when trying to implement it in JQuery. if anyone has suggestions on how to resolve this problem, please let me know. here is the PHP code for ...

htmljquerylaraveljquery-uilaravel-5

Is it achievable to use the Jquery :after selector?

I am facing an issue with a menu script in my HTML code that looks like this: <ul class="cbp-tm-submenu" style="left: 50px;"> <li><a href="#" class="cbp-tm-icon-screen">Sorrel desert</a></li> <li><a href="#" ...

jqueryhtmlcssjquery-selectors

Using Bootstrap to align items to the right in a navigation bar

I've been attempting to align certain elements to the right in the navbar using Bootstrap by utilizing mr-auto, but it doesn't seem to be functioning properly. What steps should I take to ensure it works correctly? Below is a snippet of my index. ...

htmlcsstwitter-bootstrapbootstrap-5

Django is looking for a primary key that I do not possess

Encountering an issue: invalid literal for int() with base 10: 'ljrh' This error occurs when attempting to add a new entry in a model: day = itemize(value, getday(strip(key))) add = Reoccurring(request.user.username, strip(day.Day), strip(day. ...

pythonhtmldjangohttppost

Positioning CSS Div After Absolute Positioning Div

Can anyone provide guidance on how to smoothly continue the flow of a page using CSS? Let me explain my current dilemma: I have 3 divs - div 1 (parent), div 1 (child), and div 2 (normal). The parent div is absolute, the child is relative. Everything seem ...

htmlcss

Troubleshooting the pre-loader image loading problem

Apologies for bringing up a minor issue, but I'm struggling with this one. I added a pre-loader image to my page load using a simple method. You can find my page here Here is the HTML code for the Pre-loader image: <div class="se-pre-con">&l ...

javascriptjqueryhtmlcss

Utilize the design elements stored in the database within Django

I have a style stored in my database and I want to use it in a template, but I'm not sure how to do it. models.py class Post(models.Model): # ... body = models.TextField() # HTML style = models.TextField() # CSS # ... views.py ( ...

pythoncssdjango

Arranging data in an HTML table by dynamically populating it with information retrieved from a server

UPDATE 4/16/2012: All issues have been resolved, and the sorting functions are now functioning correctly. Timezones have been converted to their corresponding one-letter UTC codes (A-Z). The only remaining task is implementing Daylight Savings Time checks ...

javascripthtmlsortingknockout.js

What techniques can be used to avoid blinking while forcefully scrolling to the left?

In my previous inquiry about dynamically adding and removing divs on scroll, I was unable to find a satisfactory solution among the responses provided. However, I decided to take matters into my own hands and attempted to implement it myself. My approach ...

javascriptjqueryhtmlcss

Embedding videos in HTML

I am experiencing difficulties with embedding a video in my HTML file. I attempted to use a YouTube video, but when I open it in my browser, it displays an error message stating that the video is unavailable because YouTube has refused to connect. I also ...

htmlcss

How can jQuery be used to dynamically update a checkbox value based on a radio field selection?

The objective is to update the checkbox fields to TRUE or FALSE based on the radio button selection. If FALSE is selected, the checkboxes should be unchecked. I am only successful in checking the checkboxes when TRUE is selected. Could this be because I h ...

javascriptjqueryhtmlcheckbox

Determine which city is submitted when the form is completed

Is there a way to automatically populate the city parameter in the form details? Please note that I am retrieving data from an Oracle database. Below is the code snippet I am currently using: <script> $(document).ready(function() { $ ...

javascripthtmlajaxforms