Tips Menyembunyikan elemen pada Bootstrap 4

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.

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