What is the best way to ensure all Bootstrap 4 columns have uniform heights?

Important Note. While this question has been asked numerous times in the past, it is now time for fresh responses as we are approaching the release of Bootstrap 4 which includes full flexbox support.

My goal is to achieve equal column height using Bootstrap 4. Below is a demo displaying the desired outcome:

I am seeking a solution that functions across all browsers supported by Bootstrap 4 without the need for JavaScript. Some existing solutions rely on Bootstrap 3 and others do not work properly in Safari on MacOS.

Update. Upon further investigation, I discovered that Bootstrap 4 comes with equal height functionality out of the box. I have attached an updated image to illustrate this. No additional steps are necessary as it is already integrated.

htmlcsstwitter-bootstrap

Answer №1

To achieve equal height columns for previous versions of Bootstrap, all you need to do is add class="row-eq-height" to your existing class="row".

However, in Bootstrap 4, this feature is built-in.

Answer №2

Bootstrap 4 grids by default have equal height columns.

.col { background: red; }
.col:nth-child(odd) { background: yellow; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
      <br>
      Line 2
      <br>
      Line 3
    </div>
    <div class="col">
      1 of 3
    </div>
  </div>
</div>

Answer №3

If you're looking to enhance your website design, consider incorporating the latest Bootstrap cards feature:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQ‌​hNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <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>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <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>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

For more information on how to implement Bootstrap cards, check out this resource.

Best regards,

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

What is the method used by Chrome dev tools to create CSS selectors?

When setting a new style rule for an element, Chrome generates a selector that includes the entire hierarchy of elements instead of just the class name. For instance: <body> <div class="container"> <span class="helper"> ...

htmlcssgoogle-chromecss-selectorsgoogle-chrome-devtools

Organize the Div elements in the form of a message

Here is the code I am working with: https://jsfiddle.net/bdqgszv5/1/ This is the same code without jsfiddle: <section id="aussteller" class="row separated"> <div class="section-header text-center"> <h2& ...

htmlcsstwitter-bootstrap

Customizing background images for individual web pages

Having some trouble changing the background image on my Squarespace website homepage. After exploring forums and inspecting my website's source code, I tried using the id #collection-51648018e4b0d7daf0a7cece to target just the homepage background but ...

htmlcssbackground-imagesquarespace

Building a basic music player with the <audio> element and JavaScript / jQuery

I am new to Javascript and jQuery, and this is my first time posting a question here. I have been trying to create custom functions for the HTML5 audio tag by following tutorials online. Despite my efforts, I cannot seem to get it working. Although I can m ...

javascriptjqueryhtmlaudiocustom-controls

Having trouble with the CSS :hover tag? Try changing the display property from none to inline-block

I'm currently working on a website navigation menu... I've decided to utilize the :hover feature in CSS to switch the display property from none to inline-block. In the past, I have implemented this with no issues whatsoever. However, I am now e ...

htmlcss

Change from full manual control to automatic mode

Here is the link to my code: http://jsfiddle.net/yHPTv/2491/ I am experiencing an issue with the transition effect. The hidden element is supposed to slide into view from the right edge of the .block element, but instead, it just appears suddenly. .blo ...

javascriptjqueryhtmlcss

The React JS textarea's onchange event is not functioning properly when trying to set the value

This is a class component I created for an auto-suggest text area similar to Twitter's feature. import React, { Component, createRef } from 'react'; import { TextArea, List, Triangle } from './Styled'; import ge ...

javascripthtmlreactjs

What is the best way to display three columns on a desktop computer but only one column on a mobile device?

I need help aligning my content in a way that it appears as one big column in the center, with two additional columns on the left and right sides (similar to the image provided). The background color is just for visual reference. https://i.sstatic.net/7a4 ...

htmlbootstrap-4

Personalized cursor that blinks while utilizing window.history.replaceState

While navigating between sub-pages, I utilize the window.history.replaceState method to replace URLs in my web application. However, I have noticed that my custom cursor briefly blinks (replaced by cursor: default) when the current URL is replaced with a n ...

javascripthtmlcss

Using a jQuery event to apply styles with CSS

Hello, I am using jQuery Easy UI on my webpage but feeling a bit confused. I want to create an input field that looks like a tagging field - meaning when the user types a separator character (let's say a comma), the word being typed will have its CSS ...

jquerycsstagging

Enhancing Your Images with jQuery

Hello When working with jQuery, the following code can be used to darken an image. On the contrary, how would you go about brightening up an image? $(this).hover(function() { $(this).stop().animate({ opacity: 0.5 }, 500); }, function() { $(thi ...

jquerycss

Guide to customizing the appearance of a component's host element on-the-fly

For instance: https://stackblitz.com/edit/angular-mkcfsd In my project, I have an icon component called app-icon which dynamically takes a path and inserts it into an SVG viewbox. I extract the height and width of the path, then set the SVG to match those ...

cssangularangular7

The hyperlink is not functional

I'm embedding PHP code within an HTML page and using an href link, but it's not working. Here's the HTML+PHP code snippet: <div class="panel-body"> <div class="row"> <div class="col-md-12 space20"> & ...

javascriptphphtml

CSS: Adding decorative trailing dots below the header when positioned over a background

I am seeking assistance with achieving a specific effect in CSS, as shown in the attached screenshot. The trailing dots should cover the entire width of the element (100%) and be responsive. However, I encountered an issue when placing the header on a bac ...

htmlcsspseudo-class

Is there a way in CSS/3 to dynamically adjust the height based on the width?

Is there a way in CSS/3 to maintain the shape ratio of a div while keeping it responsive? Let's say the container is 100px wide. For example: width: 100%; height: 100%-of-width; Result: The div is 100px wide and 100px high. Another example: ...

javascripthtmlcssaspect

Is it possible to use an input value to rotate an element?

I'm attempting to rotate a red circle with the ID of outer using Input[type=range]. I've tried selecting the circle's style, then transforming it based on the input value, but it needs to be within the parentheses of rotateZ(), which require ...

javascripthtmlcssdom

Refresh the content of a webpage in AngularJS without the need to fully reload the entire page

Within my controller and view files, I have content that is sourced from various places, including API calls. For instance, I have information retrieved from the database where users can update certain details like their last name. After submitting the up ...

javascripthtmlangularjs

I have to define a specific identifier in Django so that I can easily incorporate it into Bootstrap later on

I am working on creating a portfolio in Django. I have a section in my HTML code that connects to my jobs list in Django using {% for ... %} in order to display images, summaries, and titles of my projects. However, there is an ID within this div that refe ...

cssdjangodjango-templates

Displaying the Price of a Product in a Different Location on Your Wordpress Site

I am attempting to display the price of a product within a post using HTML code. My goal is to use $product->get_price(). However, I need a way to specify which product to call by identifying it with its code or something similar. In essence, all I am ...

phphtmlwordpress

Having trouble integrating Stratus 2 Beta with the HTML code of a website

My task was to incorporate Stratus 2 Beta into our website for music streaming. Although the Stratus website makes it appear simple to add their code to the HTML, I have been facing difficulties in getting it to function properly. Here is the code I have ...

jqueryhtmlsoundcloudsoundcloud-stratus