Нестандартные сетки Bootstrap 4

169

16 января 2019, 14:10

Я начала разбираться в Bootstrap. Не могу понять как с помощью него можно создавать не обычные сетки. Например чтобы блоки занимали не только разную ширину, но и разную высоту.

Вот пример сетки, который легко можно сделать с помощью CSS Grid, но я не понимаю как вот такое можно сделать на бутстрапе, чтобы оно легко адаптивно изменялось согласно макетам.

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
<div class="card-columns"> 
  <div class="card"> 
    <img class="card-img-top" src="..." 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="..." 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 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"> 
    <img class="card-img" src="..." 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 a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> 
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
    </div> 
  </div> 
</div>