1

i've created a collection of cards with bootstrap. As the cards have different height(based on the different text length), I want the cards to fill/placed on the empty spaces available. I'm not sure how to do it using bootstrap grid system. Thanks in advance.

Image card

Code

 <div class="row justify-content-center">
    @foreach($advices as $key=>$advices)
        <div class="col-md-3">
            <div class="card p-2 mt-3">
                <div class="m-0 p-0 card-body">
                    <p class="mb-0">{{$advices->advice}}</p>
                    <small class="text-muted">
                    <cite class="float-right">~ {{$advices->alias}}</cite>
                    </small>
                </div>
            </div>
        </div>
    @endforeach
</div>
HelloWorld1014
  • 155
  • 1
  • 8
  • try this: https://mdbootstrap.com/docs/jquery/layout/bootstrap-masonry/ – Cornel Raiu Oct 10 '19 at 08:11
  • or this: https://codepen.io/artursden/pen/dRWeBw – Cornel Raiu Oct 10 '19 at 08:12
  • you can group the items in columns by default width `display: flex; flex-direction: column` and then the 4 columns in a standard row. It is a bit hacky but some do it: https://stackoverflow.com/questions/27550094/how-to-create-the-masonry-effects-with-just-bootstrap-3-grid-system-and-css – Cornel Raiu Oct 10 '19 at 08:16

1 Answers1

1

Bootstrap has document and tutorial for this case on their page. Please check it.

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

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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">
        <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 class="card-img" src=".../100px260/" alt="Card image">
  </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>
Hải Bùi
  • 944
  • 5
  • 13