Bootstrap Grid - Perangkat Sedang

Contoh Grid Bootstrap: Perangkat Sedang

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

Tetapi pada perangkat menengah, desainnya mungkin lebih baik sebagai pembagian 50%/50%.

Tip: Perangkat menengah didefinisikan memiliki lebar layar dari 992 piksel hingga 1199 piksel .

Untuk perangkat menengah kita akan menggunakan .col-md-*kelas.

Sekarang kita akan menambahkan lebar kolom untuk perangkat sedang:

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".

Contoh berikut akan menghasilkan pembagian 25%/75% pada perangkat kecil dan pembagian 50%/50% pada perangkat sedang (dan besar). Pada perangkat ekstra kecil, itu akan secara otomatis menumpuk (100%):

Hanya Menggunakan Media

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

Bab berikutnya menunjukkan cara menambahkan persentase split yang berbeda untuk perangkat besar.