Grid Bootstrap 5

Sistem Grid Bootstrap 5

Sistem grid Bootstrap dibangun dengan flexbox, halaman dapat mengizinkan maksimal 12 kolom.

Jika anda tidak ingin menggunakan semua 12 kolom secara terpisah, anda dapat menggabungkan kolom ini untuk menciptakan kolom yang lebar:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

Sistem grid berresponsif dengan cepat, kolom akan diatur ulang otomatis berdasarkan ukuran layar.

Pastikan totalnya setara atau kurang dari 12 (jika tidak memerlukan semua 12 kolom yang tersedia).

Kelas grid

Sistem grid Bootstrap 5 memiliki enam kelas:

  • .col- (perangkat ekstra kecil - lebar layar kurang dari 576px)
  • .col-sm- (perangkat kecil - lebar layar setara atau lebih besar dari 576px)
  • .col-md- (perangkat menengah - lebar layar setara atau lebih besar dari 768 paksi)
  • .col-lg- (perangkat besar - lebar layar setara atau lebih besar dari 992 paksi)
  • .col-xl- (perangkat xlarge - lebar layar setara atau lebih besar dari 1200px)
  • .col-xxl- (perangkat xxlarge - lebar layar setara atau lebih besar dari 1400px)

Anda dapat menggabungkan kelas di atas untuk menciptakan layout yang lebih dinamis dan fleksibel.

Tip:Setiap kelas diukur proporsional, jadi jika anda ingin sm dan md Untuk menetapkan lebar yang sama, anda hanya perlu menentukan sm。

Struktur dasar grid Bootstrap 5

Berikut adalah struktur dasar grid Bootstrap 5:

<!-- Control column width and their display on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap handle the layout automatically -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

First example: Create a row (<div class="row">). Then, add the required number of columns (with appropriate .col-*-* class label). The first asterisk (*) represents responsiveness: sm, md, lg, xl, or xxl, and the second asterisk represents the number, which should add up to 12 per row.

Second example: Not for each col Add a number instead of letting bootstrap handle the layout to create equal-width columns: two "col" Element = Each col is 50% width, and three cols = Each col is 33.33% width. Four columns = 25% width, etc. You can also use .col-sm|md|lg|xl|xxl Make the columns responsive.

Below we have compiled some basic examples of Bootstrap 5 grid layouts.

Three Equal Columns

The following example shows how to create three equal-width columns on all devices and screen widths:

Example

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Try it yourself

Responsive Columns

The following example shows how to create four equal-width columns starting from a tablet and then expand to extra-large desktops.On mobiles or screens with a width less than 576px, the columns will automatically stack together:

Example

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

Try it yourself

Two Unequal Responsive Columns

The following example shows how to get two columns of different widths on a tablet and expand to extra-large desktops:

Example

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Try it yourself

Tip:You will learn about it later in this tutorial Grid System . More content.