Grid: Perangkat Super Besar

Contoh grid perangkat ekstra besar

XSmall Small Medium Large Extra Large XXL
Awalan kelas .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Lebar layar <576px >=576px >=768px >=992px >=1200px >=1400px

Dalam bab sebelumnya, kami menunjukkan sebuah contoh grid yang sesuai untuk perangkat kecil, menengah, dan besar. Kita menggunakan dua div (kolom), dan melakukan pemisahan 25%/75% di perangkat kecil, 50%/50% di perangkat menengah, dan 33%/66% di perangkat besar:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

Tetapi di perangkat xlarge, desain pemisahan 20%/80% mungkin lebih baik.

Perangkat ekstra besar didefinisikan sebagai lebar layar 1200 pixel dan di atas.

Untuk perangkat xlarge, kami akan menggunakan .col-xl-* Kelas:

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

Contoh di bawah ini akan membagi 25%/75% di perangkat kecil, 50%/50% di perangkat menengah, 33%/66% di perangkat besar, serta membagi 20%/80% di perangkat xlarge dan xxlarge. Pada perangkat kecil, ini akan secara otomatis dihampar (100%):

Contoh

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>World Wide Fund for Nature (WWF), didirikan tanggal 29 April 1961, lambangnya adalah panda ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>1980, WWF resmi datang ke Cina, diundang pemerintah Cina untuk melaksanakan pekerjaan perlindungan panda dan habitatnya ...</p>
    </div>
  </div>
</div>

Coba Sendiri

Perhatian:Pastikan bahwa total selalu 12.

Hanya menggunakan XLarge

Dalam contoh di bawah ini, kami hanya menentukan .col-xl-6 kelas (tanpa .col-lg-*,.col-md-* dan/atau .col-sm-*）。Ini berarti perangkat xlarge dan xxlarge akan dibagi 50/50%. Namun, untuk perangkat besar, menengah, kecil, dan super kecil, itu akan ditempatkan secara vertikal (lebar 100%):

Contoh

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>World Wide Fund for Nature (WWF), didirikan tanggal 29 April 1961, lambangnya adalah panda ...</p>
    </div>
    <div class="col-xl-6">
      <p>1980, WWF resmi datang ke Cina, diundang pemerintah Cina untuk melaksanakan pekerjaan perlindungan panda dan habitatnya ...</p>
    </div>
  </div>
</div>

Coba Sendiri

Layout kolom otomatis

Dalam Bootstrap 5, ada cara yang mudah untuk membuat kolom yang sama lebar untuk semua perangkat: hanya perlu dari .col-xl-* Hapus angka di dalamnya, dan hanya gunakan di elemen col .col-xl Kelas. Bootstrap akan mengenali berapa banyak kolom, dan setiap kolom akan mendapatkan lebar yang sama.

Jika ukuran layarKecil dari 1200px, kolom akan diapung secara horisontal:

<!-- Dua kolom: di perangkat super besar adalah lebar 50% -->
<div class="row">
  <div class="col-xl">1 dari 2</div>
  <div class="col-xl">2 dari 2</div>
</div>
<!-- Empat kolom: di perangkat super besar adalah lebar 25% -->
<div class="row">
  <div class="col-xl">1 dari 4</div>
  <div class="col-xl">2 dari 4</div>
  <div class="col-xl">3 dari 4</div>
  <div class="col-xl">4 dari 4</div>
</div>

Coba Sendiri