Bootstrap Grid Basic

♠ Posted by Unknown at 06.33

Bootstrap Grid Basic

System Bootstrap Grid
Sistem grid bootstrap memungkinkan hingga 12 kolom di halaman. Jika Anda tidak ingin menggunakan semua 12 kolom secara individual, Anda dapat kelompok kolom bersama-sama untuk membuat kolom yang lebih luas:

Sistem grid bootstrap adalah responsif, dan kolom akan mengatur ulang secara otomatis, tergantung pada ukuran layar.

Grid Classes (Kelas Grid)

Sistem Bootstrap jaringan memiliki empat kelas:

xs (untuk ponsel)
sm (untuk tablet)
hd (untuk desktop)
lg (untuk desktop yang lebih besar)

Kelas-kelas di atas dapat dikombinasikan untuk membuat layout lebih dinamis dan fleksibel.

Struktur dasar dari Bootstrap Grid
Berikut ini adalah struktur dasar dari grid Bootstrap:

Pertama; membuat baris (<div class = "row">). Kemudian, tambahkan jumlah yang diinginkan dari kolom (tag dengan .col tepat - * - * kelas). Perhatikan bahwa angka dalam .col - * - * harus selalu menambahkan hingga 12 untuk setiap baris.

Di bawah ini kami telah mengumpulkan beberapa contoh layout Bootstrap jaringan dasar.

Three Equal Columns (Tiga Kolom Sama)

Contoh berikut menunjukkan bagaimana untuk mendapatkan tiga kolom yang sama-lebar tablet dan skala untuk desktop besar. Pada ponsel, kolom secara otomatis akan menumpuk: