Mengenal Grid Sistem pada Bootstrap v4

Pada materi kali ini kita akan membahas tentang Mengenal Grid Sistem pada Bootstrap v4, grid sistem sistem adalah sebuah alat yang membantu kita untuk membuat sebuah layout atau kolom pada sebuah website menjadi lebih rapi.

Pada bootstrap grid sistem dibagi menjadi 12 kolom (col-) dan baris (.row) pada bootstrap versi terbaru yaitu bootstrap v4 memiliki 5 tipe class yang berfungsi untuk mengatur kolom dengan ukuran yang berbeda-beda diantaranya yaitu :

col-xs-* untuk tampilan extra small digunakan untuk tampilan yang ukurannya kurang dari 576px
col-sm-* untuk tampilan small digunakan untuk tampilan yang ukurannya lebih dari 576px
col-md-* untuk tampilan medium digunakan untuk tampilan yang ukurannya lebih dari 768px
col-lg-* untuk lampilan large digunakan untuk tampilan yang ukurannya lebih dari 960px
col-xl-* untuk lampilan extra large digunakan untuk tampilan yang ukurannya lebih dari 1200px

Untuk menggunakan grid tersebut kita terlebih dahulu harus mendownload file dari bootstrap nya terlebih dahulu pada https://getbootstrap.com/ jika teman-teman tidak ingin mendownload file bootstrap nya teman-teman bisa menggunakan cdn yang terdapat pada getbootstrap, nah untuk struktur dari bootstrapnya seperti dibawah ini :

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.2.1.slim.min.js%22%20integrity%3D%22sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr%2FrE9%2FQpg6aAZGJwFDMVNA%2FGpGFF93hXpG5KkN%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fpopper.js%2F1.12.3%2Fumd%2Fpopper.min.js%22%20integrity%3D%22sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F4.0.0-beta.2%2Fjs%2Fbootstrap.min.js%22%20integrity%3D%22sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
  </body>
</html>

Selanjutnya kita akan coba bagi kolomnya silahkan teman-teman masukan script dibawah ini pada bagian head untuk backgroundnya dan body untuk kolomnya

style background pada head:

 <style type="text/css"><br> .red {background: red}<br> .green {background: green}<br> .blue {background: blue}<br> .yellow {background: yellow}<br> </style>

pada bagian tag <body> .. </body>

    <div class="container">
      <div class="row">
        <div class="col-xs-4 col-sm-6 col-md-3 col-lg-4 col-xl-6 red ">
           Bootstrap v4 
        </div>

        <div class="col-xs-4 col-sm-6 col-md-3 col-lg-4 col-xl-6 green">
           Bootstrap v4 
        </div>

        <div class="col-xs-4 col-sm-6 col-md-3 col-lg-4 col-xl-6 blue">
           Bootstrap v4 
        </div>

        <div class="col-xs-4 col-sm-6 col-md-3 col-lg-4 col-xl-6 yellow">
           Bootstrap v4 
        </div>
      </div>
    </div>

Jika kita jalankan pada browser maka akan terlihat seperti dibawah ini :

Demo

Oke teman-teman itulah pembahasan kita tentang Mengenal Grid Sistem pada Bootstrap v4.

Semoga bermanfaat.

Terimakasih.

Mengenal Grid Sistem pada Bootstrap v4

Kategori