Fitur Grid Baru pada Bootstrap 4

Teman-teman yang sering menggunakan framework CSS Bootstrap tentunya sudah tahu bahwa Bootstrap kini telah meluncurkan versi ke empatnya. Pada Bootstrap versi 4 ini ada beberapa pembaruan dan fitur yang mungkin dalam versi sebelumnya tidak ada. Fitur grid baru pada Bootstrap 4 ini yang akan kita bahas pada artikel kali ini. Sebelum membahas lebih lanjut, ada baiknya kalian memang sudah paham dan mahir dalam menggunakan bootstrap versi lama juga ya. Karena penggunaanya tidak berbeda jauh dengan yang lama.

Pada Bootstrap 4 fitur yang baru adalah pada bagian gridnya. Untuk pembagian kolom, biasanya kita akan tentukan seperti jika ingin membuat 3 kolom, maka kita harus bagi perkolom menjadi col-md-4 misalnya. Pada bootstrap 4 ini, perintah pembagian kolom tersebut sudah bisa diringkas lagi. Caranya kita hanya menuliskan perintah col pada div saja. Maka secara otomatis pembagian kolom itu akan disesuaikan dengan berapa banyak div dalam satu row, dan hasilnya akan membuat div tersebut otomatis mengikuti.

Untuk lebih jelasnya kalian bisa praktekkan langsung ya. Kalian bisa ikuti contoh code berikut ini.

bootstrap3.html

<html>
<head>
	<meta charset="UTF-8">
	<title>Bootstrap 3</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">	
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-4 merah">
				Kolom 1
			</div>
			<div class="col-md-4 biru">
				Kolom 2
			</div>
			<div class="col-md-4 hijau">
				Kolom 3
			</div>
		</div>
	</div>
</body>
</html>

style.css

.col-md-4{			
	height: 300px;
	color:white;
}
.merah{
	background: red
}
.biru{
	background: blue;
}
.hijau{
	background: green;
}

Setelah sudah kalian bisa simpan kedua file tersebut sesuai dengan nama dan format pada judulnya. Untuk melihat hasilnya kalian bisa lihat pada browser kalian, dan hasilnya akan seperti ini.

Pembagian kolomnya sesuai dengan perintah yang telah kita atur menjadi col-md-4. Dan sekarang kita coba lagi pembagian kolomnya dengan bootstrap 4. Kalian cukup rubah file htmlnya seperti ini.

bootstrap4.html

<html>
<head>
	<meta charset="UTF-8">
	<title>Bootstrap 3</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">	
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col merah">
				Kolom 1
			</div>
			<div class="col biru">
				Kolom 2
			</div>
			<div class="col hijau">
				Kolom 3
			</div>
		</div>
	</div>
</body>
</html>

Setelah sudah kalian simpan kembali, dan sekarang lihat hasilnya. Jika berhasil tampilanya akan muncul seperti ini.

Tanpa perlu kalian atur kolomnya berapa, akan otomatis dibagi menjadi col-md-4 karena dalam satu row terdapat 3 div, jika kalian tambakan div baru lagi, maka otomatis berubah menjadi col-md-3 dan seterusnya. Mudah bukan ?

Sekian pembahasan mengenai Fitur grid baru pada Bootstrap 4. Semoga bermanfaat.