Program Auto Layout Equal-Width dalam Bootstrap

Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membuat Program Auto Layout Equal-Width dalam Bootstrap.

Sumber : Getbootstrap.com

Sebagai contoh, berikut adalah dua tata letak grid yang berlaku untuk setiap perangkat dan viewport, mulai dari xs hingga xl. Tambahkan sejumlah kelas tanpa unit untuk setiap breakpoint yang Anda butuhkan, dan setiap kolom akan memiliki lebar yang sama.

<div class="container">
  <div class="row">
    <div class="col">1 of 2</div>
    <div class="col">2 of 2</div>
  </div>
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col">2 of 3</div>
    <div class="col">3 of 3</div>
  </div>
</div>

Hasil :

Kolom dengan lebar yang sama dapat dibagi menjadi beberapa baris, tetapi ada bug flexbox di Safari yang mencegah ini berfungsi tanpa flex-basis atau border yang eksplisit. Ada solusi alternatif untuk versi browser yang lebih lama, tetapi seharusnya tidak diperlukan jika Anda terus memperbarui.

<div class="container">
  <div class="row">
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
    <div class="w-100"></div>
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
  </div>
</div>

Hasil :

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

Terima Kasih 😀😊😘👌👍 :)