Belajar Bootstrap (2. System Grid)

Belajar Bootstrap (2. System Grid)

System Grid Dalam Bootstrap

Pada penggunaan bootstrap, System grid merupakan bagian sangat penting karena menentukan responsive suatu tampilan website. Pada tampilan website , sistem bootstrap memungkinkan 12 kolom. Berikut adalah system grid pada bootstrap.
grid_bootstrap

Bagaimana menggunakanya?
System grid bootstrap memiliki 4 classes
xs = untuk hp
sm = untuk tablet
md = untuk desktop
lg = untuk large desktop

contoh kita akan membuat menjadi 4 kolom sama rata pada halaman website

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<title>belajar grid</title>
</head>
<body>
	<div class="row">
		<div class="col-md-3">Kolom 1</div>
		<div class="col-md-3">Kolom 2</div>
		<div class="col-md-3">Kolom 3</div>
		<div class="col-md-3">Kolom 4</div>
		
	</div>
</body>
</html>

hasil

Mengapa col-md-3 ? karena kita membuat 4 bagian kolom sama rata pada tampilan web. Ingat! bootstrap memungkinkan untuk membuat 12 kolom. 12:4 = 3 . Misal kita mau membuat web mejadi 2 kolom bagian, berarti kita kode col-md-6 .

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab

Leave a Reply

Your email address will not be published.Required fields are marked *