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.

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

14 Juli 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat