looping through Bootstrap boxes with equal heights

Question

looping through Bootstrap boxes with equal heights

Every time I come across this issue, I find myself struggling without a clear solution that simplifies my life. My layout consists of 14 boxes arranged side by side. I am using the col-sm-12 class (with my bootstrap set up for 24 columns) on these boxes. However, the content within the boxes varies, causing their heights to be unequal, and the larger boxes end up "pushing" the ones adjacent to them. One straightforward solution is to insert a row after every two boxes, but here's the challenge - the boxes are dynamically generated in a loop! I could set a min-height, but that might not look good on mobile devices (especially on landscape mode). I am also unsure about the browser support for flexbox.

Are there any other clever hacks that I could implement?

HTML

<div class="row">
  <div class=" col-xs-24 col-sm-12 col-md-12 blocks"><!--the loop starts from here-->
   <div class="row">
      <div class="col-sm-8"> some content</div>
       <div class="col-sm-16">some more content that changes height. you can put some lorem isum in here. </div>
    </div>
    <!--my loop, aka, blocks, end here-->
   </div>
 </div>

html css twitter-bootstrap

Answer 1

Answer №1

Flex is the ultimate solution when it comes to creating columns or boxes of equal height. Utilize flex and let the browser handle all the calculations and heavy lifting for you.

.wrapper {
    display: block;
    max-width: 500px;
    margin: 30px auto;
}

.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flex-row div[class*="col-sm"] {
    background: #ddd;
    padding: 10px;
    box-sizing: border-box;
    flex: 0 1 45%;
}

<head>
  <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<div class="wrapper">
  <div class=" col-xs-24 col-sm-12 col-md-12 blocks"><!--the loop starts from here-->
   <div class="row flex-row">
      <div class="col-sm-8"> some content</div>
       <div class="col-sm-16">some more content that changes height. you can put some lorem isum in here. </div>
    </div>
    <!--my loop, aka, blocks, end here-->
   </div>
 </div>

Visit CodePen Example

Browser Support

While flex is generally well supported in modern browsers, Safari may present some challenges according to caniuse.com.

For older browsers like IE 8 or 9, support is lacking. IE 10 adheres to an older syntax from 2011, and IE 11 offers partial support. Older WebKit browsers may require fallback rules to accommodate legacy Flexbox syntax from 2009 or 2011.

Learn more about Advanced Cross-browser Flexbox

If you prefer to avoid using flex, options like tables or inline-block elements may be considered, though equal-height columns may not be achievable with these alternatives.

Answer 2

Flex is the ultimate solution when it comes to creating columns or boxes of equal height. Utilize flex and let the browser handle all the calculations and heavy lifting for you.

.wrapper {
    display: block;
    max-width: 500px;
    margin: 30px auto;
}

.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flex-row div[class*="col-sm"] {
    background: #ddd;
    padding: 10px;
    box-sizing: border-box;
    flex: 0 1 45%;
}

<head>
  <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<div class="wrapper">
  <div class=" col-xs-24 col-sm-12 col-md-12 blocks"><!--the loop starts from here-->
   <div class="row flex-row">
      <div class="col-sm-8"> some content</div>
       <div class="col-sm-16">some more content that changes height. you can put some lorem isum in here. </div>
    </div>
    <!--my loop, aka, blocks, end here-->
   </div>
 </div>

Visit CodePen Example

Browser Support

While flex is generally well supported in modern browsers, Safari may present some challenges according to caniuse.com.

For older browsers like IE 8 or 9, support is lacking. IE 10 adheres to an older syntax from 2011, and IE 11 offers partial support. Older WebKit browsers may require fallback rules to accommodate legacy Flexbox syntax from 2009 or 2011.

Learn more about Advanced Cross-browser Flexbox

If you prefer to avoid using flex, options like tables or inline-block elements may be considered, though equal-height columns may not be achievable with these alternatives.

Answer 3

Answer №2

Feeling hesitant about utilizing flexbox since it doesn't support IE10 and below? Consider using CSS tables instead.

Keep in mind that I have implemented the standard 12 columns for this demonstration.

