Sistem grid memudahkan kita mengatur tata letak elemen di web. Zaman dulu, kebanyakan web menggunakan tag table untuk mengatur tata letaknya. Sekarang sudah tidak lagi. Karena kurang efektif dan tidak SEO friendly. Oleh karena itu, website zaman sekarang menggunakan CSS untuk mengatur tata letaknya, sistem grid di Bootstrap mengadopsi konsep tabel.
Grid system adalah sistem pengaturan lebar untuk masing-masing komponen yang ingin kita buat. pengaturan ini bertujuan untuk mengatur ke-responsive-an website yang kita buar.
Jadi kita bisa mengaturnya sesuai yang kita inginkan dengan sangat mudah, tanpa harus menulis coding css secara manual untuk membuat halaman yang responsive.
Ada 12 grid pada bootstrap. yang bisa kita analogikan sebagai 12 kotak yang bisa kita atur lebarnya dengan mudah.
Ada beberapa jenis class dasar dari bootstrap 4 untuk mengatur grid, di antaranya adalah :
- .col-* : digunakan untuk mengatur grid secara otomatis
- .col-sm-* : digunakan untuk mengatur grid pada ukuran layar monitor yang berukuran kecil ( >=576px )
- .col-md-* : digunakan untuk mengatur grid pada ukuran layar monitor yang berukuran sedang ( >=720px )
- .col-lg-* : digunakan untuk mengatur grid pada ukuran layar monitor yang berukuran besar ( >=992px )
- .col-xl-* : digunakan untuk mengatur grid pada ukuran layar monitor yang berukuran ekstra besar ( >=1200px )
Pada urutan pertama ada class col-*, col-* digunakan untuk mengatur grid secara default, misalnya jika di akses dari layar yang berukuran kecil, besar ataupun ekstra besar, ukuran gridnya akan tetap dan tidak berubah. Jadi mau dibuka dari ukuran layar berapa pun, hasilnya akan tetap mengikuti pengaturan grid col-* yang sudah ditetapkan.
col-sm-* digunakan untuk mengatur grid jika halaman website diakses dari ukuran layar yang kecil seperti smartphone, maka pengaturan class col-sm-* lah yang akan digunakan.
Contoh Grid Bootstrap 4
Contoh ini menggunakan class .col-md-* :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<title>Grid System Bootstrap</title>
</head>
<body>
<div class="container-fluid">
<center>
<h3>Grid Bootstrap</h3>
<h4>www.agussuratna.net</h4>
</center>
<div class="row">
<div class="col-md-12">
<div class="bg-primary text-center text-white">
.col-md-12
</div>
<br/>
</div>
<div class="col-md-6">
<div class="bg-primary text-center text-white">
.col-md-6
</div>
<br/>
</div>
<div class="col-md-6">
<div class="bg-primary text-center text-white">
.col-md-6
</div>
<br/>
</div>
<div class="col-md-4">
<div class="bg-primary text-center text-white">
.col-md-4
</div>
<br/>
</div>
<div class="col-md-4">
<div class="bg-primary text-center text-white">
.col-md-4
</div>
<br/>
</div>
<div class="col-md-4">
<div class="bg-primary text-center text-white">
.col-md-4
</div>
<br/>
</div>
<div class="col-md-3">
<div class="bg-primary text-center text-white">
.col-md-3
</div>
<br/>
</div>
<div class="col-md-3">
<div class="bg-primary text-center text-white">
.col-md-3
</div>
<br/>
</div>
<div class="col-md-3">
<div class="bg-primary text-center text-white">
.col-md-3
</div>
<br/>
</div>
<div class="col-md-3">
<div class="bg-primary text-center text-white">
.col-md-3
</div>
<br/>
</div>
<div class="col-md-2">
<div class="bg-primary text-center text-white">
.col-md-2
</div>
<br/>
</div>
<div class="col-md-2">
<div class="bg-primary text-center text-white">
.col-md-2
</div>
<br/>
</div>
<div class="col-md-2">
<div class="bg-primary text-center text-white">
.col-md-2
</div>
<br/>
</div>
<div class="col-md-2">
<div class="bg-primary text-center text-white">
.col-md-2
</div>
<br/>
</div>
<div class="col-md-2">
<div class="bg-primary text-center text-white">
.col-md-2
</div>
<br/>
</div>
<div class="col-md-2">
<div class="bg-primary text-center text-white">
.col-md-2
</div>
<br/>
</div>
<div class="col-md-1">
<div class="bg-primary text-center text-white">
.col-md-1
</div>
<br/>
</div>
<div class="col-md-1">
<div class="bg-primary text-center text-white">
.col-md-1
</div>
<br/>
</div>
<div class="col-md-1">
<div class="bg-primary text-center text-white">
.col-md-1
</div>
<br/>
</div>
<div class="col-md-1">
<div class="bg-primary text-center text-white">
.col-md-1
</div>
<br/>
</div>
<div class="col-md-1">
<div class="bg-primary text-center text-white">
.col-md-1
</div>
<br/>
</div>
<div class="col-md-1">
<div class="bg-primary text-center text-white">
.col-md-1
</div>
<br/>
</div>
<div class="col-md-1">
<div class="bg-primary text-center text-white">
.col-md-1
</div>
<br/>
</div>
<div class="col-md-1">
<div class="bg-primary text-center text-white">
.col-md-1
</div>
<br/>
</div>
<div class="col-md-1">
<div class="bg-primary text-center text-white">
.col-md-1
</div>
<br/>
</div>
<div class="col-md-1">
<div class="bg-primary text-center text-white">
.col-md-1
</div>
<br/>
</div>
<div class="col-md-1">
<div class="bg-primary text-center text-white">
.col-md-1
</div>
<br/>
</div>
<div class="col-md-1">
<div class="bg-primary text-center text-white">
.col-md-1
</div>
<br/>
</div>
</div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.js"></script>
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
Hasilnya :
Pada contoh di atas kita harus menghubungkannya terlebih dulu dengan file bootstrap. Kita wajib menggunakan class row jika ingin menggunakan class grid system ini, kita juga bisa menggunakan class containers (container atau container-fluid) untuk mengatur ukuran layout utamanya.
Bootstrap memiliki 12 grid, jadi maksudnya sebuah halaman website dibagi menjadi 12 kotak atau bagian jika menggunakan bootstrap. Ini merupakan trik dan solusi yang mudah dari bootstrap untuk membuat halaman website yang responsive.
Perhatikan pada coding sebelumnya, dimana kita membuat berbagai class col-md-*, mulai dari col-md-1 sampai col-md-12. Karena setiap halaman memiliki 12 grid, maka jika kita menggunakan col-md-12, maka ukurannya akan penuh seukuran 12 grid (kotak biru pertama pada gambar).
Begitu juga pada kotak di baris kedua, jika kita menggunakan col-md-6, maka ukurannya sebesar 6 grid, jadi ukurannya menjadi setengah dari 12, begitu juga seterusnya sampai col-md-1.
Referensi : https://www.malasngoding.com/grid-system-bootstrap-4/
