Bootstrap memiliki sistem grid yang membagi satu halaman menjadi 12 kolom, jadi lebar halaman dari kiri kekanan di bagi menjadi 12 kolom.
jika tidak ingin menggunakan semua 12 kolom secara satu persatu, kita bisa mengabungkannya, membuat grup kolom sesuai dengan yang kita inginkan dengan jumlah kolom tetap yaitu 12.
untuk lebih jelasnya mengenai sistem grid di bootstrap lihat gambar berikut :
Gbr : sistem grid di Bootstrap.
Sistem grid yang dimiliki bootsrap ini responsive dimana kolomnya akan mengatur dan menyesuaikan dengan lebar ukuran layar perangkat yang di gunakan.
Bootstrap memiliki 4 grid class sebagai berikut :
1. xs (untuk hp)
2. sm (untuk tablet)
3. md (untuk desktop)
4. lg (untuk lebih besar dari desktop)
Adapun struktur sistem grid di bootstrap adalah seperti berikut ini :
berikut hasilnya :
Gbr : sistem grid pada Bootstrap.
keterangan : sistem grid pada bootstrap dibuat dengan sebuah baris : <div class="row">, lalu tambahkan beberapa kolom sesuai yang kita inginkan : <div class="col-*-*"> , angka di dalam kelas .col-*-* harus berjumlah 12 di setiap class="row".
oke sekian tentang Sistem Grid Pada Bootstrap, semoga bermanfaat.
jika tidak ingin menggunakan semua 12 kolom secara satu persatu, kita bisa mengabungkannya, membuat grup kolom sesuai dengan yang kita inginkan dengan jumlah kolom tetap yaitu 12.
untuk lebih jelasnya mengenai sistem grid di bootstrap lihat gambar berikut :
Sistem grid yang dimiliki bootsrap ini responsive dimana kolomnya akan mengatur dan menyesuaikan dengan lebar ukuran layar perangkat yang di gunakan.
Bootstrap memiliki 4 grid class sebagai berikut :
1. xs (untuk hp)
2. sm (untuk tablet)
3. md (untuk desktop)
4. lg (untuk lebih besar dari desktop)
Adapun struktur sistem grid di bootstrap adalah seperti berikut ini :
kode : Contoh Sistem Grid Pada Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row" align=center>
<div class="col-sm-1" style="background-color:blueviolet;">1</div>
<div class="col-sm-1" style="background-color:aqua;">1</div>
<div class="col-sm-1" style="background-color:blueviolet;">1</div>
<div class="col-sm-1" style="background-color:aqua;">1</div>
<div class="col-sm-1" style="background-color:blueviolet;">1</div>
<div class="col-sm-1" style="background-color:aqua;">1</div>
<div class="col-sm-1" style="background-color:blueviolet;">1</div>
<div class="col-sm-1" style="background-color:aqua;">1</div>
<div class="col-sm-1" style="background-color:blueviolet;">1</div>
<div class="col-sm-1" style="background-color:aqua;">1</div>
<div class="col-sm-1" style="background-color:blueviolet;">1</div>
<div class="col-sm-1" style="background-color:aqua;">1</div>
</div>
<hr>
<div class="row" align=center>
<div class="col-sm-4" style="background-color:aqua;">4</div>
<div class="col-sm-4" style="background-color:aquamarine;">4</div>
<div class="col-sm-4" style="background-color:aliceblue;">4</div>
</div>
<hr>
<div class="row" align=center>
<div class="col-sm-4" style="background-color:aquamarine;">4</div>
<div class="col-sm-8" style="background-color:aqua;">8</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row" align=center>
<div class="col-sm-1" style="background-color:blueviolet;">1</div>
<div class="col-sm-1" style="background-color:aqua;">1</div>
<div class="col-sm-1" style="background-color:blueviolet;">1</div>
<div class="col-sm-1" style="background-color:aqua;">1</div>
<div class="col-sm-1" style="background-color:blueviolet;">1</div>
<div class="col-sm-1" style="background-color:aqua;">1</div>
<div class="col-sm-1" style="background-color:blueviolet;">1</div>
<div class="col-sm-1" style="background-color:aqua;">1</div>
<div class="col-sm-1" style="background-color:blueviolet;">1</div>
<div class="col-sm-1" style="background-color:aqua;">1</div>
<div class="col-sm-1" style="background-color:blueviolet;">1</div>
<div class="col-sm-1" style="background-color:aqua;">1</div>
</div>
<hr>
<div class="row" align=center>
<div class="col-sm-4" style="background-color:aqua;">4</div>
<div class="col-sm-4" style="background-color:aquamarine;">4</div>
<div class="col-sm-4" style="background-color:aliceblue;">4</div>
</div>
<hr>
<div class="row" align=center>
<div class="col-sm-4" style="background-color:aquamarine;">4</div>
<div class="col-sm-8" style="background-color:aqua;">8</div>
</div>
</div>
</body>
</html>
berikut hasilnya :
keterangan : sistem grid pada bootstrap dibuat dengan sebuah baris : <div class="row">, lalu tambahkan beberapa kolom sesuai yang kita inginkan : <div class="col-*-*"> , angka di dalam kelas .col-*-* harus berjumlah 12 di setiap class="row".
oke sekian tentang Sistem Grid Pada Bootstrap, semoga bermanfaat.