kolom

Pelajari cara memodifikasi kolom dengan beberapa opsi untuk penyelarasan, pengurutan, dan penyeimbangan berkat sistem kisi flexbox kami. Plus, lihat cara menggunakan kelas kolom untuk mengelola lebar elemen non-kisi.

Di halaman ini

Perhatian! Pastikan untuk membaca halaman Grid terlebih dahulu sebelum menyelami cara memodifikasi dan menyesuaikan kolom grid Anda.

Bagaimana mereka bekerja?

Kolom dibangun di atas arsitektur flexbox grid. Flexbox berarti kami memiliki opsi untuk mengubah kolom individual dan memodifikasi grup kolom pada tingkat baris . Anda memilih bagaimana kolom tumbuh, menyusut, atau berubah.
Saat membangun tata letak kisi, semua konten masuk dalam kolom. Hirarki kisi Bootstrap beralih dari wadah ke baris ke kolom ke konten Anda. Pada kesempatan yang jarang, Anda dapat menggabungkan konten dan kolom, tetapi perlu diketahui bahwa mungkin ada konsekuensi yang tidak diinginkan.
Bootstrap menyertakan kelas yang telah ditentukan sebelumnya untuk membuat tata letak yang cepat dan responsif. Dengan enam breakpoint dan selusin kolom di setiap tingkat kisi, kami memiliki lusinan kelas yang sudah dibuat untuk Anda membuat tata letak yang diinginkan. Ini dapat dinonaktifkan melalui Sass jika Anda mau.

Penyelarasan

Gunakan utilitas perataan flexbox untuk menyelaraskan kolom secara vertikal dan horizontal.

Perataan vertikal

Salah satu dari tiga kolom

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Salah satu dari tiga kolom

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Perataan horizontal

Salah satu dari dua kolom

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Pembungkus kolom

Jika lebih dari 12 kolom ditempatkan dalam satu baris, setiap kelompok kolom tambahan akan, sebagai satu unit, membungkus ke baris baru.

.col-9

.col-4
Sejak 9 + 4 = 13 > 12, div lebar 4-kolom ini dibungkus ke baris baru sebagai satu unit yang berdekatan.

.col-6
Kolom berikutnya berlanjut di sepanjang baris baru.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Istirahat kolom

Memutus kolom ke baris baru di flexbox memerlukan sedikit peretasan: tambahkan elemen di width: 100%mana pun Anda ingin membungkus kolom ke baris baru. Biasanya ini dilakukan dengan beberapa .rows, tetapi tidak setiap metode implementasi dapat menjelaskan hal ini.

.col-6 .col-sm-3

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

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

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

Anda juga dapat menerapkan jeda ini pada titik henti sementara tertentu dengan utilitas tampilan responsif kami .

.col-6 .col-sm-4

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

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

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

Menata ulang

Pesan kelas

Gunakan .order-kelas untuk mengontrol urutan visual konten Anda. Kelas-kelas ini responsif, sehingga Anda dapat mengatur orderbreakpoint berdasarkan (mis., .order-1.order-md-2). Termasuk dukungan untuk 1melalui 5semua enam tingkatan grid.

Pertama di DOM, tidak ada pesanan yang diterapkan

Kedua di DOM, dengan pesanan yang lebih besar

Ketiga di DOM, dengan urutan 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Ada juga kelas responsif .order-firstdan .order-lastyang mengubah orderelemen dengan menerapkan order: -1dan order: 6, masing-masing. Kelas-kelas ini juga dapat dicampur dengan .order-*kelas-kelas bernomor sesuai kebutuhan.

Pertama di DOM, dipesan terakhir

Kedua di DOM, tidak berurutan

Ketiga di DOM, dipesan dulu

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Mengimbangi kolom

Anda dapat mengimbangi kolom kisi dengan dua cara: .offset-kelas kisi responsif dan utilitas margin kami . Kelas kisi berukuran untuk mencocokkan kolom sementara margin lebih berguna untuk tata letak cepat di mana lebar offset bervariasi.

Kelas offset

Pindahkan kolom ke kanan menggunakan .offset-md-*kelas. Kelas-kelas ini meningkatkan margin kiri kolom demi *kolom. Misalnya, .offset-md-4bergerak .col-md-4di atas empat kolom.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

Selain pembersihan kolom pada breakpoint responsif, Anda mungkin perlu mengatur ulang offset. Lihat ini beraksi dalam contoh grid .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Utilitas margin

Dengan pindah ke flexbox di v4, Anda dapat menggunakan utilitas margin seperti .me-automemaksa kolom saudara menjauh satu sama lain.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Kelas kolom mandiri

Kelas .col-*juga dapat digunakan di luar a .rowuntuk memberi elemen lebar tertentu. Setiap kali kelas kolom digunakan sebagai turunan tidak langsung dari sebuah baris, padding dihilangkan.

.col-3: lebar 25%

.col-sm-9: lebar 75% di atas sm breakpoint

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

The classes can be used together with utilities to create responsive floated images. Make sure to wrap the content in a .clearfix wrapper to clear the float if the text is shorter.

A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.

As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.

Namun, di sinilah Anda, masih bertahan dalam membaca teks placeholder ini, berharap untuk beberapa wawasan lebih, atau beberapa telur paskah tersembunyi dari konten. Sebuah lelucon, mungkin. Sayangnya, tidak ada semua itu di sini.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>