Cara Membuat Kolom Menjadi Sama Rata Menggunakan Bootstrap

Membuat kolom pada bootstrap sangat mudah untuk kalian yang sudah mengerti HTML5 dan CSS3, maka penggunaan bootstrap sangatlah mudah, tetapi jika kalian baru saja belajar html5 dan css3 agak sulit untuk membaca struktur dari framework ini tapi jika kalian ingin berusaha dengan tekun tidak menutup kemungkinan ini akan terasa lebih mudah, kali ini saya akan berbagi ilmu tentang Cara Membuat Kolom Menjadi Sama Rata Menggunakan Bootstrap

pasti semua pernah merasakan ketika kita mengisi suatu kata pada kolom bootstrap pasti tidak sama rata dengan yang lainnya, terkecuali kata kata dibuat sama semua, maka hasilnya akan terlihat rapid an terlihat sama rata, nah gimana dengan text yang berbeda beda tapi ingin sama rata? Berikut hasil pengujiannya, teman teman bisa siapkan sebuah text editor untuk kita memulai mengerjakannya, oke jika sudah teman teman bisa download terlebih dahulu file bootstrapnya dan masukkan scriptnya dibawah sini :

<head>
		<title>Demo with jQuery</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	    <meta name="description" content="Demo project with jQuery">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	    
	<body>
		<div class="container">
			<div class="row row-table">
				<div class="col-md-4 col-table col-xs-12">
					<div class="panel panel-primary col-content bg">
						<div class="panel-heading">
							Title Pertama
						</div>
						<div class="panel-body">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eius dicta asperiores delectus ab, deserunt, provident sapiente totam facere voluptatum doloribus tempora deleniti ullam aut explicabo temporibus magnam illum quae.
						</div>
					</div>
				</div>
				<div class="col-md-4 col-table">
					<div class="panel panel-primary col-content bg">
						<div class="panel-heading">
							Title Kedua
						</div>
						<div class="panel-body">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eius dicta asperiores delectus ab, deserunt, provident sapiente totam facere voluptatum doloribus tempora deleniti ullam aut explicabo temporibus magnam illum quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, dolores fugit quibusdam aut debitis veritatis placeat voluptatem delectus neque. Pariatur laudantium ipsam odit repellendus quas veritatis quidem culpa temporibus sunt?
						</div>
					</div>
				</div>
				<div class="col-md-4 col-table">
					<div class="panel panel-primary col-content bg">
						<div class="panel-heading">
							Title Ketiga
						</div>
						<div class="panel-body">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eius dicta asperiores delectus ab,
						</div>
					</div>
				</div>
			</div>
		</div>

.row-table {width: 100%; height: 100%; display: table; table-layout: fixed;}
.col-table {display: table-cell; float: none; height: 100%}
.col-content {height: 100%; margin-top: 0; margin-bottom: 0;}

Jika sudah coba save dan jalankan, maka hasilnya akan seperti ini :

Cukup mudah bukan? sekian tutorial tentang Cara Membuat Kolom Menjadi Sama Rata Menggunakan Bootstrap, sampai bertemu diartikel selanjutnya dan sampai jumpa.

#KeepLearn

#IsmetMA