grid system bootstrap

Memahami Grid System Bootstrap 4

Memahami Grid System Bootstrap 4 – Salah satu hal terpenting saat mempelajari framework bootstrap terlebih lagi jika ingin membuat sebuah halaman web adalah memahami kerangka dasarnya. Di dalam framework  bootstrap sudah disediakan grid system yang semakin mempermudah untuk membuat kerangka dasar sebuah halaman web.

Lalu apa itu grid system?

Grid system adalah sebuah komponen yang sudah disediakan bootstrap untuk membuat layout halaman web. Jika dulu kita menggunakan tabel untuk menempatkan posisi masing-masing element web, sekarang kita menggunakan grid system untuk melakukan hal demikian.

Grid system bootstrap terdiri dari beberapa class yaitu exstra small, small, medium, large, dan extra large :

.col : untuk device < 576px

.col-sm-* : untuk device >= 576px

.col-md-* : untuk device >= 768px

.col-lg-* : untuk device >= 992px

.col-xl-* : untuk device >= 1200px

 

Untuk membuat grid system dimulai dengan membuat sebuah baris / row ( .row ) baru. Setiap row terdiri dari 12 col (col 1 sampai col 12) . Perhatikan contoh berikut:

 

grid system bootstrap

 

Baca Juga : Cara Menggunakan Framework Bootstrap

 

Setiap row dapat diisi maksimal dengan 12 col dengan ukuran extra small, small, large, maupun extra large. Pemahaman mengenai grid system ini sangat berguna dalam pembuatan sebuah halaman web. Apalagi sekarang banyak pengguna mobile yang tidak langsung menuntut agar halaman web menjadi responsive.

Contoh penerapan :

layout grid system

 

Penggunaan grid system dapat disesuaikan dengan kebutuhan. Menggunakan grid system dapat menghemat waktu dalam pengerjaan sebuah halaman website, apalagi grid system bootstrap sudah mendukung penuh web responsive.

Sekian untuk tutorial kali ini, nantikan tutorial-tutorial bootstrap selanjutnya hanya di ngodeinweb.com.

Leave a Reply

Your email address will not be published. Required fields are marked *