Program Column Breaks Alignment dalam Bootstrap

Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membuat Column Breaks Alignment dalam Bootstrap.

Sumber : Getbootstrap.com

Memecah kolom menjadi baris baru di flexbox memerlukan sedikit peretasan: tambahkan elemen dengan width: 100% di mana pun Anda ingin menggabungkan kolom ke baris baru. Biasanya hal ini dilakukan dengan beberapa .row, namun tidak semua metode implementasi dapat menjelaskan hal ini.

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

Hasil :

Anda juga dapat menerapkan jeda ini pada titik henti sementara tertentu dengan utilitas tampilan responsif kami.

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

Hasil :

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)