HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Contoh Bootstrap 4 Grid

❮ Sebelumnya Berikutnya ❯

Di bawah ini kami telah mengumpulkan beberapa contoh tata letak kotak Bootstrap 4.

Tiga Kolom Sama

Gunakan .colkelas pada sejumlah elemen tertentu dan Bootstrap akan mengenali berapa banyak elemen yang ada (dan membuat kolom dengan lebar yang sama). Pada contoh di bawah, kami menggunakan tiga elemen col, yang masing-masing mendapat lebar 33,33%.

col
col
col

Contoh

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

Tiga Kolom Sama Menggunakan Angka

Anda juga dapat menggunakan angka untuk mengontrol lebar kolom. Pastikan saja jumlahnya bertambah hingga 12 atau kurang (Anda tidak perlu menggunakan semua 12 kolom yang tersedia):

col-4
col-4
col-4

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 tidak sama

Untuk membuat kolom yang tidak sama, Anda harus menggunakan angka. Contoh berikut akan membuat pembagian 25%/50%/25%:

col-3
kolom-6
col-3

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>

Mengatur Lebar Satu Kolom

Namun, itu cukup untuk hanya mengatur lebar satu kolom, dan kolom saudara secara otomatis mengubah ukuran di sekitarnya. Contoh berikut akan membuat pembagian 25%/50%/25%:

col
kolom-6
col

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 Setara

1 dari 2
2 dari 2
1 dari 4
2 dari 4
3 dari 4
4 dari 4
1 dari 6
2 dari 6
3 dari 6
4 dari 6
5 dari 6
6 dari 6

Contoh

<!-- Two equal columns -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four equal columns -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<!-- Six equal columns -->
<div class="row">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Baris Cols

Anda juga dapat mengontrol berapa banyak kolom yang harus muncul bersebelahan (terlepas dari berapa banyak kolom), dengan .row-cols-*kelas:

1 dari 2
2 dari 2
1 dari 4
2 dari 4
3 dari 4
4 dari 4
1 dari 6
2 dari 6
3 dari 6
4 dari 6
5 dari 6
6 dari 6

Contoh

<div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 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 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Lebih Banyak Kolom Tidak Setara

1 dari 2
2 dari 2
1 dari 4
2 dari 4
3 dari 4
4 dari 4
1 dari 4
2 dari 4
3 dari 4
4 dari 4

Contoh

<!-- Two Unequal Columns -->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 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>

Tinggi sama

Jika salah satu kolom lebih tinggi dari yang lain (karena tinggi teks atau CSS), sisanya akan mengikuti:

Banyak rasa sakit sangat penting, tidak ada perbedaan dalam makanan dan indera. Dan rasa sakit yang saya dapat akhir pekan itu. Tidak ada iriure buruk yang mengambilnya, dan zril flat atau semacamnya, mensubsidi salah satu dari kami yang pernah menonton sepak bola. Tidak ada rasa sakit kita yang harus dibaca oleh saya, itu harus membuatnya lendir Platon.
col
col

Contoh

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

Kolom Bersarang

col-8
kolom-6
kolom-6
col-4

Contoh berikut menunjukkan cara membuat tata letak dua kolom, dengan dua kolom lainnya di dalam salah 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 Responsif

Sistem grid Bootstrap 4 memiliki lima kelas:

  • .col- (perangkat ekstra kecil - lebar layar kurang dari 576px)
  • .col-sm- (perangkat kecil - lebar layar sama dengan atau lebih besar dari 576 piksel)
  • .col-md- (perangkat menengah - lebar layar sama dengan atau lebih besar dari 768px)
  • .col-lg- (perangkat besar - lebar layar sama dengan atau lebih besar dari 992px)
  • .col-xl- (perangkat xlarge - lebar layar sama dengan atau lebih besar dari 1200px)

Kelas-kelas di atas dapat digabungkan untuk membuat tata letak yang lebih dinamis dan fleksibel.

Tip: Setiap kelas ditingkatkan, jadi jika Anda ingin mengatur lebar yang sama untuk smdan md, Anda hanya perlu menentukan sm.

Ditumpuk ke Horizontal

col-sm-9
col-sm-3
col-sm
col-sm
col-sm

Contoh berikut menunjukkan cara membuat tata letak kolom yang mulai ditumpuk pada perangkat ekstra kecil, sebelum menjadi horizontal pada 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>

Campur dan Cocokkan

col-6 col-sm-9
col-6 col-sm-3
col-7 col-lg-8
col-5 col-lg-4
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8

Contoh

<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<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>

<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<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>

<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
<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>

Tidak Ada Talang

Tambahkan .no-gutterskelas ke .rowwadah untuk menghapus talang (ruang ekstra):

Rasa sakit itu sendiri penting, tetapi rasa sakit itu ditingkatkan oleh proses adipiscing, tetapi saya memberikan waktu untuk menguranginya sehingga saya melakukan beberapa pekerjaan dan rasa sakit yang hebat.
Agar sebagian besar, salah satu dari kita akan melakukan jenis pekerjaan apa pun kecuali untuk mengambil keuntungan dari tujuan dari itu.
Tetapi agar Anda dapat memahami dari mana setiap kesalahan lahir adalah kesenangan menuduh dan memuji rasa sakit, saya akan membuka seluruh masalah, dan akan menjelaskan hal-hal yang dikatakan oleh penemu kebenaran itu dan seolah-olah adalah arsiteknya. hidup yang diberkati.

Contoh

<div class="row no-gutters">

❮ Sebelumnya Berikutnya ❯