Bootstrap 4 - 02.2: Layout pada Bootstrap 4

Bootstrap 4 - 02.2: Layout pada Bootstrap 4

loading....

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.

Cara Menggunakan Grid Pada Bootstrap 4
Untuk menggunakan grid system ini kamu dapat menggunakan class col. Nah class col ini terbagi dalam beberapa jenis yaitu:
  1. Class .col- / .col
  2. Class .col-sm / .col-sm-
  3. Class .col-md / .col-md-
  4. Class .col-lg / .col-lg-
  5. Class .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

Artikel Menarik Lainnya
Bootstrap 4, Bootstrap

loading...