Bootstrap Layout

Cara Menggunakan Grid System

Referensi

 

Bootstrap Layout

Bootstrap 5 menyediakan berbagai macam komponen untuk memudahkan pembuatan layout pada halaman web. Beberapa komponen tersebut adalah grid system, spacing utilities, dan flexbox utilities. Pada kesempatan kali ini kita akan menggunakan grid system.

Grid system merupakan fitur dari bootstrap 5 yang digunakan untuk mengatur tata letak (layout). Sistem ini terdiri dari 12 kolom dan 6 breakpoint. Satu kolom penuh panjangnya adalah 12. Jika kolom dibagi dua maka panjangnya akan menjadi 6 dst. Kita bisa mengambil dokumentasi dari grid system ini pada web bootstrap 5 yang memudahkan kita dalam mengelola tata letak pembuatan web.

Dalam kesempatan kali ini kita akan membuat program untuk membuat tata letak (layout) menggunakan bantuan bootstrap 5. Dalam pembuatan layout ini ada beberapa class yang perlu diperhatikan juga, yaitu:

1.    Class Container

Container adalah fondasi dasar dari blok layout. Container berfungsi untuk mewadahi kolom dan baris di dalamnya, sehingga terlihat rapi terhadap ukuran layar.

Ukuran kontainer akan 100% pada breakpoint tertentu. Misalnya, jika kita menggunakan class container-md maka lebar kontainer akan 100% pada layar Extra Small dan Small. Dalam bootstrap 5 ini, container dapat dibagi menjadi 3 (tiga) sesuai dengan kegunaan dan fungsinya masing-masing, yaitu:

a)      Container, ukuran pada layar namun memiliki white space dibagian kiri dan kanannya.

b)      Container-fluid, ukuran maksimal dari seluruh layar.

c)       Container-{breakpoint}, ukuran maksimal dari seluruh layar dengan breakpoint yang ditentukan.

 

2.    Class Row and Column

Class row dan col merupakan class untuk membuat baris dan kolom. Kedua class ini lah yang kita gunakan untuk membuat grid.

Class row berfungsi untuk membuat baris. Class ini menggunakan flex, namun breakpoint tidak berlaku untuk class ini. Sedangkan class col berfungsi untuk membuat kolom. Class ini harus dibungkus oleh class row agar menjadi grid. Class col memiliki ukuran dan breakpoint. Ukuran paling panjang adalah 12, dan ukuran paling pendek adalah 1.

3.    Class Gutter

Gutter adalah jarak antar kolom. Class gutter ditulis bersamaan dengan class row dengan format penulisannya menggunakan huruf g. Gutter mempunyai ukuran mulai dari 0 sampai 5. Class gutter ini dibagi lagi menjadi tiga yaitu:

a)      Class gx adalah Gutter untuk horizontal.

b)      Class gy adalah Gutter untuk vertikal.

c)       Class g saja adalah Gutter untuk horizontal dan vertikal.

 

 

4. Breakpoint

Breakpoint adalah ukuran lebar yang menentukan tampilan responsif terhadap ukuran viewport perangkat tertentu. Saat ini Bootstrap memiliki 6 ukuran Breakpoint, yakni xs, sm, md, lg, xl, dan xxl.

Gambar 1.6 Breakpoint pada bootstrap 5.

 

Pada gambar diatas nilai default breakpoint adalah xs atau sekitar 576px. Kenapa seperti itu? Karena bootstrap 5 ini menggunakan pendekatan mobile-first dimana kita harus memikirkan tampilan mobile terlebih dahulu sebelum membuat tampilan di web.

Cara Menggunakan Grid System

Mari kita bayangkan jika memiliki sebuah proyek yang bekerja sama dengan divisi UI/UX. Lalu kita ditugaskan untuk membuat tampilan web yang sama dan sesuai dengan divisi UI/UX berikan. Kita akan menerapkan grid system untuk menyesuaikan tata letak dari tampilan web yang diberikan. Untuk membuat tampilan web menjadi responsive, kita memerlukan breakpoint untuk menentukan ukuran lebar terhadap perangkat desktop, tablet, dan smartphone.

1.   Buat folder dengan nama bebas dan buka visual studio codenya.

2.   Buat file bernama index.html kita memprogram nantinya.

3.   Didalam index.html kita buat struktur html dan import bootstrap 5 nya.

4.   Buat judul pada tampilan web dan masukkan beberapa text atau paragraf sebagai penjelasan.

 

Pada program diatas kita membuat container-fluid sebagai luaran utama sehingga tampilan awal web menerapkan seluruh layar maksimal. Kemudian di dalamnya ada container, bertujuan agar baris dan kolom didalamnya terdapat white space atau ada margin dibagian kiri dan kanan container. Py-5 digunakan untuk membuat padding atas dan bawah pada container bernilai 5. Col-md-6 dan col-lg-5 adalah sebuah class untuk menerapkan jumlah kolom pada breakpoint tertentu, md-6 yang berarti saat breakpoint medium jumlah kolom ada 6, sedangkan untuk lg-5 berarti saat breakpoint large jumlah kolom ada 5. Offset-lg-1 digunakan untuk melewati 1 kolom di bagian kiri saat breakpoint large. Sehingga jumlah kolom ada 12, namun didalamnya hanya ada 11 bagian kolom yang digunakan. Order-2 berfungsi untuk mengontrol urutan visual pada tampilan web menjadi urutan kedua.

 

 

5.   Selanjutnya kita buat konten baru di bawahnya untuk membuat koleksi foto.

Pada program diatas kita membuat container-fluid untuk membungkus konten yang baru yaitu koleksi foto. Di Dalam container-fluid terdapat container agar isi didalamnya memiliki white space atau margin pada kiri dan kanan. Col-lg-2 col-md-4 col-sm-6 adalah sebuah class untuk menerapkan kolom pada breakpoint tertentu yaitu lg (large), md (medium), dan sm (small). Class inilah yang digunakan untuk membuat tampilan web menjadi responsive. Kemudian pada class image terdapat img-fluid yang berfungsi untuk membuat gambar menyesuaikan ukurannya secara otomatis dengan lebar parent element atau container di mana gambar tersebut ditempatkan. Selanjutnya terdapat width: 100% yang berfungsi gambar tidak melebihi ukuran lebar parent element atau container.

 

6. Selanjutnya kita membuat konten ketiga yang berisikan gambar, text, dan button.

 

Pada program diatas kita membuat container-fluid untuk membungkus konten yang baru yang berisi gambar, text, dan button. Di Dalam container-fluid terdapat container agar isi didalamnya memiliki white space atau margin pada kiri dan kanan. Selanjutnya kita membuat konten ketiga yang berisikan gambar, text, dan button. Class btn-secondary berfungsi untuk memberikan warna pada button.

 

Tugas: Membuat tampilan web yang responsive menggunakan grid system.

 

 

 

 

 

 

 

 

Referensi

 

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout (petanikode.com)