Creating Uniform Column Heights with Bootstrap

Is there a way to ensure that all my Bootstrap columns are the same height? Currently, when one column has more content than another, the layout appears uneven.

Here is an example on Fiddle that illustrates the issue:

https://jsfiddle.net/jjq9gygr/

I attempted using the display: flex approach, but because my HTML does not include a new .row container for every 3 col-xs-4 columns, all the columns end up on the same row instead of wrapping to the next line after 3 columns. I hope that explanation makes sense.

If it's possible to achieve the desired outcome without altering the existing HTML structure, that would be ideal. Any suggestions or solutions are welcome.

<div class="container">
<div class="row">
    <div class="col-xs-4 red">
  <h3>
  Column 1
  </h3>
        <p>Different amount of text. Different amount of text. Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    <div class="col-xs-4 pink">
<h3>
  Column 2
  </h3>
        <p>Different amount of text. Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    <div class="col-xs-4 yellow">
  <h3>
  Column 3
  </h3>
        <p>Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    <div class="col-xs-4 orange">
  <h3>
  Column 4
  </h3>
        <p>Different amount of text. Different amount of text. Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    <div class="col-xs-4 blue">
  <h3>
  Column 5
  </h3>
        <p>Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    <div class="col-xs-4 green">
  <h3>
  Column 6
  </h3>
        <p>Different amount of text. Different amount of text. Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    <div class="col-xs-4 navy">
  <h3>
  Column 7
  </h3>
        <p>Different amount of text. Different amount of text. Different amount of text. Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
</div>

htmlcsstwitter-bootstrap

Answer №1

Teach your rows to be flexible containers and instruct them to wrap their content.

.row {
    display: flex;
    flex-wrap: wrap;
}


@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.row {
  display: flex;
  flex-wrap: wrap;
}

.col-xs-4 {
  margin-bottom: 30px;
}

.red {
  background-color: red;
}

.pink {
  background-color: pink;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: orange;
}

.blue {
  background-color: MediumTurquoise;
}

.green {
  background-color: green;
}

.navy {
  background-color: PaleGoldenRod;
}
<div class="container">
  <div class="row">
  
    <div class="col-xs-4 red">
      <h3>Column 1</h3>
      <p>Different amount of text. Different amount of text. Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    
    <div class="col-xs-4 pink">
      <h3>Column 2</h3>
      <p>Different amount of text. Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    
    <div class="col-xs-4 yellow">
      <h3>Column 3</h3>
      <p>Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    
    <div class="col-xs-4 orange">
      <h3>Column 4</h3>
      <p>Different amount of text. Different amount of text. Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    
    <div class="col-xs-4 blue">
      <h3>Column 5</h3>
      <p>Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    
    <div class="col-xs-4 green">
      <h3>Column 6</h3>
      <p>Different amount of text. Different amount of text. Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    
    <div class="col-xs-4 navy">
      <h3>Column 7</h3>
      <p>Different amount of text. Different amount of text. Different amount of text. Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    
  </div>
</div>

If you're starting a new project, consider transitioning to Bootstrap 4, which comes with the flexbox integrated into its grid system. In Bootstrap 4, the column classes no longer use xs so you would need to update from .col-xs-4 to .col-4.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');

.col-4 {
  margin-bottom: 30px;
}

.red {
  background-color: red;
}

.pink {
  background-color: pink;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: orange;
}

.blue {
  background-color: MediumTurquoise;
}

.green {
  background-color: green;
}

.navy {
  background-color: PaleGoldenRod;
}
<div class="container">
  <div class="row">
  
    <div class="col-4 red">
      <h3>Column 1</h3>
      <p>Different amount of text. Different amount of text. Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    
    <div class="col-4 pink">
      <h3>Column 2</h3>
      <p>Different amount of text. Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    
    <div class="col-4 yellow">
      <h3>Column 3</h3>
      <p>Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    
    <div class="col-4 orange">
      <h3>Column 4</h3>
      <p>Different amount of text. Different amount of text. Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    
    <div class="col-4 blue">
      <h3>Column 5</h3>
      <p>Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    
    <div class="col-4 green">
      <h3>Column 6</h3>
      <p>Different amount of text. Different amount of text. Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    
    <div class="col-4 navy">
      <h3>Column 7</h3>
      <p>Different amount of text. Different amount of text. Different amount of text. Different amount of text. Different amount of text. Different amount of text. </p>
    </div>
    
  </div>
