Para pengguna framework Bootstrap pasti sering lihat hidden dan visible, misalnya hidden-xs dan visible-xs. Apa artinya hidden dan visible di Bootstrap ?

Bootstrap merupakan framework yang dapat digunakan oleh pengembang web manapun, baik dari pemula bahkan sampai kelas senior. Dari sekian banyak class yang disediakan oleh Bootstrap dan siap pakai, kali ini kita bahas hanya hidden dan visible saja. Sedikit-sedikit lama-lama menjadi bukit.

hidden

hidden adalah menyembunyikan bagian dari penampilan, penggunaannya perlu ditambahkan -xs untuk perangkat extra small, -sm untuk perangkat small, –md untuk perangkat medium, dan -lg untuk perangkat large.

Contoh:

<div class="container our-partners hidden-xs hidden-sm">
  <div class="col-xs-12 judul-our-services">
    <h2 class="text-center">Our Partners</h2>
  </div>
  <div class="row">
    <div class="col-md-1">
      <img src="media/image/logo-partners/1.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/2.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/3.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/4.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/5.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/6.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/7.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/8.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/1.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/2.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/3.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/4.jpg" class="img-responsive">
    </div>
  </div>
</div>

Lihat pada baris pertama, terdapat hiddex-xs dan hidden-sm. Artinya div / bidang ini akan disembunyikan di perangkat extra small dan perangkat small, selain 2 perangkat tersebut tetap tampil seperti biasa.

• xs / extra small = smartphone
• sm / small = tablet
• md / medium = laptop, PC
• lg / large = lebih besar

Silahkan sesuaikan pada perangkat mana kamu ingin menyembunyikan bagian.

visible

visible berfungsi untuk HANYA menampilkan bagian di perangkat yang ditentukan, secara default Bootstrap membuat semua bagian terlihat dan tidak disembunyikan. Kamu bisa HANYA menampilkan bagian di perangkat yang kamu tentukan menggunakan visible dan ditambah jenis perangkatnya misalnya -xs.

Contoh:

<div class="container our-partners visible-sm">
  <div class="col-xs-12 judul-our-services">
    <h2 class="text-center">Our Partners</h2>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <img src="media/image/logo-partners/1.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/2.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/3.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/4.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/5.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/6.jpg" class="img-responsive">
    </div>
  </div>
</div>

Lihat pada baris pertama, terdapat visible-sm yang artinya bagian ini hanya tampil di perangkat small. Selain perangkat small, bidang ini tidak akan tampil.

Ya, cara kerja ini kebalikan dari hidden. Jadi, pengguna bisa lebih cepat mengatur tampilan. Misalnya ingin menampilkan bidang A hanya di small, tidak perlu menulis 3 hidden tapi cukup menulis 1 visible saja yaitu visible-sm maka bagian A hanya tampil di perangkat small.

Gimana ? berhasil kan ?

Setelah membaca postingan ini, mungkin ada yang bertanya tentang ukuran dari sm, ukuran xs, md, dan lg. Berapa ukurannya ?

Ukuran xs, sm, md, lg

Berikut ini ukuran dari masing-masing class:

• xs / extra small = ukuran kurang dari 768px
• sm / small = ukuran 768px sampai 991px
• md / medium = ukuran 992px sampai 1199px
• lg / large = ukuran 1200px ke atas

Silahkan dicoba masing-masing ukuran dan class-nya, benar atau salah ?

hidden dan visible ini saya jelaskan sekaligus praktekan di tutorial membuat website responsive dengan Bootstrap part 9 / 10.