Memahami dan Membuat Grid pada Bootstrap

Memahami dan Membuat Grid pada Bootstrap – Selamat datang di tutorial Bootstrap! Kali ini kita akan membahas cara membuat Grid untuk Layouting di Bootstrap. Pada tutorial sebelumya kita telah mempelajari tentang Bootstrap dan cara penggunaan nya. Pada kali ini dan beberapa artikel kedepan kita akan membahas lebih dalam tentang Bootstrap.

Baca juga: Pengertian dan Cara Menggunakan Bootstrap

Apa itu Grid?

Sistem grid memudahkan kita mengatur tata letak elemen di web. Kebanyakan orang dulu menggunakan tag table untuk mengatur tata letaknya. Semenjak ada Bootstrap, sekarang pengaturan tata letak tidak menggunakan cara seperti dulu lagi karena memang tidak SEO Friendy. Kita hanya perlu menggunakan 3 class untuk membuatnya. Berikut tiga class yang saya maksud,

• Class .container
• Class .row
• Class .col-

Apa Perbedaanya?

1. Class .container memiliki dua jenis, yaitu .container yang ukurannya tetap (fixed), dan .container-fluid yang ukurannya menyesuaikan browser
2. .Selanjutnya ada class .row, class ini sama seperti tag <tr>.
3. Class .col. Jika .row sama dengan tag <tr>, class .col sama seperti tag <td> dan memiliki beberapa jenis ukuran yaitu col-xs- (Extra Small), col-sm- (Small), col-md- (Medium), dan col-ld- (Large).

Memahami dan Membuat Grid pada Bootstrap

Sekarang mari kita coba konsep grid diatas dengan membuat kode HTML.
[html]

[/html]
Dan hasilnya akan menjadi:

Memahami Membuat Grid pada Bootstrap

Kita juga bisa memberi ukuran pada .col, lihat contoh berikut;
[html]

[/html]
Hasilnya akan menjadi seperti ini:

Memberi Ukuran pada .col

Perlu Diingat! dalam pembuatan website, element kontainer bebas digunakan berapa kali. Jadi kalian bisa memisahkan kontainer untuk membuat header, artikel dan footer.

Nah sampai sini dulu pembahasan tentang Memahami dan Membuat Grid pada Bootstrap. Jika masih kurang paham, jangan malu untuk bertanya, silahkan tinggalkan komentar.

Referensi: Petani Kode

Pada artikel selanjutnya kita akan memperlajari tentang Tipografi atau cara penulisan pada Bootstrap. Semoga bermanfaat dan sampai jumpa di artikel selanjutnya!

Bagi kalian yang bingung menggunakan class pada Bootstrap, saya sediakan list di arc.codelatte.id/bs-cheatsheet.