Cari tahu yuk cara kerja Bootstrap utilities visible and hidden. Mungkin teman-teman cukup kesulitan ketika ingin menggunakan class visible dan hidden yang terdapat pada CSS Framework Bootstrap. Sebenarnya tidak terlalu sulit, jadi mari kita coba cari tahu cara kerja dari class tersebut, supaya lebih jelas.
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Visible | Hidden | Hidden | Hidden |
.visible-sm-* |
Hidden | Visible | Hidden | Hidden |
.visible-md-* |
Hidden | Hidden | Visible | Hidden |
.visible-lg-* |
Hidden | Hidden | Hidden | Visible |
.hidden-xs |
Hidden | Visible | Visible | Visible |
.hidden-sm |
Visible | Hidden | Visible | Visible |
.hidden-md |
Visible | Visible | Hidden | Visible |
.hidden-lg |
Visible | Visible | Visible | Hidden |
Tabel diatas merupakan nama-nama class yang sudah ditentukan untuk setiap ukuran layar. Kuncinya teman-teman harus mengetahui kapan class tersebut terpanggil.
Untuk file dan demonya silahkan teman-teman unduh dibawah artikel ini, kemudian jalankan di browser, lalu simulasikan ukuran layar dengan mengatur ukuran browser (responsive design mode).
Untuk artikel saat ini yang teman-teman baca, sebagai referensi detailnya bisa dilihat di situs bootstrap
Referensi
url: https://getbootstrap.com/docs/3.3/css/#responsive-utilities
Demo
url: http://www.yellowweb.id/demo/bootstrap-utilities/
Download
url: https://www.dropbox.com/s/7p95lb1mwmgjdko/bootstrap-utilities.zip?dl=0