belajar bootstrap4, tutorial Bootstrap 4

Bootstrap 4 Grid System

System grid di Bootstrap 4 sebenarnya tidak berbeda dengan Bootstrap 3 yaitu menggunakan class .col dengan format col-media-lebar. lebar adalah angka, dimana jumlah lebar dalam satu baris adalah 12. Untuk menjelaskan lebar bisa saya deskripsikan di bawah ini:

lebar 1lebar 1lebar 1lebar 1lebar 1lebar 1lebar 1lebar 1lebar 1lebar 1lebar 1lebar 1
 lebar 4 lebar 4 lebar 4
lebar 4lebar 8
lebar 6lebar 6
lebar 12

Jumlah angka lebar adalah 12.

Sedangkan media yang bisa digunakan di bootstrap 4 ada 5 jenis yaitu:

  • .col- (tanpa menuliskan nama media : untuk lebar layar dibawah 576px)
  • .col-sm- (sm atau small devices – untuk lebar layar 576px atau lebih)
  • .col-md- (md atau medium devices – untuk lebar layar 768px atau lebih)
  • .col-lg- (lg atau large devices – untuk lebar layar 992px atau lebih)
  • .col-xl- (xl atau xlarge devices – untuk lebar layar 1200px atau lebih)

mudah bukan?

Struktur Penulisan grid di Bootstrap 4

Cara penulisan grid di Bootstrap 4 adalah sebagai berikut:

<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Contoh Penulisan Grid di Bootstrap 4

1. Membuat 3 Grid kolom responsive dengan lebar yang sama:

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

2. Membuat 3 grid kolom dengan lebar yang disesuaikan:

<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-4"></div>
  <div class="col-md-6"></div>
</div>

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>