Cara Membuat 5 Kolom Sama Rata pada Bootstrap

23/02/2017    Maykhel David    5345     Website

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

Cara Membuat 5 Kolom Sama Rata pada Bootstrap

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.

Cara Membuat 5 Kolom Sama Rata 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

 

 

Tips dan Trik, Bootstrap

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