.blocks > .row {
  display: table
}
.blocks .row > [class*="col"] {
  display: table-cell;
  background: red;
  float:none /* override the float:left from bootstrap.css */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class=" col-xs-12 col-sm-12 col-md-12 blocks">
      <!--the loop starts from here-->
      <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4">some content</div>
        <div class="col-xs-8 col-sm-8 col-md-8">some more content that changes height. you can put some lorem isum in here.</div>
      </div>
      <!--my loop, aka, blocks, end here-->
    </div>
  </div>
</div>

UPDATED based on OP's request in the comments section below

Here is another version using CSS tables as well. However, due to being within the loop, OP cannot add HTML markup.

A more straightforward approach given the markup is clearing left after every 4 items

.row{
  margin:15px auto;
}
.block{
  background:black;
  color:white;
  border:1px solid white;
  padding:15px 5px;
}
.block h4{
  color: pink; 
  text-decoration:underline;
}

.block:nth-of-type(3n+1) {
  clear:left
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-4 block">
      <!--lets assume this coloumn is on the loop-->
      <h4>this is a small paragraph</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
    </div>
    <div class="col-sm-4 block">
      <!--lets assume this coloumn is on the loop-->
      <h4>this is another small paragraph</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
    </div>
    <div class="col-sm-4 block">
      <!--lets assume this coloumn is on the loop-->
      <h4>wow! small paragraph</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
    </div>
    <div class="col-sm-4 block">
      <!--lets assume this coloumn is on the loop-->
      <h4>again small paragraph!</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
    </div>
    
    <!-- Additional columns in the loop with similar structure -->
    
  </div>
</div>

Answer 4

Feeling hesitant about utilizing flexbox since it doesn't support IE10 and below? Consider using CSS tables instead.

Keep in mind that I have implemented the standard 12 columns for this demonstration.

.blocks > .row {
  display: table
}
.blocks .row > [class*="col"] {
  display: table-cell;
  background: red;
  float:none /* override the float:left from bootstrap.css */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class=" col-xs-12 col-sm-12 col-md-12 blocks">
      <!--the loop starts from here-->
      <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4">some content</div>
        <div class="col-xs-8 col-sm-8 col-md-8">some more content that changes height. you can put some lorem isum in here.</div>
      </div>
      <!--my loop, aka, blocks, end here-->
    </div>
  </div>
</div>

UPDATED based on OP's request in the comments section below

Here is another version using CSS tables as well. However, due to being within the loop, OP cannot add HTML markup.

A more straightforward approach given the markup is clearing left after every 4 items

.row{
  margin:15px auto;
}
.block{
  background:black;
  color:white;
  border:1px solid white;
  padding:15px 5px;
}
.block h4{
  color: pink; 
  text-decoration:underline;
}

.block:nth-of-type(3n+1) {
  clear:left
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-4 block">
      <!--lets assume this coloumn is on the loop-->
      <h4>this is a small paragraph</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
    </div>
    <div class="col-sm-4 block">
      <!--lets assume this coloumn is on the loop-->
      <h4>this is another small paragraph</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
    </div>
    <div class="col-sm-4 block">
      <!--lets assume this coloumn is on the loop-->
      <h4>wow! small paragraph</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
    </div>
    <div class="col-sm-4 block">
      <!--lets assume this coloumn is on the loop-->
      <h4>again small paragraph!</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
    </div>
    
    <!-- Additional columns in the loop with similar structure -->
    
  </div>
</div>

looping through Bootstrap boxes with equal heights

Answer №1

Answer №2

Similar questions

Aligning an image vertically within a division

Tips on transmitting form information from client-side JavaScript to server-side JavaScript with Node.js

Reduce the value in the database when a button is clicked using PHP

Adjusting the width of a <div> element based on window size changes

Animations experiencing delays on mobile Chrome

Using Selenium to extract and manipulate text content enclosed within specific HTML tags

Having trouble with your CSS on your mobile website?

Struggles with conflicting versions of Jquery within asp.net

Why is there an excessive amount of white space on my Reactjs page?

Anticipated the presence of a corresponding <tr> in the <table> within the server HTML, but encountered hydration failure due to discrepancies between the initial UI and the server-rendered content

Creating interactive labels in a histogram that update based on the user's input

Determine if a certain value is present in an array within an HTML document

Spacious width that doesn't require a horizontal scrollbar for navigation

Is there a way I can toggle between nav-pills and nav-stacked based on varying screen sizes?

Create an element that can be dragged without the need to specify its position as absolute

Issue with hiding the overflow of the document's body

Enhance design based on scrolling function in React

The tab content in VerticalTab Material React UI is spilling out and overflowing

Looking to integrate the date, month, and year selection tags into the inline format

What is the best way to stack several items vertically beside an image?