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

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

 

 

23 Februari 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat