Menampilkan pada Kolom Tertentu dengan Bootstrap 4

Sebelumnya kita sudah mempelajari bagaimana cara menyembunyikan kolom dengan Bootstrap 4, yaitu dengan menggunakan perinta class d-none. Pada artikel kali ini kita akan belajar bagaimana cara menampilkan pada kolom tertentu dengan bootstrap 4. Jadi kita bis mengatur kolom pada html kita untuk ditampilkan pada media tertentu. Sehingga nantinya tampilan website kita bisa lebih variatif dan lebih dinamis untuk mengatur kolom tersebut.

Cara kerjanya sedikit berbeda dengan bootstrap versi 3. Sebagai contoh pada versi 3 kita cukup menuliskan class hidden-md yang artinya kolom akan disembunyikan pada media medium, selain itu kolom akan tetap tampil. Sedangkan pada versi 4 kita harus menulis 2 class. Class pertama adalah class d-none yang berarti kolom akan disembunyikan pada media apapun. Setelah menuliskan class d-none kita lanjut dengan mengetikan class d-**-block. Artinya kita bisa tuliskan pada media apa kolom akan ditampilkan.

Untuk lebih jelasnya kalian bisa salin contoh code dibawah ini agar mempersingkat waktu.

tampilan.html

<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
  <div class="row">
      <div class="col-md-4 red d-none d-md-block"></div>
      <div class="col-md-4 green"></div>
      <div class="col-md-4 blue"></div>
  </div>
</div>
</body>
</html>

style.css

.col-md-4{
          
          height: 200px;
      } 
      .red{
        background: red;
      }
      .green{
        background: green;
      }
      .blue{
        background: blue;
      }

Setelah sudah kalian bisa simpan file tersebut dalam satu folder yang sama. Untuk melihat hasilnya kalian bisa buka file html tersebut pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

menampilkan-pada-kolom-tertentu-dengan-bootstrap-4-rangga1-050917

sekarang kalian coba kecilkan untuk ukuran medium. Maka tampilanya akan seperti ini.

menampilkan-pada-kolom-tertentu-dengan-bootstrap-4-rangga2-050917

Artinya class d-none itu akan menyembunyikan kolom pada setiap media, lalu kita tambahkan class d-md-block yang artinya kolom akan ditampilkan pada media medium ke atas (md, lg dan xl) selain dari itu akan disembunyikan. Seperti itu cara kerjanya. Mudah bukan ?

Sekian pembahasan mengenai menampilkan pada kolom tertentu dengan bootstrap 4. Semoga pembahasan artikel ini dapat bermanfaat dan menjadi inspirasi bagi kalian semua. Sampai jumpa pada artikel menarik dan tidak kalah seru selanjutnya.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *