Membuat Masonry Layout dengan Bootstrap 4

11/09/2017    Maykhel David    171     Website

Peningkatan versi bootstrap dari bootstrap 3 menuju bootstrap 4 mengalami banyak sekali penambahan fitur yang tentunya sangat berguna ketika kita akan membangun sebuah website responsive. Dengan bootstrap 4 kita bisa menggunakan banyak hal seperti menggunakan system grid terbaru, tab content, collapsible content dan masih banyak yang lainnya.

Fitur unik terbaru yang ada pada bootstrap 4 adalah memungkinkan kita membuat layout masonry dengan template card, sebelumnya saya sudah pernah memberikan sebuah artikel yang berjudul cara membuat template card menggunakan bootstrap 4. Pada artikel ini kita akan memanfaatkan fitur terbaru yang ada di bootstrap 4, yaitu cara membuat layout masonry dengan bootstrap 4

Sebelumnya ada yang tahu apa itu layout masonry? Layout Masonry adalah layout grid bertumpuk yang membuat sistem grid dengan tinggi setiap konten berbeda namun tetap rapi tanpa menisakan celah yang janggal pada setiap gridnya.

Berikut adalah contoh struktur layout masonry menggunakan card pada bootstrap 4

 

Kita buat dengan struktur HTML seperti ini

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <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">
      <h4 class="card-title">Card title</h4>
      <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 p-3 text-center">
    <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">
      <h4 class="card-title">Card title</h4>
      <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">
      <h4 class="card-title">Card title</h4>
      <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>

Dari script diatas, kita memiliki beberapa class .cart, dimana keseluruhan class cart tersebut dibungkus dengan div class .cart-columns maka secara otomatis akan menjadi layout masonry. Baiklah teman-teman demikian artikel kali ini yang membahas tentang cara membuat layout masonry dengan bootstrap 4. Semoga bermanfaat

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More