Bootstrap col same height using flexbox

Question

I am trying to achieve 4 columns with the same height according to best aproach for Bootstrap 3.x method available here https://stackoverflow.com/a/22892773

I think that I am doing everything correctly, but sadly no.

Here's the code:

HTML:

<div class="container">
    <div class="row equal">

      <div class="col-md-3 col-sm-12 col-xs-12">
         <div id="wpis-excerpt">
            <a href="#"><h1>Lorem Ipsum</h1></a>
            <p>Nulla eget felis velit. Praesent justo tortor, luctus in turpis id, auctor volutpat nunc. Sed malesuada et sapien id eleifend. Suspendisse scelerisque tempus quam, sagittis congue justo volutpat vel. Etiam fringilla auctor quam, a suscipit nisl interdum non. Pellentesque id sem a dolor pellentesque molestie.</p>
         </div>
      </div>

      <div class="col-md-3 col-sm-12 col-xs-12">
         <div id="wpis-excerpt">
            <a href="#"><h1>Lorem Ipsum Lorem Ipsum</h1></a>
            <p>Vestibulum sit amet velit varius, hendrerit purus a, aliquam ante. Nullam cursus ultrices lacus in hendrerit. Nam quis sem sed orci tempus interdum. Sed non erat turpis. Nam vitae orci at ligula auctor eleifend.</p>
         </div>
      </div>

      <div class="col-md-3 col-sm-12 col-xs-12">
         <div id="wpis-excerpt">
            <a href="#"><h1>Lorem Ipsum Lorem Ipsum Lorem Ipsum</h1></a>
            <p>Pellentesque finibus bibendum feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget dolor vel augue porttitor lobortis. Praesent et varius massa, consequat convallis lorem. </p>
         </div>
      </div>

      <div class="col-md-3 col-sm-12 col-xs-12">
         <div id="wpis-excerpt">
            <a href="#"><h1>Lorem Ipsum</h1></a> 
            <p>Aliquam enim turpis, porta quis pellentesque ac, porttitor sit amet lorem. Vestibulum elementum gravida finibus. Vestibulum euismod pellentesque justo et pellentesque. Quisque pellentesque odio id imperdiet iaculis. Phasellus vel ex ullamcorper, aliquam mi non, faucibus erat. Quisque dolor dui, posuere eu tortor sit amet, auctor eleifend velit. Integer blandit aliquet erat id dignissim.</p>  
         </div>
      </div>

   </div>
</div>

CSS:

#wpis-excerpt { text-align: justify; border-top: 5px solid #471950; border-bottom: 9px solid #471950; margin-bottom: 10px; }

#wpis-excerpt h1 { font-size: 34px; font-family: 'Oswald'; color: #000; font-weight: 700; text-align: left; padding: 10px; }

#wpis-excerpt p { font-size: 15px; color: #4F4E4F; padding: 10px; line-height: 22px; }


@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}


.equal > div[class*='col-'] {  
  display: flex;
  flex-direction: column;
}

Here is also a fiddle: https://www.bootply.com/XpaysnjJrO

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

You have misunderstood the column in bootstrap.The div with col-md-3 is the column,not the div with an id called wpis-excerpt.

  <div class="col-md-3 col-sm-12 col-xs-12">
     <div id="wpis-excerpt">
        <a href="#"><h1>Lorem Ipsum</h1></a> 
        <p>xxxxxxxxxxxx.</p>  
     </div>
  </div>

Actually,the four columns in your code have the same height but some with a lot of blank white height,which mislead you four columns are with different height.You can use chrome or firefox to inspect it.Following is the picture from my chrome.

Hope it could help you.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 27 '17 at 14:25

YinchaoOnline

179
1
11

Okay, you're right. So I should modify CSS for .wpis-excerpt. As you can see, .wpis-excerpt has a bottom border. How to make these borders in the same place (height)? – Marcin Jun 28 '17 at 18:56
why not let the column has a bottom border? – YinchaoOnline Jun 29 '17 at 01:16
When I do so, the border is in the same height but it's all the way from 1st column to 4th without free space between columns. How to divide this border in 4 pieces, one for every column? – Marcin Jul 03 '17 at 21:40

Bootstrap col same height using flexbox

1 Answers1