Tutorial Bootstrap 4 #4 : Grid System Bootstrap 4


grid system pada bootstrap

Grid System Bootstrap 4 – Selamat datang kembali di tutorial bootstrap 4 lengkap berbahasa indonesia. Tutorial ini merupakan tutorial bagian ke 4 dalam seri tutorial bootstrap 4 di malasngoding.com.

Pada tutorial ini kita akan belajar tentang grid system pada bootstrao 4.

Silahkan baca juga tutorial grid system pada bootstrap 3 yang sudah pernah dibahas sebelumnya untuk menambah referensi teman-teman.

Ada beberapa perbedaan dari penggunaan grid system bootstrap 3 dan bootstrap 4. Apa saja perbedaan nya akan kita bahas pada artikel ini dengan membahas ulang dari dasar.

Sehingga mudah-mudahan bisa memberikan pemahaman lebih tentang grid system pada bootstrap 4, sekaligus bisa memberikan pemaparan perbedaan antara grid system pada bootstrap versi 3 dan bootstrap versi 4.

Grid System Bootstrap 4

Grid system adalah sistem pengaturan lebar untuk masing-masing komponen yang ingin kita buat. pengaturan ini bertujuan untuk mengatur ke-responsive-an website yang kita buar.

Jadi kita bisa mengaturnya sesuai yang kita inginkan dengan sangat mudah. tanpa harus menulis coding css secara manual untuk membuat halaman yang responsive.

Ada 12 grid pada bootstrap. yang bisa kita analogikan sebagai 12 kotak yang bisa kita atur lebarnya dengan mudah.

Ada beberapa jenis class dasar dari bootstrap 4 untuk mengatur grid, di antaranya adalah :

  • .col-*
    digunakan untuk mengatur grid secara otomatis
  • .col-sm-*
    digunakan untuk mengatur grid pada ukuran layar monitor  yang berukuran kecil ( >=576px )
  • .col-md-*
    digunakan untuk mengatur grid pada ukuran layar monitor yang berukuran sedang ( >=720px )
  • .col-lg-*
    digunakan untuk mengatur grid pada ukuran layar monitor yang berukuran besar ( >=992px )
  • .col-xl-*
    digunakan untuk mengatur grid pada ukuran layar monitor yang berukuran ekstra besar ( >=1200px )

Pada urutan pertama ada class col-*, col-* digunakan untuk mengatur grid secara default. misalnya jika di akses dari layar yang berukuran kecil, besar ataupun ekstra besar, ukuran gridnya akan tetap dan tidak berubah. jadi mau dibuka dari ukuran layar berapa pun, hasilnya akan tetap mengikuti pengaturan grid col-* yang sudah ditetapkan.

col-sm-* digunakan untuk mengatur grid jika halaman website diakses dari ukuran layar yang kecil seperti smartphone, maka pengaturan class col-sm-* lah yang akan digunakan.

Masih bingung ? tenang. kita masuk ke contoh cara penggunaannya, agar teman-teman bisa melihat contoh perbedaan dari masing-masing grid di atas.

Contoh Grid Bootstrap 4

Contoh pertama ini kita akan menggunakan class .col-md-*, nanti teman-teman bisa bereksperimen sendiri.

Perhatikan pada contoh di atas, seperti biasa jika ingin menggunakan bootstrap, kita harus menghubungkannya terlebih dulu, silahkan teman-teman baca tutorial sebelumnya tentang cara menggunakan bootstrap 4. jika teman-teman belum membaca cara menghubungkan bootstrap.

Oh ya, kita juga wajib menggunakan class row jika ingin menggunakan class grid system ini. seperti pada contoh coding di atas.

Dan kita juga bisa menggunakan class containers (container atau container-fluid) untuk mengatur ukuran layout utamanya.

BACA : Tutorial Bootstrap 4 #3 : Containers Pada Bootstrap 4

Pada contoh di atas saya membuat contoh penggunaan class col-md-*. karena kita belum akan belajar tentang grid masing-masing ukuran layar seperti yang diuraikan di atas, Karena fokus pertamanya agar teman-teman paham tentang konsep grid system pada bootstrap terlebih dulu. baru kemudian kita akan masuk ke class grid lainnya.

Dimana sebelumnya saya sudah menyinggung kalau bootstrap memiliki 12 grid. jadi maksudnya sebuah halaman website dibagi menjadi 12 kotak atau bagian jika menggunakan bootstrap.

Karena ini adalah trik dan solusi yang mudah dari bootstrap untuk membuat halaman website yang responsive.

Langsung saja kita lihat hasil contohnya. Jalankan pada browser.

Grid System Bootstrap 4

Grid System Bootstrap 4

Perhatikan pada coding sebelumnya, dimana kita membuat berbagai class col-md-*, mulai dari col-md-1 sampai col-md-12. silahkan teman-teman lihat perbedaannya. karena setiap halaman memiliki 12 grid, maka jika kita menggunakan col-md-12, maka ukurannya akan penuh seukuran 12 grid (kotak biru pertama pada gambar).

Begitu juga pada kotak di baris kedua, jika kita menggunakan col-md-6, maka ukurannya sebesar 6 grid. jadi ukurannya menjadi setengah dari 12. begitu juga seterusnya sampai col-md-1.

LIHAT DEMO

Grid System Bootstrap 4

 


Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

Tutorial Menarik Lainnya

border bootstrap 4
tooltips bootstrap 4
spinners bootstrap 4

Diskusi

Belum Ada Diskusi

Tulis Komentar / Pertanyaan

Download ebook belajar HTML & CSS dasar untuk pemula gratis

Download Ebook belajar HTML & CSS dasar untuk pemula gratis.

Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana. materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.

DOWNLOAD