Bootstrap - Kolom: Membangun Layout Responsif Dengan Mudah

Hai teman-teman pengembang web yang ambisius! Hari ini, kita akan mendalamkan salah satu fitur yang paling kuat di Bootstrap: kolom. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Percayalah, pada akhir panduan ini, Anda akan dapat membuat layout responsif seperti seorang ahli!

Cara Kerjanya

Sebelum kita masuk ke dalam detil, mari kita mengerti dasarnya. Sistem grid Bootstrap didasarkan pada layout 12 kolom. Pikirkan itu seperti membagi pizza menjadi 12 bagian – Anda bisa makan semuanya sendiri ( satu kolom penuh lebar) atau berbagi dengan teman (beberapa kolom).

Ini adalah contoh sederhana untuk memulai:

<div class="container">
<div class="row">
<div class="col-sm-4">Kolom 1</div>
<div class="col-sm-4">Kolom 2</div>
<div class="col-sm-4">Kolom 3</div>
</div>
</div>

Dalam contoh ini, kita telah membuat tiga kolom lebar yang sama pada layar kecil dan keatas. Kelas col-sm-4 berarti "ambil 4 dari 12 kolom pada layar kecil". Itu seperti mengatakan, "Saya akan memesan 4 bagian dari pizza 12 bagian itu, silakan!"

Penempatan

Sekarang kita memiliki kolom, mari belajar bagaimana menempatkan mereka. Itu seperti mengatur furnitur di dalam sebuah kamar – Anda ingin semua hal terlihat sempurna!

Penempatan vertikal

Untuk menempatkan kolom secara vertikal, kita gunakan kelas pada baris:

<div class="container">
<div class="row align-items-start">
<div class="col">Atas</div>
<div class="col">Atas</div>
<div class="col">Atas</div>
</div>
<div class="row align-items-center">
<div class="col">Tengah</div>
<div class="col">Tengah</div>
<div class="col">Tengah</div>
</div>
<div class="row align-items-end">
<div class="col">Bawah</div>
<div class="col">Bawah</div>
<div class="col">Bawah</div>
</div>
</div>

Di sini, kita menggunakan align-items-start, align-items-center, dan align-items-end untuk menempatkan kolom ke atas, tengah, dan ke bawah baris masing-masing.

Penempatan horisontal

Untuk penempatan horisontal, kita gunakan kelas justify-content:

<div class="container">
<div class="row justify-content-start">
<div class="col-4">Satu</div>
<div class="col-4">Dua</div>
</div>
<div class="row justify-content-center">
<div class="col-4">Satu</div>
<div class="col-4">Dua</div>
</div>
<div class="row justify-content-end">
<div class="col-4">Satu</div>
<div class="col-4">Dua</div>
</div>
</div>

Kelas ini (justify-content-start, justify-content-center, justify-content-end) menempatkan kolom ke kiri, tengah, dan ke kanan wadah.

Pemenggalan Kolom

kadang-kadang, Anda mungkin memiliki lebih dari 12 unit kolom dalam satu baris. Jangan khawatir, Bootstrap ada untuk mendukung Anda! Itu akan secara otomatis memenggal kolom ekstra ke baris baru:

<div class="container">
<div class="row">
<div class="col-9">Kolom 1</div>
<div class="col-4">Kolom 2</div>
<div class="col-6">Kolom 3</div>
</div>
</div>

Dalam contoh ini, 9 + 4 = 13, yang lebih besar dari 12, jadi kolom kedua dipenggal ke baris baru.

Pemenggalan Kolom

Tapi apa jika Anda ingin memaksa baris baru sendiri? Masukkan pemenggalan kolom:

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

<div class="w-100"></div> membuat pemenggalan lebar 100%, memaksa kolom berikutnya untuk mulai di baris baru.

Penyusunan Ulang

Kelas Penyusunan

Bootstrap memungkinkan Anda untuk mengubah urutan visual kolom:

<div class="container">
<div class="row">
<div class="col order-3">Pertama, tapi terakhir</div>
<div class="col order-2">Kedua, tapi kedua</div>
<div class="col order-1">Ketiga, tapi pertama</div>
</div>
</div>

Kelas order- menentukan urutan kolom. Itu seperti memberitahu kolom untuk bermain kursi musik!

Penyesuaian Kolom

Kelas Penyesuaian

kadang-kadang, Anda mungkin ingin menambahkan ruang sebelum kolom. Itu di mana kelas penyesuaian memainkan perannya:

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

Kelas offset-md-4 menambahkan margin-left yang setara dengan 4 kolom, mendorong kolom kedua ke kanan.

Pembersihan Kolom di Breakpoint Responsif

Sekarang, saat layout Anda berubah di berbagai ukuran layar, Anda mungkin perlu membersihkan kolom yang diberikan:

<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>
<div class="w-100 d-none d-md-block"></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>

Di sini, d-none d-md-block menyembunyikan pemenggalan pada layar kecil tetapi menampilkannya pada layar medium dan keatas.

Utilitas Margin

Bootstrap menyediakan utilitas margin untuk penyesuaian ruang cepat:

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
</div>

Kelas ml-auto mendorong kolom kedua ke kanan dengan penyesuaian margin kiri otomatis.

Kelas Kolom Standaar

Akhirnya, Anda dapat menggunakan kelas kolom tanpa wrapper baris untuk fleksibilitas lebih besar:

<div class="container">
<div class="col-3 bg-light p-3 border">
.col-3: lebar 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: lebar 75% di atas breakpoint sm
</div>
</div>

Pendekatan ini memberikan Anda kendali lebih besar atas layout Anda, khususnya untuk desain yang kompleks.

Dan begitu, teman-teman! Anda telah belajar segala hal tentang kolom Bootstrap. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini. Secepatnya, Anda akan membuat layout responsif yang akan membuat bahkan pengembang web yang berpengalaman merasa iri!

Berikut adalah tabel rujukan cepat dari kelas kolom yang kita cover:

Kelas	Deskripsi
col-*	Kelas kolom dasar (* dapat berupa 1-12)
col-sm-*	Kolom untuk layar kecil dan keatas
col-md-*	Kolom untuk layar medium dan keatas
col-lg-*	Kolom untuk layar besar dan keatas
col-xl-*	Kolom untuk layar ekstra besar
offset--	Kolom offset (* dapat berupa sm, md, lg, xl)
order-*	Penyusunan ulang kolom (* dapat berupa 1-12)

Selamat coding, dan semoga layout Anda selalu responsif!

Credits: Image by storyset