Contoh Grid Bootstrap 5
- Halaman Sebelumnya Grid BS5 XXL
- Halaman Berikutnya Templat Dasar BS5
Di sini kami mengumpulkan beberapa contoh tata letak grid Bootstrap 5.
Tiga kolom yang sama
Gunakan di atas jumlah elemen yang ditentukan .col Kelas, Bootstrap akan mengenali berapa banyak elemen (dan menciptakan kolom yang sama lebar). Dalam contoh di bawah ini, kami menggunakan tiga elemen col, setiap elemen memiliki lebar 33.33%.
Contoh
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Tiga kolom yang sama menggunakan angka
Anda juga dapat menggunakan angka untuk mengendalikan lebar kolom. Pastikan bahwa totalnya sama atau kurang dari 12 (tidak perlu menggunakan semua 12 kolom yang tersedia):
Contoh
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
Tiga kolom yang berbeda
Untuk menciptakan kolom yang berbeda, Anda harus menggunakan angka. Contoh di bawah ini akan menciptakan pemisahan 25%/50%/25%:
Contoh
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
Setel lebar satu kolom
Namun, hanya mengatur lebar satu kolom sudah cukup, dan biarkan kolom saudara mengatur ukurannya secara otomatis. Contoh di bawah ini akan menciptakan pemisahan 25%/50%/25%:
Contoh
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
Lebih banyak kolom yang sama
Contoh
<!-- Dua kolom yang sama --> <div class="row"> <div class="col">1 dari 2</div> <div class="col">2 dari 2</div> </div> <!-- Empat kolom yang sama --> <div class="row"> <div class="col">1 dari 4</div> <div class="col">2 dari 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <!-- Enam kolom yang sama --> <div class="row"> <div class="col">1 dari 6</div> <div class="col">2 dari 6</div> <div class="col">3 dari 6</div> <div class="col">4 dari 6</div> <div class="col">5 dari 6</div> <div class="col">6 dari 6</div> </div>
Row Cols
Anda juga dapat menggunakan .row-cols-* Kelas kontrol harus muncul di kolom yang berdekatan (tidak peduli berapa banyak kolom):
Contoh
<div class="row row-cols-1"> <div class="col">1 dari 2</div> <div class="col">2 dari 2</div> </div> <div class="row row-cols-2"> <div class="col">1 dari 4</div> <div class="col">2 dari 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <div class="row row-cols-3"> <div class="col">1 dari 6</div> <div class="col">2 dari 6</div> <div class="col">3 dari 6</div> <div class="col">4 dari 6</div> <div class="col">5 dari 6</div> <div class="col">6 dari 6</div> </div>
Lebih banyak kolom yang berbeda
Contoh
<!-- Dua kolom yang berbeda --> <div class="row"> <div class="col-8">1 dari 2</div> <div class="col-4">2 dari 2</div> </div> <!-- Four unequal columns --> <div class="row"> <div class="col-2">1 of 4</div> <div class="col-2">2 of 4</div> <div class="col-2">3 of 4</div> <div class="col-6">4 of 4</div> </div> <!-- Setting two column widths --> <div class="row"> <div class="col-4">1 of 4</div> <div class="col-6">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
Sama tinggi
Jika satu kolom lebih tinggi daripada yang lain (disebabkan teks atau tinggi CSS), sisanya akan mengikuti:
Contoh
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
Kolom yang disamping
Berikut adalah contoh bagaimana cara membuat tata letak kolom dua, di mana ada dua kolom lain di dalam satu kolom:
Contoh
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Kelas tanggap
Sistem grid Bootstrap 5 memiliki lima kelas:
.col-(Perangkat kecil ekstra - lebar layar kurang dari 576px).col-sm-(Perangkat kecil - lebar layar sama dengan atau lebih besar dari 576px).col-md-(Perangkat menengah - lebar layar sama dengan atau lebih besar dari 768 pixel).col-lg-(Perangkat besar - lebar layar sama dengan atau lebih besar dari 992 pixel).col-xl-(Perangkat xlarge - lebar layar sama dengan atau lebih besar dari 1200px).col-xxl-(Perangkat xxlarge - lebar layar sama dengan atau lebih besar dari 1400px)
Kelas di atas dapat digabungkan untuk membuat tata letak yang lebih dinamis dan fleksibel.
Petunjuk:Setiap kelas diukur proporsional, jadi jika Anda ingin untuk sm dan md Jika mengatur lebar yang sama, cukup menentukan sm。
Tumpang tindih ke horizontal
Berikut adalah contoh bagaimana cara membuat tata letak kolom, tata letak ini awalnya terkunci di perangkat kecil, lalu menjadi tata letak horizontal di perangkat yang lebih besar (sm, md, lg, dan xl):
Contoh
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
Mix dan Match
Contoh
<!-- Dibagi 50%/50% di perangkat ekstra, 75%/25% di perangkat besar --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- Dibagi 58%/42% di perangkat ekstra, kecil, menengah, 66.3%/33.3% di perangkat besar dan super besar --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- Dibagi 25%/75% di perangkat kecil, 50%/50% di perangkat menengah, 33%/66% di perangkat besar dan super besar. Secara otomatis disusun (100%) di perangkat kecil ekstra --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
tanpa gutter
Untuk mengubah jarak antar kolom (ruang ekstra), gunakan apapun .g-1|2|3|4|5 Kelas (.g-4 adalah nilai default).
Untuk menghapus seluruh bantalan (gutter), gunakan .g-0：
Contoh
<div class="row g-0">
- Halaman Sebelumnya Grid BS5 XXL
- Halaman Berikutnya Templat Dasar BS5
