Cara Membuat 5 Kolom Sama Rata pada Bootstrap

Hallo teman-teman, pada kesempatan kali ini saya akan memberikan sebuah trik tentang bootstrap. Pada saat kalian membuat kolom apakah pernah terpikirkan untuk membuat 5 kolom pada Bootstrap? Jika ya berarti itulah alas an mengapa kalian membaca artikel ini.

Seperti yang kita ketahui bahwa bootstrap memiliki struktur kolom yang sudah dibuat dengan 12 grid untuk satu baris.  Tengan begitu tentu saja kita tidak bisa menggunakan class grid bootstrap tersebut untuk membuat 5 kolom yang memiliki lebar yang sama.

Berikut ini adalah solusi untuk kalian agar bisa membuat 5 kolom yang memiliki lebar sama rata.

Seperti biasa kita akan membuat sebuah struktur html yang sama seperti bootstrap pada umumnya

Pada gambar diatas saya membuat kolom biasa menggunakan class .col-xs-6 sebagai class utama dengan tambahan .col-sm-1-5 dan .col-lg-2-5 .

Pada kasus kali ini kita akan membuat custom responsive layout untuk ditambahkan sebagai class kolom baru.

Disini kita membuat 5 grid tambahan dengan menggunakan css baru dan membaginya sesuai batas breakpoint pada bootstrap.

Dengan begitu kita bisa menggunakan class tersebut sama seperti class bootstrap pada umumnya, dengan syarat harus bersamaan dengan salah satu class kolom yang ada pada bootstrap.

Untuk lebih lengkapnya bisa kalian lihat contoh demo di bawah ini