Cara Membuat Kolom Menjadi Sama Rata Menggunakan Bootstrap
Membangun kolom di bootstrap amat gampang bagi kalian yang telah paham HTML5 dan CSS3, karenanya pemakaian bootstrap sangatlah gampang, tetapi kalau kalian baru saja belajar html5 dan css3 agak sulit bagi membaca struktur dari framework ini tapi kalau kalian ingin berusaha dengan tekun tak menutup kemungkinan ini akan terasa lebih gampang, kali ini saya akan berbagi ilmu mengenai Cara Membuat Kolom Menjadi Sama Rata Menggunakan Bootstrap
pasti segala pernah merasakan ketika kita mengisi suatu kata di kolom bootstrap pasti tak sama rata dengan yang lainnya, terkecuali kata kata dikerjakan sama segala, karenanya hasilnya akan terlihat rapid an terlihat sama rata, nah gimana dengan text yang berbeda beda tapi ingin sama rata? Berikut hasil pengujiannya, teman teman dapat siapkan sebuah text editor bagi kita memulai mengerjakannya, oke kalau telah teman teman dapat unduh 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-tama
</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;}
Seandainya telah coba save dan jalankan, karenanya hasilnya akan seperti ini :
Lumayan gampang bukan? sekianlah panduan mengenai Cara Membangun Kolom Menjadi Sama Rata Menggunakan Bootstrap, hingga bertemu diartikel berikutnya dan hingga jumpa.
#KeepLearn
#IsmetMA
Sumber https://kursuswebsite.org
