Memahami dan Membuat Grid pada Bootstrap

5/5 (33)
Memahami dan Membuat Grid pada Bootstrap
Memahami dan Membuat Grid pada Bootstrap

Memahami dan Membuat Grid pada Bootstrap – Selamat datang di tutorial Bootstrap! Kali ini kita akan membahas cara membuat Grid untuk Layouting di Bootstrap. Pada tutorial sebelumya kita telah mempelajari tentang Bootstrap dan cara penggunaan nya. Pada kali ini dan beberapa artikel kedepan kita akan membahas lebih dalam tentang Bootstrap.

Baca juga: Pengertian dan Cara Menggunakan Bootstrap

Apa itu Grid?

Sistem grid memudahkan kita mengatur tata letak elemen di web. Kebanyakan orang dulu menggunakan tag table untuk mengatur tata letaknya. Semenjak ada Bootstrap, sekarang pengaturan tata letak tidak menggunakan cara seperti dulu lagi karena memang tidak SEO Friendy. Kita hanya perlu menggunakan 3 class untuk membuatnya. Berikut tiga class yang saya maksud,

  • Class .container
  • Class .row
  • Class .col-

Apa Perbedaanya?

  1. Class .container memiliki dua jenis, yaitu .container yang ukurannya tetap (fixed), dan .container-fluid yang ukurannya menyesuaikan browser
  2. .Selanjutnya ada class .row, class ini sama seperti tag <tr>.
  3. Class .col. Jika .row sama dengan tag <tr>, class .col sama seperti tag <td> dan memiliki beberapa jenis ukuran yaitu col-xs- (Extra Small), col-sm- (Small), col-md- (Medium), dan col-ld- (Large).

Memahami dan Membuat Grid pada Bootstrap

Sekarang mari kita coba konsep grid diatas dengan membuat kode HTML.

<div class="col" style="background-color: lavender;">.col</div>
<div class="col" style="background-color: orange;">.col</div>
<div class="col" style="background-color: lavender;">.col</div>

Dan hasilnya akan menjadi:
Memahami Membuat Grid pada Bootstrap
Memahami Membuat Grid pada Bootstrap

Kita juga bisa memberi ukuran pada .col, lihat contoh berikut;

<div class="container">
  <h1>Memahami dan Membuat Grid pada Bootstrap | codelatte.org</h1>
  <p>Memberi ukuran pada <code>.col</code></p>
  <div class="row">
    <div class="col-sm-2" style="background-color:lavender;">.col-sm-2</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
    <div class="col-sm-6" style="background-color:lavender;">.col-sm-6</div>
  </div>
</div>

Hasilnya akan menjadi seperti ini:
Memberi Ukuran pada .col
Memberi Ukuran pada .col

Perlu Diingat! dalam pembuatan website, element kontainer bebas digunakan berapa kali. Jadi kalian bisa memisahkan kontainer untuk membuat header, artikel dan footer.

Nah sampai sini dulu pembahasan tentang Memahami dan Membuat Grid pada Bootstrap. Jika masih kurang paham, jangan malu untuk bertanya, silahkan tinggalkan komentar.

Referensi: Petani Kode

Pada artikel selanjutnya kita akan memperlajari tentang Tipografi atau cara penulisan pada Bootstrap. Semoga bermanfaat dan sampai jumpa di artikel selanjutnya!

Bagi kalian yang bingung menggunakan class pada Bootstrap, saya sediakan list di arc.codelatte.org/bs-cheatsheet.

Please rate this

Abay

Cheers, I am Abay and I make things for fun. Gudang Garam and Coffee i can't live without. I love turning exciting ideas into horrible code. And .. i'm a lil' boy currently living Indonesia. Want to buy me a coffe? Let's talk, abay@codelatte.org

2 tanggapan untuk “Memahami dan Membuat Grid pada Bootstrap

  • 12 Oktober 2018 pada 5:44 PM
    Permalink

    Mantaap, ini yang aku cari, hehe

    Balas

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *