Apa itu Bootstrap Grid Sistem
Sistem grid Bootstrap menyediakan cara cepat dan nyaman untuk membuat layout web responsif. Versi Bootstrap 4 terbaru memperkenalkan sistem grid flexbox mobile-first baru yang memiliki ketepatan skala hingga 12 kolom sebagai suatu perangkat atau ukuran viewport yang meningkat.
Bootstrap 4 mencakup grid class yang telah ditentukan sebelumnya untuk membuat grid layout dengan cepat untuk berbagai jenis perangkat seperti ponsel, tablet, laptop dan desktop, dll. Misalnya, kalian dapat menggunakan kelas .col-* untuk membuat kolom grid untuk perangkat ekstra kecil seperti ponsel, dalam mode portrait, kalian juga dapat menggunakan kelas .col-sm-* untuk membuat kolom grid untuk perangkat layar kecil seperti ponsel dalam mode landscape, kelas .col-md-* untuk perangkat layar sedang seperti tablet, .col- kelas lg-* untuk perangkat besar seperti desktop, dan kelas .col-xl-* untuk layar desktop ekstra besar.
Tabel berikut merangkum beberapa fitur utama dari sistem grid baru.
| FeaturesBootstrap 4 Grid System | Extra small<576px | Small≥576px | Medium≥768px | Large≥992px | Extra large≥1200px |
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Ideal for | Mobile (Portrait) | Mobile (Landscape) | Tablets | Laptops | Laptops & Desktops |
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| Number of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes |
Tabel di atas menunjukkan satu hal penting, menerapkan kelas .col-sm-* pada elemen tidak hanya akan mempengaruhi style pada perangkat kecil, tetapi juga pada perangkat menengah, besar dan ekstra besar yang memiliki lebar layar lebih besar dari atau sama dengan 540px, jika kelas .col-md-*, .col-lg-* atau .col-xl-* tidak ada. Demikian pula, kelas .col-md-* tidak hanya akan mempengaruhi gaya elemen pada perangkat menengah, tetapi juga pada perangkat besar dan ekstra besar jika kelas .col-lg-* atau .col-xl- tidak ada.
Sekarang muncul pertanyaan bagaimana membuat baris dan kolom menggunakan sistem grid 12 kolom responsif ini. Jawabannya cukup sederhana, pertama buat wadah (container) yang bertindak sebagai pembungkus untuk baris dan kolom kalian menggunakan kelas .container, setelah itu buat baris di dalam wadah menggunakan kelas .row, dan untuk membuat kolom di dalam baris apa pun yang dapat menggunakan kelas .col-*, .col-sm-*, .col-md-*, .col-lg-* dan .col-xl-*. Kolom adalah area konten aktual tempat kita akan meletakkan konten kita. Mari kita lihat bagaimana cara kerjanya:
Membuat Layout Dua Kolom
Contoh berikut akan menunjukkan kepada kalian cara membuat layout dua kolom untuk perangkat menengah, besar dan ekstra besar seperti tablet, laptop, dan desktop, dll. Namun, pada ponsel (lebar layar kurang dari 768px), kolom akan otomatis menjadi horizontal.
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col-md-6">Column left</div>
<div class="col-md-6">Column right</div>
</div>
<!--Row with two columns divided in 1:2 ratio-->
<div class="row">
<div class="col-md-4">Column left</div>
<div class="col-md-8">Column right</div>
</div>
<!--Row with two columns divided in 1:3 ratio-->
<div class="row">
<div class="col-md-3">Column left</div>
<div class="col-md-9">Column right</div>
</div>
</div>
Karena sistem grid Bootstrap didasarkan pada 12 kolom, maka untuk menjaga kolom dalam satu baris (yaitu berdampingan), jumlah angka kolom grid dalam satu baris tidak boleh lebih besar dari 12. Jika kalian menelusuri kode contoh di atas dengan hati-hati kalian akan menemukan jumlah kolom kotak (yaitu col-md-*) tambahkan hingga dua belas (6 + 6, 4 + 8 dan 3 + 9) untuk setiap baris.
Membuat Layout Tiga Kolom
Demikian pula, kalian dapat membuat layout lain berdasarkan prinsip di atas. Misalnya, contoh berikut biasanya akan membuat layout tiga kolom untuk layar laptop dan desktop. Ini juga berfungsi di tablet dalam mode landscape jika resolusi layar lebih dari atau sama dengan 992 pixel (mis. Apple iPad). Namun, dalam mode portrait kolom kotak akan menjadi horisontal seperti biasa.
<div class="container">
<!--Row with three equal columns-->
<div class="row">
<div class="col-lg-4">Column left</div>
<div class="col-lg-4">Column middle</div>
<div class="col-lg-4">Column right</div>
</div>
<!--Row with three columns divided in 1:4:1 ratio-->
<div class="row">
<div class="col-lg-2">Column left</div>
<div class="col-lg-8">Column middle</div>
<div class="col-lg-2">Column right</div>
</div>
<!--Row with three columns divided unevenly-->
<div class="row">
<div class="col-lg-3">Column left</div>
<div class="col-lg-7">Column middle</div>
<div class="col-lg-2">Column right</div>
</div>
</div>
Bootstrap Auto-layout Columns
Kalian juga dapat membuat kolom dengan lebar yang sama untuk semua perangkat (ekstra kecil, kecil, sedang, besar, dan ekstra besar) hanya dengan menggunakan kelas .col, tanpa menentukan nomor kolom apa pun.
Mari kita coba contoh berikut untuk memahaminya:
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col">Column one</div>
<div class="col">Column two</div>
</div>
<!--Row with three equal columns-->
<div class="row">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
</div>
Selain itu, kalian juga dapat mengatur lebar satu kolom dan membiarkan kolom lainnya secara otomatis mengubah ukurannya secara merata. Kalian dapat menggunakan kelas grid yang telah ditentukan atau inline width.
Jika kalian mencoba contoh berikut, kalian akan menemukan kolom dalam baris dengan kelas .col memiliki lebar yang sama.
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col">Column one</div>
<div class="col">Column two</div>
</div>
<!--Row with three columns divided in 1:2:1 ratio-->
<div class="row">
<div class="col">Column one</div>
<div class="col-sm-6">Column two</div>
<div class="col">Column three</div>
</div>
</div>
Column Wrapping Behavior
Sekarang kita akan membuat layout yang lebih fleksibel yang mengubah orientasi kolom berdasarkan ukuran viewportnya. Contoh berikut akan membuat layout tiga kolom pada perangkat besar seperti laptop dan desktop, serta pada tablet (misalnya Apple iPad) dalam mode landscape, tetapi pada perangkat medium seperti tablet dalam mode portrait (768px ≤ lebar layar <992px), itu akan berubah menjadi layout dua kolom di mana kolom ketiga bergerak di bagian bawah dua kolom pertama.
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-3">Column one</div>
<div class="col-md-8 col-lg-6">Column two</div>
<div class="col-md-12 col-lg-3">Column three</div>
</div>
</div>
Seperti yang kalian lihat pada contoh di atas, jumlah nomor kolom kotak medium (yaitu col-md-* ) adalah 3 + 9 + 12 = 24> 12, oleh karena itu elemen <div> ketiga dengan kelas .col-md- 12 yang menambahkan kolom ekstra di luar 12 kolom maksimum dalam .row, dibungkus ke baris baru sebagai satu unit yang berdekatan pada perangkat ukuran layar sedang.
Demikian pula, kalian dapat membuat layout yang lebih mudah beradaptasi untuk situs web kalian menggunakan fitur wrapping column grid Bootstrap. Di bagian selanjutnya, kita akan membahas aspek lain dari fitur ini.
Membuat Multi-Column Layouts dengan Bootstrap
Dengan sistem grid flexbox Bootstrap 4 mobile pertama kalian, kalian dapat dengan mudah mengontrol bagaimana tata letak situs web kalian akan merender pada berbagai jenis perangkat yang memiliki ukuran layar atau viewport yang berbeda seperti ponsel, tablet, desktop, dll. Mari kita perhatikan ilustrasi berikut.
Pada ilustrasi di atas ada total 12 kotak konten di semua perangkat, tetapi penempatannya bervariasi sesuai dengan ukuran layar perangkat, seperti di perangkat seluler layout yang diberikan sebagai satu layout kotak kolom yang memiliki 1 kolom dan 12 baris ditempatkan di atas satu sama lain, sedangkan di tablet itu dibuat sebagai dua layout kotak kolom yang memiliki 2 kolom dan 6 baris.
Selanjutnya, dalam perangkat ukuran layar besar seperti laptop dan desktop, hal tersebut akan dirender sebagai layout kotak tiga kolom yang memiliki 3 kolom dan 4 baris dan akhirnya dalam perangkat layar besar seperti desktop besar, ia dibuat sebagai layout kotak empat kolom yang memiliki 4 kolom dan 3 baris.
Sekarang pertanyaannya adalah bagaimana kita dapat membuat layout responsif menggunakan sistem grid Bootstrap baru ini. Mari kita mulai dengan perangkat target utama. Misalkan perangkat target utama kita adalah laptop atau desktop normal. Karena layout laptop kita memiliki 3 kolom dan 4 baris yaitu layout 3×4, maka kode HTML untuk membuat struktur kotak seperti itu akan terlihat seperti ini.
<div class="container">
<div class="row">
<div class="col-lg-4"><p>Box 1</p></div>
<div class="col-lg-4"><p>Box 2</p></div>
<div class="col-lg-4"><p>Box 3</p></div>
<div class="col-lg-4"><p>Box 4</p></div>
<div class="col-lg-4"><p>Box 5</p></div>
<div class="col-lg-4"><p>Box 6</p></div>
<div class="col-lg-4"><p>Box 7</p></div>
<div class="col-lg-4"><p>Box 8</p></div>
<div class="col-lg-4"><p>Box 9</p></div>
<div class="col-lg-4"><p>Box 10</p></div>
<div class="col-lg-4"><p>Box 11</p></div>
<div class="col-lg-4"><p>Box 12</p></div>
</div>
</div>
Jika kalian melihat output dari contoh di atas di laptop atau desktop yang memiliki lebar layar atau viewport lebih dari atau sama dengan 992px tetapi kurang dari 1200px, kalian akan menemukan layoutnya memiliki 4 baris di mana setiap baris memiliki 3 kolom yang sama yang menghasilkan layout kotak 3×4.
Sekarang saatnya menyesuaikan layout kita untuk perangkat lain. Mari kita mulai dengan menyesuaikannya untuk perangkat tablet. Karena di dalam tablet, layout kita diterjemahkan sebagai kotak 2×6 (mis. 2 kolom dan 6 baris). Jadi, silakan dan tambahkan kelas .col-md-6 pada setiap kolom.
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6"><p>Box 1</p></div>
<div class="col-lg-4 col-md-6"><p>Box 2</p></div>
<div class="col-lg-4 col-md-6"><p>Box 3</p></div>
<div class="col-lg-4 col-md-6"><p>Box 4</p></div>
<div class="col-lg-4 col-md-6"><p>Box 5</p></div>
<div class="col-lg-4 col-md-6"><p>Box 6</p></div>
<div class="col-lg-4 col-md-6"><p>Box 7</p></div>
<div class="col-lg-4 col-md-6"><p>Box 8</p></div>
<div class="col-lg-4 col-md-6"><p>Box 9</p></div>
<div class="col-lg-4 col-md-6"><p>Box 10</p></div>
<div class="col-lg-4 col-md-6"><p>Box 11</p></div>
<div class="col-lg-4 col-md-6"><p>Box 12</p></div>
</div>
</div>
Tips: Untuk kenyamanan, pilih perangkat target utama kalian dan buat layout untuk perangkat itu terlebih dahulu setelah itu kemudian menambahkan kelas untuk membuatnya responsif untuk perangkat lain.
Demikian pula, kalian dapat menyesuaikan layout untuk perangkat ekstra besar seperti layar desktop besar dengan menambahkan kelas .col-xl-3 pada setiap kolom, karena setiap baris dalam layout perangkat ekstra besar kita berisi 4 kolom. Berikut kode terakhir setelah menggabungkan seluruh prosesnya.
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 1</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 2</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 3</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 4</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 5</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 6</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 7</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 8</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 9</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 10</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 11</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 12</p></div>
</div>
</div>
Nesting (Menyarangkan) Grid Column
Kolom kotak Bootstrap juga dapat disatukan, yang berarti kalian dapat menempatkan baris dan kolom di dalam kolom yang ada. Namun, rumus untuk menempatkan kolom akan sama, yaitu jumlah angka kolom harus sama dengan 12 atau kurang dalam satu baris.
<div class="container">
<div class="row">
<div class="col-sm-8">Column left</div>
<div class="col-sm-4">
<!--Column right with nested rows and columns-->
<div class="row">
<div class="col-12"></div>
</div>
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
</div>
</div>
Membuat Variable Width Column
Kalian dapat menggunakan kelas col-{breakpoint}-auto untuk mengukur kolom berdasarkan lebar alami dari konten mereka. Cobalah contoh berikut untuk melihat cara kerjanya:
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-3">Column left</div>
<div class="col-md-auto">Variable width column</div>
<div class="col-md-3">Column right</div>
</div>
<div class="row">
<div class="col">Column left</div>
<div class="col-auto">Variable width column</div>
<div class="col">Column right</div>
</div>
</div>
Alignment Grid Column
Kalian dapat menggunakan flexbox alignment utilities untuk meluruskan kolom kotak secara vertikal dan horizontal di dalam sebuah container. Cobalah contoh-contoh berikut untuk memahami cara kerjanya:
Vertical Alignment Grid Column
Kalian dapat menggunakan kelas .align-items-start, .align-items-center, dan .align-items-end untuk masing-masing align kolom kotak secara vertikal di bagian atas, tengah dan bawah container.
<div class="container">
<div class="row align-items-start">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
<div class="row align-items-center">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
<div class="row align-items-end">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
</div>
Kolom individual di dalam baris juga dapat disejajarkan secara vertikal. Berikut contohnya:
<div class="container">
<div class="row">
<div class="col align-self-start">Column one</div>
<div class="col align-self-center">Column two</div>
<div class="col align-self-end">Column three</div>
</div>
</div>
Catatan: Kalian dapat melewati angka dalam kelas kotak .col-* dan cukup gunakan kelas .col untuk membuat kolom ukuran yang sama untuk semua perangkat (ekstra kecil, kecil, sedang, besar, dan ekstra besar).
Horizontal Alignment Grid Column
Kalian dapat menggunakan kelas .justify-content-start, .justify-content-center, dan .justify-content-end untuk menyelaraskan kolom grid secara horizontal di kiri, tengah dan kanan container-nya, masing-masing. Mari kita lihat contoh berikut untuk melihat cara kerjanya:
<div class="container">
<div class="row justify-content-start">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
</div>
<div class="row justify-content-center">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
</div>
<div class="row justify-content-end">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
</div>
</div>
Alternative-nya, kalian bisa menggunakan kelas .justify-content-around untuk mendistribusikan kolom grid secara merata dengan ruang setengah ukuran di kedua ujungnya, sedangkan kalian bisa menggunakan kelas .justify-content-between untuk mendistribusikan kolom grid secara merata di mana kolom pertama diletakkan di awal dan kolom terakhir ditempatkan di akhir. Berikut contohnya:
<div class="container">
<div class="row justify-content-around">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
</div>
<div class="row justify-content-between">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
</div>
</div>
Penataan Ulang Grid Column
Kalian bahkan dapat mengubah urutan visual kolom grid kalian tanpa mengubah urutannya pada actual markup. Gunakan kelas .order-last untuk membuat kolom terakhir, sedangkan gunakan kelas .order-first untuk membuat kolom di tempat pertama. Mari kita lihat contohnya:
<div class="container">
<div class="row">
<div class="col order-last">First, but ordered at last</div>
<div class="col">Second, but unordered</div>
<div class="col order-first">Last, but ordered at first</div>
</div>
</div>
Kalian juga dapat menggunakan kelas .order-* untuk memesan kolom grid tergantung pada nomor ordernya. Kolom grid dengan nomor urut lebih tinggi muncul setelah kolom grid dengan nomor urut lebih rendah atau kolom grid tanpa kelas order. Hal ini mencakup dukungan untuk 1 hingga 12 di kelima tingkatan gridnya.
<div class="container">
<div class="row">
<div class="col order-4">First, but ordered at last</div>
<div class="col">Second, but ordered at first</div>
<div class="col order-1">Last, but ordered at second</div>
</div>
</div>
Offsetting Grid Column
Kalian juga dapat memindahkan kolom grid ke kanan untuk tujuan alignment menggunakan kelas offset kolom seperti .offset-sm-*, .offset-md-*, .offset-lg-*, dan seterusnya.
Kelas-kelas ini mengimbangi kolom dengan hanya meningkatkan margin kiri dengan jumlah kolom yang ditentukan. Misalnya, kelas .offset-md-4 pada kolom .col-md-8 memindahkannya ke kanan di atas empat kolom dari posisi semula. Cobalah contoh berikut ini:
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-4"><!--Column with 4 columns offset--></div>
</div>
</div>
Kalian juga dapat mengimbangi kolom menggunakan kelas margin utility. Kelas-kelas ini berguna dalam situasi di mana lebar (width) offset tidak diperbaiki. Berikut contohnya:
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 ml-auto"><!--Offset this column to right--></div>
</div>
<div class="row">
<div class="col-auto mr-auto"></div>
<div class="col-auto"><!--Move this column away from previous column--></div>
</div>
</div>
Catatan: Kalian bisa menggunakan kelas .col-auto untuk membuat kolom yang hanya memakan ruang sebanyak yang dibutuhkan, mis. Ukuran kolom itu sendiri berdasarkan kontennya.
Membuat Compact Column
Kalian dapat menghapus gutter default di antara kolom untuk membuat tata letak yang ringkas (compact) dengan menambahkan kelas .no-gutters di .row. Kelas ini menghilangkan margin negatif dari baris dan lapisan horizontal dari semua kolom kecil yang terkait langsung. Berikut contohnya:
<div class="row no-gutters">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
<div class="col-4">Column three</div>
</div>
Memecah Kolom ke Baris Baru
Kalian juga dapat membuat kolom dengan lebar sama yang merentang beberapa baris dengan menyisipkan <div> dengan kelas .w-100 di mana kalian ingin kolom tersebut dipecah menjadi baris baru. Selain itu, kalian dapat membuat jeda ini responsif dengan menggabungkan kelas .w-100 dengan responsive display utility classes.
<div class="container">
<!-- Break columns on all devices -->
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="w-100"></div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<!-- Break columns on all devices except extra large devices -->
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="w-100 d-xl-none"></div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
</div>
