Bootstrap 4: Tutorial Grid sistem

FreeLoad — Hallo sobat apa kabarnya semoga sehat selalu ya, pada kali ini saya akan memposting cara membuat tampilan web lebih responsive dengan bootstrap 4.

Apa itu Layout Responsive ? 

Layout Responsive itu adalah tampilan layout web yang mengikuti ukuran layar ketika di resize, dengan membuat tampilan layout yang responsive tentu saja akan membuat pengguna mudah untuk mengakses website tersebut baik dengan Laptop, Smartphone, Komputer, dan Tablet. 

Bagaimana Cara Penggunaannya ?

Cara penggunaan nya pada bootstrap sangatlah mudah pertama dengan menggunakan Grid sistem pada bootstrap,dan CSS @media nah disini saya akan membahas satu persatu cara penggunaannya.

1.Grid system

Grid sistem atau sistem grid pada bootstrap berfungsi untuk mengelompokan setiap konten dari html yang kita buat, dan Grid sistem  menggunakan serangkaian seperti 

1. container sebagai Pembungkus

2. Row sebagai baris

3 coloumn untuk mengatur tata letak dan menyelaraskan konten,

dan sistem grid pada bootstrap dibangun dengan flexbox.

Grid sistem pada Bootstrap secara default terdiri dari dua belas kolom dalam satu baris yang mana masing masing terdiri dari 1 kolom. yang mana setiap jarak pada kolomnya itu adalah 30px

coba buat syntax dibawah ini dan ketik kan di dalam text editor kesayangan Anda,

nah sebelum anda menuliskan syntax tersebut anda harus melakukan instalasi bootstrap terlebih dahulu jika anda belum tau cara menginstal bootstrap maka saya sudah menyiapkan link, untuk tutorialnya bisa klick disini  

<div class="container">

  <div class="row">

   <div class="col-1">

     1

   </div>

  </div>

</div> 

Selanjutnya buatlah syntax dibawah ini di text editor Anda

<div class="container">

  <div class="row">

   <div class="col-2">

     2

   </div>

  </div>

</div>

pada saat anda membuat col-2 maka anda bisa meletak kan 6 konten di dalam 1 baris seperti gambar di atas,

 jadi caranya seperti ini:

1. jika anda ingin membuat 6 item dalam 1 baris maka  12(Jumblah Kolom) dibagi        6(item yang ingin di tampilkan) maka hasilnya  2

2. Jika anda ingin membuat 4 item dalam satu baris maka,12(Jumblah Kolom)              dibagi  4 (item yang ingin di tampilkan) maka hasilnya  3. jadi anda mengggunakan Col-3

Contoh: 

buatlah kodingan dibawah ini

<div class="container text-center mr-2 "style="padding:50px;">

  <div class="row">

   <div class="col-4 bg-primary">

     Col-4

   </div>

   <div class="col-4 bg-secondary">

    Col-4

  </div>

  <div class="col-4 bg-primary">

    Col-4

  </div>

  </div>

</div>

Maka akan tampil seperti gambar dibawah ini. agar colom tersebut berjajar kesamping anda harus membuat class col di dalam class row 

Nah saya rasa anda mulai memahami sistem grid pada Bootstrap ini selanjutnya Membuat tampilan Lebih responsive.

Pada Bootstrap anda bisa membuat tampilan responsive dengan 

1.col-xs        = Untuk lebar layar yang lebih kecil dari 576 ( <576 ) 

2. col- sm     =Untuk Lebar layar 576 ke atas (>576)

3. col-md      =Untuk Lebar layar 768 ke atas ( > 768 )

4.col-lg         =Untuk lebar layar 992 ke atas ( > 992)

5.col-xl         =Untuk lebar layar 1200 ke atas ( >1200 ).

Setelah anda tau tentang ukuran coloumn diatas maka selanjutnya anda harus mencoba membuatnya pada Text Editor kalian. Seperti kodingan di bawah ini

<div class="container ">

  <div class="row ">

    <div class="col-sm-4 bg-primary  " style="height: 300px;">Colom 1 </div>

    <div class="col-sm-4 bg-secondary" style="height: 300px;">Colom 2 </div>

    <div class="col-sm-4 bg-primary" style="height: 300px;">Colom 3 </div>

  </div>

</div>

Maka hasilnya akan berjejer ke samping memenuih baris pertama Seperti gambar dibawah ini.

Tetapi, jika anda me resize ukuran ke 575 pada layar anda maka akan secara otomatis conten anda tersebut berjejer ke bawah dan memenuihi container, seperti gambar dibawah ini:

 Kenapa bisa berubah secara otomatis?

Karena pada saat anda memberikan kelas pada

<div class = "col-sm-4"> </div>
Maka saat ukuran layar dibawah 576, akan secara otomatis responsive. begitupun dengan 

Col-md (konten didalam akan otomatis memenuhi container dan berjejer kebawah pada saat ukuran layar 768 ke bawah).

bagaimana jika tidak diberikan class sm, md, lg, xl  ?

<div class="container ">

  <div class="row ">

    <div class="col-4 bg-primary  " style="height: 300px;">Colom 1 </div>

    <div class="col-4 bg-secondary" style="height: 300px;">Colom 2 </div>

    <div class="col-4 bg-primary" style="height: 300px;">Colom 3 </div>

  </div>

</div>

Maka pada saat anda me resize tampialn tersebut akan tetap memaksa untuk berjejer ke samping dan tidak otomatis berjejer ke bawah seperti gambar dibawah ini.

2. Membuat dua kolom Responsive yang tidak sama.

Setelah anda membuat dan memahami kolom responsive di atas maka disini saya akan menjelaskan membuat dua kolom Responsive yang tidak sama.

 Sama dengan cara sebelumnya disini kita masih membagi dua kolom dalam 1 baris yang terdiri dari 12 kolom. 

Contoh:
pada sebuah tampilan Layout anda ingin membuat Dua kolom yang mana di kolom pertama lebih kecil daripada kolom ke 2.

Pertama tama buatlah syntax dibawah ini.

<div class="container  ">

  <div class="row text-center ">

    <div class="col-12 col-md-4  bg-primary" style="height: 300px;">Colom 1 </div>

    <div class="col-12 col-md-8  bg-secondary" style="height: 300px;">Colom 2 </div>

  </div>

</div>

Penjelasan:

Pada Syntax diatas terdapat div dengan class class="col-12 col-md-4 dan class="col-12 col-md-8

col-12 (Kiri dan kanan)

Ketika ukuran layar anda 576 kebawah atau sm maka tampilan kolom kiri dan kanan akan sejajar jebawah dengan konten memenuhi baris kontainer seperti gambar dibawah ini.

col-md-4 (Kiri) col-md-8(kanan)

Ketika ukuran layar anda 768 keatas atau md maka tampilan kolom kiri dan kanan akan berbeda yang mana klom kiri hanya mengambil 4(empat) kolom sedangkan yang kanan 8(delapan) kolom, dan kolom kiri lebih kecil daripada kolom kanan.

seperti gambar dibawah ini.

Untuk class class nya sendiri bisa anda buat sesuai selera seperti kolom kiri lebih besar daripada colom kanan atau bisa di buat kolom kiri dan kanan sama sama besar cara nya sama seperti diatas hanya saja anda tinggal merubah angka didalam class kolom nya. 

Sekian dulu untuk tutorial kali ini, terimmakasih sudah menyempatkan waktunya untuk membaca dan berkunjung. 

Semoga postingan ini bermanfaat bagi pembaca yang baru mempelajari bootstrap.