Tutorial dasar bootstrap 4 bagian 2.2 ini akan membahas penggunaan layout grid system pada bootstrap 4. Ok mari kita mulai mempelajari Layout pada bootstrap. Grid sysrem pada bootstrap adalah komponen yang berfungsi untuk membuat pengaturan tampilan.
class col
. Nah class col ini terbagi dalam beberapa jenis yaitu:.col- / .col
.col-sm / .col-sm-
Class .col-md / .col-md-
.col-lg / .col-lg-
.col-xl / .col-xl-
Berikut ini contoh penggunaan nya:
<div class="container">
<h1>Contoh menampilkan Grid</h1>
<div class="row">
<div class="col-sm satu">
Colom 1 Grid 1
</div>
<div class="col-sm dua">
Colom 1 Grid 2
</div>
<div class="col-sm tiga">
Colom 1 Grid 3
</div>
</div>
<div class="w-100"></div>
<div class="row">
<div class="col-2 satu">
Colom 2 Grid 1
</div>
<div class="col-4 dua">
Colom 2 Grid 2
</div>
<div class="col-6 tiga">
Colom 2 Grid 3
</div>
</div>
<div class="row">
<div class="col-8 satu">
Colom 3 Grid 1
</div>
<div class="col-4 dua">
Colom 3 Grid 2
</div>
</div>
<div class="row">
<div class="col-12 tiga">
Colom 4 Grid 1
</div>
</div>
<div class="row">
<div class="col-md satu">
Colom 5 Grid 1
</div>
<div class="col-md tiga">
Colom 5 Grid 2
</div>
</div>
</div>
<br><br>
agar dapat terlihat perbedaan nya saya menambahkan sedikit css
.satu {
background-color: coral;
border: solid grey;
}
.dua {
background-color: lightblue;
border: solid grey;
}
.tiga {
background-color: yellow;
border: solid grey;
}
Agar dapat terlihat lebih jelas dan kamu dapt mencoba nya sendiri berikut saya lampirkan source code dan demo nya di codepen