</div>

Answer №2

If you are searching for the class .row-eq-height that is applied to the row containers in Bootstrap, it's a valuable asset to enhance the basic code structure. You can find more information about it on this page and below is the CSS code snippet highlighting its usage.

 /*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

/*
 * Styles borrowed from the Grid example for better visibility of grid rows & columns.
 */
.container {
  padding-right: 15px;
  padding-left: 15px;
}

h4 {
  margin-top: 25px;
}
.row {
  margin-bottom: 20px;
}
.row .row {
  margin-top: 10px;
  margin-bottom: 0;
}
[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

/*
 * Callout styles inspired by Bootstrap's main documentation.
 */
/* Common styles across all types */
.bs-callout {
  padding: 20px;
  margin: 20px 0;
  border-left: 3px solid #eee;
}
.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout code {
  background-color: #fff;
  border-radius: 3px;
}
/* Variations */
.bs-callout-danger {
  background-color: #fdf7f7;
  border-color: #d9534f;
}
.bs-callout-danger h4 {
  color: #d9534f;
}
.bs-callout-warning {
  background-color: #fcf8f2;
  border-color: #f0ad4e;
}
.bs-callout-warning h4 {
  color: #f0ad4e;
}
.bs-callout-info {
  background-color: #f4f8fa;
  border-color: #5bc0de;
}
.bs-callout-info h4 {
  color: #5bc0de;
}

Answer №3

If you're looking to equalize the height of elements in your HTML, consider using the JQ plugin known as jquery.matchHeight.js. This versatile tool is compatible with various HTML frameworks and incredibly user-friendly.

For more information, visit: https://github.com/liabru/jquery-match-height

To implement this plugin via JavaScript:

$('.row .col-xs-4').matchHeight();

Alternatively, you can utilize data attributes:

<div class="col-xs-4 red" data-mh="my-group">Red</div>
<div class="col-xs-4 blue" data-mh="my-group">Blue</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

jquery function that switches image after the fifth mouseover event

I just can't seem to figure this out. I need a mouseover event that switches between two images until the fifth time you mouseover, then it changes to a third image. Here is my code so far: <!doctype html> <html> <head> <meta c ...

htmljquerymouseover

What is the most effective method for integrating additional CSS/JS libraries into a GitHub repository?

I would like to integrate FontAwesome, Bulma, jquery, and jquery-ui into one of my Github repositories for the front-end section. Currently, I am including the JS files or CSS files from these projects in my own JS/CSS folders, but I believe there might ...

javascriptjquerycssgitgithub

Exploring the capabilities of JW Player 6 for seeking and pausing video

Is there a way to make JW Player 6 seek to a specific point and pause without pausing after each seek request, maintaining the ability to seek continuously during playback? The current solution provided pauses the player after every seek request, which is ...

javascripthtmlflashvideojwplayer

Deactivate an option within an angularjs multi-select menu

Currently, I am utilizing an angularjs multiselect box which is displayed below: https://i.stack.imgur.com/w6ffN.png Here is the html code snippet: <select multiple ng-options="Language.LangID as Language.LangName for Language in AllLanguages " ng-mo ...

htmlangularjsmulti-select

Discovering the largest element within a group to establish the height for the rest

There is a component mapping card elements that look like this: https://i.stack.imgur.com/CktsE.png The topmost, leftmost card appears to be missing some height compared to others. Is there a way to determine the height of the tallest components and then ...

cssreactjsnext.jstailwind-cssnext.js13

Query the database and retrieve data using the POST method in PHP

Using the following SQL query in a link to extract information from a database <div class="nav-laptop"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' ORDER BY Proizvodac Asc;">L ...

phphtmlpost

Unable to eliminate the overlapping box-shadow

Specifically, I am utilizing polymer paper-shadow for my project. I am attempting to eliminate two sides of a paper-shadow box in order to create a basic arrow box, but I am facing difficulties in achieving this. Removing the position: absolute did not re ...

htmlcsspolymer

Concealing categories within an accordion-styled menu

Recently, I put together a list that includes various pieces of information along with an accordion menu. Take a look at the list However, I've encountered a small issue which has left me quite perplexed. When a menu item is clicked - for instance, ...

javascripthtmlcss

Customize the text color of select list options in Angular 5

Is there a way to style the foreground colors of select list options differently in this dropdown code? <select id="tier" class="form-control" [(ngModel)]="tierId"> <option *ngFor="let m of tierList" value="{{m.tier}}" > {{m.option ...

htmlcssangularangular5

Is there a way to adjust the orientation of a <video> element without affecting the orientation of the video controls?

<video controls> </video> video { transform: scaleX(-1) } This CSS code flips the video horizontally, but it also flips the control buttons along with it. I attempted to flip the wrapper element containing the video using .wrapper {transfor ...

htmlcssvideo

Tips for ensuring that the elements within the flexbox are centered and aligned to the left

New proposed layout I need assistance with centering all flexbox items in a 3-column layout. Additionally, I want the items in rows that are not full to be centered and aligned to the left. Any suggestions for achieving this? Below is my current code, bu ...

htmlcssflexbox

Issue with triggering function within Material UI Tabs

The issue I encountered cannot be replicated, but I attempted to address it. Within a Material UI element, there is a child element that I inserted - an X icon located in the corner. The parent element is the surrounding box. There are two main problems: ...

cssmaterial-ui

Using a specialized component to trigger the opening of a Material UI dialog

I have a requirement where I need to pass a custom component to an MUI Dialog so that the Dialog can open itself and render its children. const CustomDialog = ({children, someCustomComponent}) => { const handleClickOpen = () => { setOpen(true); } ...

htmlreactjsmaterial-ui

The file-loader in Webpack is failing to copy the files and update the URL

I am encountering an issue with webpack file loader where it is not outputting image files. This problem arises while also importing HTML files as partials in my Angular app. Below is my webpack configuration for handling images using the file-loader: [w ...

javascripthtmlangularjswebpackangular-material

Customize one header to display different banners on each page using PHP conditionals

I created my website for entertainment purposes and I decided to use different banners on each page. Currently, in my header section, random banners appear using the following code: <div style=' height:145px; background-image:url(images/banners/ba ...

phphtmlif-statementheaderbanner

Tips for showing form data upon click without refreshing the webpage

Whenever I input data into the form and click on the calculate button, the result does not appear in the salary slip box at the bottom of the form. However, if I refresh the page and then click on the calculate button, the results are displayed correctly ...

javascripthtmlcssbootstrap-5

Class Div is visible only within the jQuery Tab

I have encountered a perplexing issue that has left me stumped. I recently added tabs using a jQuery plugin [Tabulous] and am in the process of transferring existing content into these tabs. However, I stumbled upon a strange problem while attempting to po ...

jqueryhtmlcss

What is the method used to incorporate the radial gradient in this design?

As I was browsing the internet, I came across several websites with beautiful natural gradients on their backgrounds. However, I'm puzzled as to how they achieved this effect. It doesn't seem like a simple image file because the gradient adjusts ...

css

Updating previous values in reactjs to a new state

I have a div set up to render multiple times based on data retrieved from the database. The background color of the div corresponds to the ID received from the backend. My goal is to change the background color of the currently selected div and remove the ...

javascripthtmlcssreactjs

The element is unclickable due to being obstructed by another element

https://i.sstatic.net/pomMS.png My task is to click on a button using this code: browser.find_element_by_id('btnSearch') However, the button is being blocked by a div tag with the following attributes: <div id="actionSearch" class="row pull- ...

pythonhtmlcssseleniumselenium-chromedriver