Cara Membuat Kolom Sama Tinggi pada Bootstrap 3

06/08/2017    Risman Hakim    160     Website

Bootstrap 3 merupakan sebuah Framework yang sangat populer sekali saat ini, bahkan hampir setiap tampilan website saat ini dibuat dengan teknologi framework ini, karena keunggulan dan kemampuan responsif membuat Framework ini banyak dipakai oleh depelover. Tentu ketika menggunakan Framework ini pasti ada saja kendala yang dialamai, salah satu kendala kecil adalah ketika ingin membuat kolom pada Bootstrap 3 menjadi sama tinggi. Namun tenang saja setiap kendala pasti ada solusinya. Berikut ini adalah solusi bila kita menemukan kondisi dimana kolom pada bootstrap tidak sama tinggi. Simak tutorial Cara Membuat Kolom Sama Tinggi pada Bootstrap 3 berikut ini.

Dibawah ini saya telah membuat kasus layout dimana masing-masing kolom pada Bootstrap tidak sama tinggi.

Cara Membuat Kolom Sama Tinggi pada Bootstrap 3

Kalian bisa ketikan kode berikut untuk membuat tampilan layout terlebih dahulu seperti diatas.

Kode HTML Bootstrap 3.

<body>
        <div class="container">
            <div class="row">
                <div class="col-xs-4 col-sm-4 col-md-4 blue">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 red">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi aut adipisci dolorum asperiores, sapiente at.</p>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 green">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, qui. Nihil praesentium suscipit soluta voluptatum quibusdam officia a ipsam consequatur.</p>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 footer">
                    <a href="">DumetSchool.com</a>
                </div>
            </div>
        </div>
    </body>

 Kode CSS3.

.container {
    margin-top: 10px;
}
.blue {
    background-color: #3498db;
    padding: 10px;
}
.red {
    background-color: #e74c3c;
    padding: 10px;
}
.green {
    background-color: #2ecc71;
    padding: 10px;
}
.footer {
    background-color: #34495e;
    padding: 10px;
}

Setelah kode diatas telah diketikan, selanjutnya adalah tahap untuk membuat masing-masing kolom menjadi sama tinggi adalah dengan cara menambahkan kode CSS3 berikut ini.

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

Setelah semua kode diatas diketikan, simpan kemudian jalankan pada browser dan lihat hasilnya. Maka akan terlihat tampilan kolom Bootstrap telah sama tingginya.

Cara Membuat Kolom Sama Tinggi pada Bootstrap 3

Bagaimana, cukup mudah bukan untuk membuat kolom pada Bootstrap menjadi sama tinggi, baik sekian tutorial mengenai Cara Membuat Kolom Sama Tinggi pada Bootstrap 3. Semoga bermanfaat.

Artikel, jQuery, Web Design, Javascript, HTML CSS, Bootstrap, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More