Menerapkan Kolom Auto pada Bootstrap 4

Sebagai framework HTML CSS dan Javascript, bootstrap adalah framework yang sangat popular dalam pembuatan desain website baik itu frontend maupun backend.  Perkembangan yang ada sekarang semakin membuat framework ini menjadi sangat powerful untuk digunakan.

Dalam peningkatan yang dilakukan developer pada bootstrap dalam system grid bootstrap 4 terdapat banyak perubahan seperti yang saya jelaskan pada artikel yang berjudul Sistem Grid Bootstrap 4 Terbaru.

Melanjutkan artikel sebelumnya tersebut saya akan membahas fitur unik yang ada di bootstrap 4 ini. Dimana saat ini kita akan mencoba menerapkan kolom otomatis, seperti namanya, yaitu kolom auto, maka pada kasus ini kita dipermudah dengan menbuat layout kolom tanpa mengatur nomor kolom seperti ini col-xs-8.

Kolom bootstrap 4 akan secara otomatis memberikan width yang sama rata sesuai jumlah kolom yang kita buat dan akan berlaku secara menyeluruh dari xs  sampai dengan xl misalnya kita kita akan buat layout seberti ini

Maka berikut ini adalah struktur HTML dan Class yang bisa kita gunakan:

<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>

Selain layout diatas, kita juga bisa menyisipkan beberapa kolom dengan ukuran berbeda

Kita bisa membuat layout tersebut dengan struktur HTML dan Class berikut.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Pada layout auto width diatas kita bisa menyisipkan breakpoint  seperti .col-md-auto yang berarti hanya akan  menjadi auto ketika berada pada device berukuran md untuk salah satunya demi membuat variasi konten saat dibuka di device lain.

Ada banyak sekali perubahan dan penambahan fitur unik seperti cara menerapkan kolom auto di artikel ini. Pada artikel selanjutnya kita akan bahas semua fitur terbaru satu per satu. Semoga bermanfaat.