0

No clue how to name this, honestly. So I'll just give you an image.

I need to make my columns to look like this:

enter image description here

To make the second row stick to the first one. Is that even possible with Bootstrap 4? I can't seem to find anything about this in the documentation.

Here's my code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <img class="card-img-top" src="http://placehold.it/350x150" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div> <!-- /.col-md-4 -->
    <div class="col-md-4">
      <div class="card">
        <img class="card-img-top" src="http://placehold.it/350x150" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title">Card title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div> <!-- /.col-md-4 -->
    <div class="col-md-4">
      <div class="card">
        <img class="card-img-top" src="http://placehold.it/350x150" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div> <!-- /.col-md-4 -->
    <div class="col-md-4">
      <div class="card">
        <img class="card-img-top" src="http://placehold.it/350x150" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div> <!-- /.col-md-4 -->
    <div class="col-md-4">
      <div class="card">
        <img class="card-img-top" src="http://placehold.it/350x150" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div> <!-- /.col-md-4 -->
    <div class="col-md-4">
      <div class="card">
        <img class="card-img-top" src="http://placehold.it/350x150" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div> <!-- /.col-md-4 -->
  </div> <!-- /.row -->
</div>
Retros
  • 3,511
  • 10
  • 40
  • 60
  • Flexbox doesn't give you a "masonry" layout so this works the [same as 3.x](http://stackoverflow.com/questions/19244268/bootstrap-fluid-grid-system-with-different-height/19244925#19244925) although now [card columns](https://v4-alpha.getbootstrap.com/components/card/#card-columns) are available in 4.x . – Carol Skelly May 12 '17 at 15:35
  • Thank you, Zim! This helped a lot! – Retros May 12 '17 at 16:18

0 Answers0