Halo, Pada tutorial kali ini saya akan memberikan sedikit tips bagaimana Cara Membuat Kolom Bootstrap Sama Tinggi, kita tahu bahwa membuat website menggunakan framework bootstrap lebih mudah dan lebih cepat dibanding dengan kita menggunakan HTML biasa, namun terkadang ada saja kendala dimana kita harus sedikit kustom ketika kita menemukan kolom pada bootstrap tidak sama tinggi, Nah berikut adalah cara untuk menyamakan tinggi kolom pada bootstrap.
dibawah ini contoh penyamaan tinggi kolom pada bootstrap. Silahkan kalian bisa melihat contoh Bootstrap Sama Tinggi dengan mengetikan kode-kode ini.
<body> <div class="container"> <div class="row"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 bg"> <p>Lorem Ipsum</p> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 bg"> <p>Lorem Ipsum is simply dummy text </p> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 bg"> <p>Lorem Ipsum</p> </div> </div> </div> </body>
Pada bagian paragraf diatas silahkan kalian isikan beberapa baris paragraf, kemudian selanjutnya adalah kita akan menyamakan tinggi kolom nya dengan kode CSS3 berikut.
.container {
margin-top: 30px;
}
.bg {
background: #f39c12;
}
.bg p {
border-bottom: 2px solid #999;
}
.row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}Pada kasus ini, untuk melihat sama atau tidak nya kolom bootstrap kita harus memberikan warna background seperti kode diatas. Setelah semua kode diketikan, selanjutnya silahkan kalian jalankan pada browser masing-masing dan lihat hasilnya.
Baik sampai disini tutorial mengenai bagaimana Cara Membuat Kolom Bootstrap Sama Tinggi, semoga bermanfaat, amin.
Selamat mencoba 
The post Cara Membuat Kolom Bootstrap Sama Tinggi appeared first on Kursus Website Terbaik.