Sistem Grid (Bootstrap 4)

Sistem Grid memungkinkan kita untuk mengatur konten web secara benar. Membagi layar menjadi beberapa baris dan kolom adalah cara terbaik untuk membuat berbagai layar untuk setiap jenis website.

Sistem grid pada bootstrap mempunyai pembagian kolom hingga 12 pada setiap baris. Setiap lebar baris bervariasi sesuai dengan ukuran layar yang ditampilkan. Grid bootstrap responsive dan setiap baris akan menjadi baris baru pada breakpoint tertentu atau dapat ditampilkan secara rapih di area pandang yang berbeda.

Bootstrap memungkinkan pengguna untuk membuat sejumlah besar baris tergantung pada desain website. Dalam bootstrap 4, kita bekerja dalam unit satuan rem dan em bukan pixel. Meskipun beberapa nama class tetap, ada class sm tingkat baru, ditargetkan untuk perangkat mobile sehingga menghasilkan tampilan yang lebih baik.

Pada artikel ini, kita akan mempelajari sistem grid pada bootstrap 4. Anda akan belajar bagaimana sistem grid dapat bekerja dan bagaimana Anda dapat menggunakannya pada project website Anda.

Membuat Basic Grid

Kita akan mencoba membuat basic grid dengan menggunakan sistem grid pada bootstrap. Pertama, Anda harus membuat file index.html kemudian copy paste script dibawah ini.

s1

Untuk membuat layout yang simple, buat div dengan sebuah class container. Letakkan semua rows dan columns ke dalam container ini dalam satu order untuk memiliki tempat yang penuh dalam screen. Ada 2 macam tipe container :

  • container – untuk lebar yang fixed/ fixed-width (tidak ada tambahan space di kedua sisi)
  • container-fluid – untuk lebar yang full (liquid seperti grids)

Kita akan menggunakan fixed-width (container) pada artikel ini. Pertama tambahkan container di dalam halaman HTML :

s2

Kemudian kita akan membuat class row didalam container. Setelah row dibuat, barulah kita dapat memulai membuat columns. Anda dapat meletakkan serangkaian rows di dalam container.

Tip: Untuk hasil yang sempurna, dianjurkan untuk hanya memiliki satu container dengan berberapa rows didalamnya sehingga akan membuat tampilan wrap (lurus) antar masing-masing row dan element-element akan ter center didalam screen.

s3

Bootstrap columns dapat dibuat dengan spesifik pada class col dan tambahkan prefix size sebagai ukuran dengan skala 12.

Bootstrap 4 memiliki 5 tipe class predix untuk membuat colums dengan ukuran yang berbeda :

  1. col-xs untuk tampilan extra small (lebar layar < 34em)
  2. col-sm untuk tampilan smaller (lebar layar > 34em)
  3. col-md untuk tampilan medium (lebar layar > 48em)
  4. col-lg untuk tampilan larger (lebar layar >62em)
  5. col-xl untuk extra large (lebar layar >75em)

Katakanlah kita memiliki hanya satu column. Itu dapat mencakup 12 column bootstrap. Jadi kita bisa menggunakan class col-xs-12, dengan jumlah 12 column span.

Sebagai contoh, buat lah 3 column yang sama lebar dalam satu row. Kita dapat menggunakan class col-xs-4. Perhatikan code dibawah ini.

s4

Catatan : Kita menambahkan class col-1, col-2, col-3 agar column yang telah kita buat terlihat jelas. Tambahkan masing-masing class dengan warna background yang berbeda.

s5

Maka kita akan mendapatkan hasil berikut :

g1Pada code diatas, kita menggunakan class col-sm-4 yang artinya element memiliki 3 grid dengan masing-masing column dengan ukuran layar kecil.

Mudahkan.. Lalu bagaimana jika kita menginginkan hal ini berlaku berbeda pada layar besar ?

Pada code diatas, kita belum menentukan bagaimana div dapat menjangkau pada jenis layar yang lebih besar. Secara default Bootstrap otomatis akan mensetup layout untuk ukuran layar yang lebih besar. Perhatikan code di bawah ini.

s6

Pada code diatas kita menset up class col-lg-12 untuk tampilan large (dengan lebar layar > 62em) dan class col-sm-4 untuk layar kecil (dengan lebar layar > 34em)

Itu artinya pada layar kecil masing-masing akan terbagi menjadi 3 column (3 grid), sedangkan pada layar yang lebih lebar akan menjadi satu grid dengan lebar yang full (12-column). Perhatikan hasilnya dibawah ini.

g2

Comments

comments