Bootstrap menyediakan berbagai kelas untuk membantu Anda membuat website yang responsif dan dapat beradaptasi dengan berbagai perangkat, mulai dari smartphone hingga desktop. Berikut adalah beberapa kelas responsif Bootstrap yang umum digunakan:
Kelas Visibilitas:
.visible-*: Menampilkan elemen pada semua perangkat. Gunakan * dan ganti dengan sm, md, lg, atau xl untuk menyembunyikan elemen pada perangkat tertentu.
.hidden-*: Menyembunyikan elemen pada semua perangkat. Gunakan * dan ganti dengan sm, md, lg, atau xl untuk menampilkan elemen pada perangkat tertentu.
Contoh:
HTML
$$
<div class="visible-md-up">Konten ini akan ditampilkan pada tablet dan desktop.</div>
<div class="hidden-sm-down">Konten ini tidak akan ditampilkan pada ponsel.</div>
$$
Kelas Sistem Grid:
Bootstrap menggunakan sistem grid dengan kelas responsif untuk mengontrol perilaku kolom. Berikut beberapa kelas umum:
.col-*: Menentukan jumlah kolom yang dicakup elemen (misalnya, .col-sm-6 untuk 6 kolom pada perangkat kecil).
.col-*-offset-*: Menggeser kolom dengan sejumlah kolom tertentu (misalnya, .col-md-6 .col-md-offset-3 membuat kolom dimulai pada posisi ke-4 pada perangkat menengah).
Contoh:
HTML
$$
<div class="row">
<div class="col-sm-6">Konten untuk layar kecil (ponsel)</div>
<div class="col-md-4 col-md-offset-2">Konten untuk layar menengah (tablet) mulai dari kolom ke-3</div>
</div>
$$
Media Query:
Meskipun Bootstrap menyediakan kelas-kelas pra-definisi ini, Anda juga dapat menggunakan media query untuk kontrol yang lebih granular. Media query menargetkan ukuran layar tertentu dan memungkinkan Anda untuk mendefinisikan gaya khusus.
Kelas Responsif Tambahan:
.text-*: Menyesuaikan ukuran font berdasarkan ukuran perangkat (misalnya, .text-lg untuk font yang lebih besar pada layar yang lebih besar).
.pull-left/.pull-right: Mengapungkan elemen ke kiri atau kanan secara responsif.
Catatan:
Lihat dokumentasi Bootstrap untuk daftar lengkap kelas: https://getbootstrap.com/docs/5.0/layout/grid/
Gabungkan kelas-kelas ini untuk mencapai tata letak responsif yang kompleks.
Uji situs web Anda secara menyeluruh pada berbagai perangkat untuk memastikan pengalaman menonton yang optimal.
Sumber:
