Hidden Kolom dengan Bootstrap 4

Bootstrap adalah salah satu framework CSS yang sangat populer dikalangan web developer. Dengan menggunakan framework kerja kita akan lebih cepat dan hasilnya cukup maksimal mengingat bootstrap adalah framework yang responsive. Sehingga kita tidak perlu pusing mengatur layout pada media yang lebih kecil. Baru-baru ini bootstrap telah meluncurkan versi 4. Ada beberapa perubahan dari segi penamaan kelas mulai dari kelas baru dan juga ada yang sudah tidak digunakan. Salah satu class baru bootstrap 4 adalah hidden kolom. Ya, kita akan belajar bagaimana cara hidden kolom dengan Bootstrap 4.

Jika kalian sudah pernah menggunakan bootstrap maka kalian tidak asing dengan perintah hidden-**. Namun perintah tersebut sudah tidak digunakan lagi untuk menyembunyikan kolom. Terdapat perintah baru untuk menggantikan perintah yang lama yaitu dengan d-none. Jika kalian menambahkan perintah d-none pada class kalian maka kolom tersebut akan disembunyikan. Bagaimana cara menggunakanya kalian bisa ikuti contoh code berikut ini.

hidden.html

<html>
<head>
	<meta charset="UTF-8">
	<title>Hidden dengan Bootstrap 4</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">	
        <link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div class="row text-center">
			<div class="col-md-4 d-none">
				<div class="item green">
					<h1>Test1</h1>
					<p>Lorem Ipsum Wasowakete Is Waluwa</p>
				</div>
			</div>
			<div class="col-md-4 ">
				<div class="item red">
					<h1>Test2</h1>
					<p>Lorem Ipsum Wasowakete Is Waluwa</p>
				</div>
			</div>
			<div class="col-md-4 ">
				<div class="item blue">
					<h1>Test3</h1>
					<p>Lorem Ipsum Wasowakete Is Waluwa</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

style.css

.item{			
			padding: 20px; 
			margin-bottom: 20px;
		}
		.red{
			background: red;
		}
		.green{
			background: green;
		}
		.blue{
			background: blue;
		}
		.container{
			margin-top: 50px;
			color: white;
		}

Setelah sudah kalian simpan kedua file tersebut sesuai dengan namanya pada contoh diatas dan simpan dalam satu folder yang sama. Untuk melihat hasilnya kalian bisa buka file html pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

hidden-kolom-dengan-bootstrap-4-rangga1-040917

Gambar diatas adalah tampilan awal. Sekarang kalian masukan class d-none pada salah satu kolom saja dan lihat apa yang terjadi.

hidden-kolom-dengan-bootstrap-4-rangga2-040917

Kolom tersebut akan hilang. Jika kalian kecilkan browser maka kolom tersebut tetap hilang. Jadi d-none ini akan menghilangkan kolom disetiap lebar baik itu lebar untuk xs, sm , md , lg dam xl.

Sekian pembahasan mengenai hidden kolom dengan Bootstrap 4. Semoga bermanfaat.

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 *