cara menyembunyikan tag konten berdasarkan device di bootstrap

bagi sobat blogger yang sudah familiar dengan bootstrap berikut ini saya akan membagi tutorial cara menyembunyukan suatu div sesuai device yang digunakan pengunjung agar website yang kita buat lebih effesien tampilannya, umumnya pengunjunga banyak menggunakan smartphone untuk browsing nah di website kita kadang ada konten-konten yang tidak support dengan device yang digunakan pengunjung tampilan kontennya bisa amburadul kalau dibuka lewat hand phone, nah dengan menggunakan bootstrap kita tidak perlu menambahkan media query pada file css, bootstrap sudah menyiapkan attribut class yang dapat menyembunyikan konten berdasarkan device pengunjung
sebagai contoh table, nah umumnya tabel tidak responsive dengan device hand phone walaupun sekarang sudah banyak plugin yang membuat tebel pada website menajdi responsive, akan tetapi masih ada kelemahannya, jadi kita bisa mengatur tebel hanya terlihat pada user yang menggunakan tablet atau dekstop.

berikut beberapa attribut class pada bootstrap yang sudah tersedia yang dapat kita gunakan
hidden-xs handphone 768px
hidden-sm  tablet (≥768px)
hidden-md untuk dekstop yang resolusi layar  ≥992px
hidden-lguntuk dekstop yang resolusi layar  ≥1200px 
nah bagaimana cara penerapannya? berikut caranya:


perhatikan script HTML dibawah ini

<div class="container">

   <h3>Example teble bootstrap</h3>

  <div class="hidden-xs hidden-sm">

    <h1>this content visible with phone device or tablet</h1>

    <p>table is not visible in this device</p>

  </div>



  <div class="hidden-md hidden-lg">

    <h1>this content visible with phone device</h1>

    <table class="table">

    <thead>

      <tr>

        <th>Firstname</th>

        <th>Lastname</th>

        <th>Email</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>John</td>

        <td>Doe</td>

        <td>john@example.com</td>

      </tr>

      <tr>

        <td>Mary</td>

        <td>Moe</td>

        <td>mary@example.com</td>

      </tr>

      <tr>

        <td>July</td>

        <td>Dooley</td>

        <td>july@example.com</td>

      </tr>

    </tbody>

  </table>

  </div>

<div>

pada script HTML diatas terdapat div dengan attribut class hidden-xs dan hidden-sm dimana atrribut tersebut akan dihidden jika terlihet dengan menggunakan handphone atau tablet
untuk contoh demo dapat dilihat dibawah ini

See the Pen ZQmGVK by Budi Setiawan (@bizanniusz) on CodePen.

Keterangan :
pada contoh demo diatas table terlihat hanya pada ukuran device hand phone atau tablet, karena ukuran dari with demo  ini sama seperti tablet atau hand phone table akan terlihat, dan sebaliknya jika kita membuka menggunakan dekstop table tidak akan tampil ( di sembunyikan ).
tags: tutorial bootstrap, belajar bootstrap, cara menggunakan bootstrap