Tips Menyembunyikan elemen pada Bootstrap 4

14/07/2018    Maykhel David    1254     Website

Tips Menyembunyikan Elemen pada Bootstrap 4 - Untuk pengembangan tampilan responsive yang lebih cepat, kita bias gunakan class tampilan responsif untuk menampilkan dan menyembunyikan elemen berdasarkan lebar layar perangkat yang digunakan. Hindari membuat versi website yang memiliki tampilan yang sama sekali berbeda, sebagai gantinya sembunyikan elemen secara responsif untuk setiap ukuran layar.

Untuk menyembunyikan elemen cukup gunakan kelas .d-none atau salah satu dari class .d- {sm, md, lg, xl} untuk semua variasi layar responsif.

Untuk menampilkan elemen hanya pada ukuran layar tertentu, kita dapat menggabungkan class .d - * - none dengan ckass  .d - * - *, misalnya .d-none .d-md-block .d-xl-none yang akan menyembunyikan elemen untuk semua ukuran layar kecuali pada perangkat ukuran md dan lg.

Screen Size

Class

Hilang pada semua ukuran

.d-none

Hilang hanya pada xs

.d-none .d-sm-block

Hilang hanya pada sm

.d-sm-none .d-md-block

Hilang hanya pada md

.d-md-none .d-lg-block

Hilang hanya pada lg

.d-lg-none .d-xl-block

Hilang hanya pada xl

.d-xl-none

Terlihat pada semua ukuran

.d-block

Terlihat hanya pada xs

.d-block .d-sm-none

Terlihat hanya pada sm

.d-none .d-sm-block .d-md-none

Terlihat hanya pada md

.d-none .d-md-block .d-lg-none

Terlihat hanya pada lg

.d-none .d-lg-block .d-xl-none

Terlihat hanya pada xl

.d-none .d-xl-block

 

Berikut ini adalah contoh penggunaan  jika ingin menyembunyikan elemen pada ukuran yang lebih besar dan lebih kecil dari lg

 

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

 

Jika sebelumnya pada bootstrap 3 kita pernah membahas tentang cara menyembunyikan elemen dengan menggunakan class .hidden-* sekarang ini class tersebut sudah tidak bisa digunakan lagi dan diganti dengan daftar class seperti diatas.

Penyebab digantinya class hidden pada bootstrap 3 adalah dikarenakan ada konflik antara class bootstrap dengan method pada jquery, sehingga harus diubah pada versi 4.

Baiklah teman teman demikian artikel tentang Tips Menyembunyikan elemen pada Bootstrap 4. Jika ada yang bingung bisa langsung ditanyakan ya. Semoga bermanfaat. Terima kasih

Bootstrap

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More