How to avoid bootstrap 4 to set same height all columns?

Question

Im getting from a loop some text that i'm formating on a lists inside columns, I'm trying to float all my columns one behind other without any space but bootstrap put same height for all, here is an example, this is what it does:

and this is what I want to achieve:

Is there any way to just put one column behind other respecting the height of each?

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <style type="text/css">
    .ul-header {
      font-weight: 800;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-4">
        <ul>
          <li class="ul-header">Header</li>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
        </ul>
      </div>
      <div class="col-4">
        <ul>
          <li class="ul-header">Header</li>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
      <div class="col-4">
        <ul>
          <li class="ul-header">Header</li>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
      <div class="col-4">
        <ul>
          <li class="ul-header">Header</li>
          <li>1</li>
        </ul>
      </div>
      <div class="col-4">
        <ul>
          <li class="ul-header">Header</li>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
      <div class="col-4">
        <ul>
          <li class="ul-header">Header</li>
          <li>1</li>
          <li>2</li>
        </ul>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

What you are looking for is a 'masonry' grid. There are plenty of questions asked on SO about this (also using Bootstrap). — Luuk Skeur, Oct 17 '19 at 08:29

score 1 · Accepted Answer · answered Oct 17 '19 at 07:57

There is a way to do this using cards. Take a look at this

It will look like this

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="card-columns">
  <div class="card">
    <img src="http://placekitten.com/50/50" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img  src="http://placekitten.com/50/50" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img  src="http://placekitten.com/50/50" class="card-img-top" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

This is the only way using Bootstrap. a 'masonry' grid isn't customizable in BS4 and a javascript solution has to be made. Also see: https://stackoverflow.com/questions/34480760/is-it-possible-for-flex-items-to-align-tightly-to-the-items-above-them — Luuk Skeur, Oct 17 '19 at 08:28
thanks that's exactly what I was looking for and also its nice to learn that this is called masonry grid — Cristian, Oct 17 '19 at 09:17

score 0 · Answer 2 · answered Oct 17 '19 at 07:26

Since your not specifying a breaking point in your columns for staking, you can merge the bottom row into the top row to get your desired result:

.ul-header {
  font-weight: 800;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-4">
      <ul>
        <li class="ul-header">Header</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>

      <ul>
        <li class="ul-header">Header</li>
        <li>1</li>
      </ul>
    </div>
    <div class="col-4">
      <ul>
        <li class="ul-header">Header</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>

      <ul>
        <li class="ul-header">Header</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
    <div class="col-4">
      <ul>
        <li class="ul-header">Header</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
      <ul>
        <li class="ul-header">Header</li>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

can't use this since each ul comes from a loop and I don't know how many would be — Cristian, Oct 17 '19 at 07:31

score 0 · Answer 3 · answered Oct 17 '19 at 08:31

Try this:

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

<div class="row">
  <div class="col-4">
    <ul>
      <li class="ul-header">Header</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>

    <ul>
      <li class="ul-header">Header</li>
      <li>1</li>
    </ul>
  </div>
  <div class="col-4">
    <ul>
      <li class="ul-header">Header</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

    <ul>
      <li class="ul-header">Header</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <div class="col-4">
    <ul>
      <li class="ul-header">Header</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <ul>
      <li class="ul-header">Header</li>
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</div>

How to avoid bootstrap 4 to set same height all columns?

3 Answers3