Cara Membuat Kolom Bootstrap Sama Tinggi
Halo, Di panduan kali ini saya akan memberikan sedikit tips bagaimana Cara Membangun Kolom Bootstrap Sama Tinggi, kita tahu bahwa merancang laman menggunakan framework bootstrap lebih gampang dan lebih cepat dibanding dengan kita menggunakan HTML lazim, namun terkadang ada saja kendala dimana kita mesti sedikit kustom ketika kita menemukan kolom di bootstrap tak sama tinggi, Nah berikut yakni cara bagi menyamakan tinggi kolom di bootstrap.
dibawah ini contoh penyamaan tinggi kolom di bootstrap. Silahkan kalian dapat 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>
Di bagian paragraf diatas silahkan kalian isikan beberapa baris paragraf, kemudian berikutnya yakni 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;
}Di kasus ini, bagi melihat sama atau tak nya kolom bootstrap kita mesti memberikan warna background seperti kode diatas. Setelah seluruh kode diketikan, berikutnya silahkan kalian jalankan di browser masing-masing dan lihat hasilnya.
Bagus hingga disini panduan mengenai bagaimana Cara Membangun Kolom Bootstrap Sama Tinggi, semoga bermanfaat, amin.
Selamat mencoba 🙂
Sumber https://kursuswebsite.org
