How can I make bootstrap 3 columns flex which has different height?

Question

I am trying to remove space and make flex column .col-md-5 which has different height. But it is not becoming flex, I have searched a lot on google there are hundreds of thread and I have tried most of them. But still could not sort out. Current I am getting following result

Here's the snippet:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="ayaz">
    <div class="col-md-5 col-md-offset-1" style="margin-bottom:10px;">
      <div class="well-setting-v1">
        <img style="border-top: 3px solid #e87029;" src="https://preview.ibb.co/gYz2tA/clouds.jpg" class="img-fluid img-responsive" alt="Responsive image">
        <div style="border:1px solid #f1f1f1; padding:10px;">
          <div class="wpb_wrapper">
            <div class="dt-sc-title" style="display: table;float: none;">
              <h2 style="float: left; margin-right:5px;">Matt Foster </h2>
              <h2 style="float: left; color:#f28b3c; display:block;"> | Chairman</h2>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-5 " style="margin-bottom:10px;">
      <div class="well-setting-v1">
        <img style="border-top: 3px solid #e87029;" src="https://preview.ibb.co/gYz2tA/clouds.jpg" class="img-fluid img-responsive" alt="Responsive image">
        <div style="border:1px solid #f1f1f1; padding:10px;">
          <div class="wpb_wrapper">
            <div class="dt-sc-title" style="display: table;float: none;">
              <h2 style="float: left; margin-right:5px;">ED KOMZELMAN </h2>
              <h2 style="float: left; color:#f28b3c; display:none;"> | </h2>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since
                the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
                in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing
                and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
                Aldus PageMaker including versions of Lorem Ipsum.</p>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-5 col-md-offset-1" style="margin-bottom:10px;">
      <div class="well-setting-v1">
        <img style="border-top: 3px solid #e87029;" src="https://preview.ibb.co/gYz2tA/clouds.jpg" class="img-fluid img-responsive" alt="Responsive image">
        <div style="border:1px solid #f1f1f1; padding:10px;">
          <div class="wpb_wrapper">
            <div class="dt-sc-title" style="display: table;float: none;">
              <h2 style="float: left; margin-right:5px;">Micheal S Frank </h2>
              <h2 style="float: left; color:#f28b3c; display:block;"> | Director</h2>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I would really appreciate if someone kindly guide me about this. Thank you so much

https://stackoverflow.com/questions/27550094/how-to-create-the-masonry-effects-with-just-bootstrap-3-grid-system-and-css hope it helps — SpiRT, Oct 24 '18 at 17:26
You're required to show your code or markup on SO. Please [take the tour](https://stackoverflow.com/tour). — isherwood, Oct 24 '18 at 17:37
If the columns are display:flex they'll have the same height. There's no workaround. Use masonry or CSS columns. — Zim, Oct 24 '18 at 18:05

tao · Answer 1 · 2018-10-24T17:45:27.137

You seem to require the masonry script. It used to depend on jQuery, but now it actually works with vanilla JavaScript:

new Masonry( parentSelector, {
  itemSelector: childSelector
});

... where you replace parentSelector and childSelector with the appropriate selectors.

new Masonry('.ayaz', {
  itemSelector: '.col-md-5 '
});

.ayaz .col-md-5 {
  padding-bottom: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>

<div class="container-fluid">
  <div class="ayaz">
    <div class="col-md-5 col-md-offset-1" style="margin-bottom:10px;">
      <div class="well-setting-v1">
        <img style="border-top: 3px solid #e87029;" src="https://preview.ibb.co/gYz2tA/clouds.jpg" class="img-fluid img-responsive" alt="Responsive image">
        <div style="border:1px solid #f1f1f1; padding:10px;">
          <div class="wpb_wrapper">
            <div class="dt-sc-title" style="display: table;float: none;">
              <h2 style="float: left; margin-right:5px;">Matt Foster </h2>
              <h2 style="float: left; color:#f28b3c; display:block;"> | Chairman</h2>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-5 " style="margin-bottom:10px;">
      <div class="well-setting-v1">
        <img style="border-top: 3px solid #e87029;" src="https://preview.ibb.co/gYz2tA/clouds.jpg" class="img-fluid img-responsive" alt="Responsive image">
        <div style="border:1px solid #f1f1f1; padding:10px;">
          <div class="wpb_wrapper">
            <div class="dt-sc-title" style="display: table;float: none;">
              <h2 style="float: left; margin-right:5px;">ED KOMZELMAN </h2>
              <h2 style="float: left; color:#f28b3c; display:none;"> | </h2>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since
                the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
                in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing
                and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
                Aldus PageMaker including versions of Lorem Ipsum.</p>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-5 col-md-offset-1" style="margin-bottom:10px;">
      <div class="well-setting-v1">
        <img style="border-top: 3px solid #e87029;" src="https://preview.ibb.co/gYz2tA/clouds.jpg" class="img-fluid img-responsive" alt="Responsive image">
        <div style="border:1px solid #f1f1f1; padding:10px;">
          <div class="wpb_wrapper">
            <div class="dt-sc-title" style="display: table;float: none;">
              <h2 style="float: left; margin-right:5px;">Micheal S Frank </h2>
              <h2 style="float: left; color:#f28b3c; display:block;"> | Director</h2>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

It is kind of working but now after adding your script it is overlapping on menu and slider — Script Lover, Oct 24 '18 at 17:47
@ScriptLover, wrap your markup (html) inside `
***your HTML here ***
` and it will work. And, btw, if you're using a WP theme you really don't need Bootstrap. You can use the theme's layout system. Also, I'm pretty sure WPBakery plugin already includes masonry, so you only need to enqueue it. — tao, Oct 24 '18 at 18:11
Sure it almost fixed I used clear fix actually. The only thing is reaming is margin bottom which is not working after applying position absolute — Script Lover, Oct 24 '18 at 18:12
@ScriptLover `.ayaz-container-fluid { padding-bottom: 50px;}`...!? — tao, Oct 24 '18 at 18:14

score 0 · Answer 2 · answered Oct 24 '18 at 17:46

The full answer:

What you are looking for is some kind of masonry type of grid.

You can use 3rd party modules as masonry by desandro masonry.desandro.com there are many plugins for bootstrap3.

Other approach is to rethink your content structure to avoid blank space.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="container-fluid">

  <div class="row">

    <div class="col-6">
        <div class="card">
          some content 1
        </div>
        <div class="card">
          some content 2
        </div>
    </div>

    <div class="col-6">
        <div class="card">
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
        </div>
        <div class="card">
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
        </div>
     </div>
  </div>

</div>

And how does your solution work when you want to change the number of columns from 3 to 2 and than 1 depending on screen size? The only way to do this without JavaScript is using CSS columns, but that makes items jump from the end of one column to the beginning of the next on `window.resize` and you completely lose track of items in long lists. Which is why masonry, the Pinterest script or bootstrap.waterfall are popular. — tao, Oct 24 '18 at 17:52

How can I make bootstrap 3 columns flex which has different height?

2 Answers2