Bootstrap Grid - Perangkat Besar

Contoh Grid Bootstrap: Perangkat Besar

Pada bab sebelumnya, kami menyajikan contoh grid dengan kelas untuk perangkat kecil dan menengah. Kami menggunakan dua div (kolom) dan kami memberi mereka pembagian 25%/75% pada perangkat kecil, dan pembagian 50%/50% pada perangkat sedang:

Tetapi pada perangkat besar, desainnya mungkin lebih baik dengan pembagian 33%/66%.

Tip: Perangkat besar didefinisikan memiliki lebar layar dari 1200 piksel ke atas .

Untuk perangkat besar kami akan menggunakan .col-lg-*kelas.

Jadi sekarang kita akan menambahkan lebar kolom untuk perangkat besar:

Sekarang Bootstrap akan mengatakan "pada ukuran kecil, lihat kelas dengan -sm- di dalamnya dan gunakan itu. Pada ukuran sedang, lihat kelas dengan -md- di dalamnya dan gunakan itu. Pada ukuran besar, lihat kelas dengan kata -lg- di dalamnya dan gunakan itu".

Contoh berikut akan menghasilkan pembagian 25%/75% pada perangkat kecil, pembagian 50%/50% pada perangkat sedang, dan pembagian 33%/66% pada perangkat besar:

Menggunakan Hanya Besar

Pada contoh di bawah ini, kami hanya menentukan .col-lg-6kelas (tanpa .col-md-*dan/atau .col-sm-*). Ini berarti bahwa perangkat besar akan membagi 50%/50%. Namun, untuk perangkat sedang DAN kecil, itu akan ditumpuk secara vertikal (lebar 100%):