Membuat Kolom Responsive pada Bootstrap 3 agar Sama Tinggi

Bootstrap sudah menyediakan seperangkat class yang stylenya sudah dirancang sedemikian rupa supaya kita bisa membuat website yang responsive dengan cepat dan rapi, nyaris tanpa harus styling lagi. Tapi dalam beberapa kasus mungkin ada saja keperluan yang custom yang belum bisa ditangani oleh fitur Bootstrap. Dalam kondisi demikian kita dapat memodifikasi atau mengoverride (menimpa style default dengan style yang baru tanpa mengubah kode style default) Bootstrap.

Salah satu contoh, seperti tema pada judul. Bootstrap sudah punya sistem grid yang menjadi pondasi utama responsive. Akan tetapi dalam satu kasus mungkin kita ingin supaya setiap kolom yang kita buat pada Bootstrap memiliki tinggi yang selalu sama mengikuti kolom yang paling tinggi. Kalo kita perhatikan sistem grid di Bootstrap, dia tidak punya mekanisme untuk menyamakan tinggi setiap kolom, karena memang tidak didesain untuk itu. Lalu bagaimana kalo kita butuhnya kolom yang sama tinggi? Nah, kita akan bahas bagaimana cara overridenya di tutorial ini.

Misalkan kita punya skema grid seperti berikut:

<div class="container">
<div class="row">
        <div class="col-md-4 bg">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div class="col-md-4 bg">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Duis aute irure dolor in reprehenderit in voluptate velit esse dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="col-md-4 bg">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</div>
<style>
    .bg {background:#eee;}
</style>

Bila kita cek di browser, masing-masing kolom memiliki tinggi yang berbeda, sesuai dengan banyaknya konten. Selain itu kolom pada bootstrap tidak memiliki margin di kiri dan kanannya, sehingga setiap kolom saling berimpitan.

Sekarang kita akan menambahkan satu class dan memberinya style supaya kolomnya sama tinggi mengikuti kolom yang paling tinggi. Selain itu, kita akan membuat elemen baru di dalam setiap kolom dan menyimpan konten di dalamnya supaya kita bisa memberi jarak antar kolom.

<div class="container">
    <div class="row row-table">
        <div class="col-md-4 col-table">
            <div class="col-content bg">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
        </div>
        <div class="col-md-4 col-table">
            <div class="col-content bg">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
        <div class="col-md-4 col-table">
            <div class="col-content bg">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
        </div>
    </div>
</div>

<style type="text/css">
.bg {
    background: #eee;
}
.row-table {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}
.col-table {
    display: table-cell;
    float: none;
    height: 100%;
}
.col-content {
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
}
</style>

Pada kode di atas :

• Kita menambahkan class .row-table pada elemen .row. Class .row-table ini berfungsi untuk memperbaharui display:block dari .row menjadi display:table. Seperti kita ketahui bahwa dahulu layouting template populer menggunakan table. Seiring berkembangnya teknologi HTML dan CSS, muncullah tren tableless yang memungkinkan kita untuk membuat layout template tanpa menggunakan table lagi. Tableless membuat layouting lebih fleksibel karena pengaturan layout dilakukan di dalam CSS. Meski demikian CSS tetap menyediakan sifat-sifat table tanpa harus menggunakan elemen table.
• Pada elemen kolom, kita menambahkan class .col-table dengan style display:table-cell untuk menyesuaikan sifat table sebagai sel tabel. Selain itu class .col-* pada Bootstrap menggunakan style float yang mana tidak cocok dengan sifat sel tabel, sehingga kita matikan menjadi float:none.
• Konten kolom kita pindahkan ke dalam elemen di dalam kolom. Pada kode di atas kita beri class .col-content yang memberi style height:100% dan mengeset margin top dan bottom ke 0. Ini berfungsi untuk menarik bagian atas dan bawah konten agar rapat dengan bagian atas dan bawah kolom, sehingga kontennya menjadi sama tinggi.

Dengan demikian, tinggi semua kolom akan selalu mengikuti kolom yang paling tinggi, dan setiap kolom konten terkesan memiliki jarak.

Demikian Coders. Tapi, tunggu! Kalo kamu buka dari layar berukuran lebih kecil seperti tablet atau handphone, kolomnya tidak lagi responsif. Ia tetap mempertahankan jumlah kolom dengan tinggi yang sama layaknya table. Untuk itu kita mesti sesuaikan juga style pada media query lainnya. Untuk itu kita harus siapkan juga beberapa class lain sebagai opsi bila kita hanya ingin membuat kolom sama tinggi hanya pada ukuran layar tertentu saja. Tambahkan CSS berikut:

@media (min-width: 480px) {
    .row-xs-table {
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 100%;
    }
    .col-xs-table {
        display: table-cell;
        float: none;
        height: 100%;
    }
}

@media (min-width: 768px) {
    .row-sm-table {
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 100%;
    }
    .col-sm-table {
        display: table-cell;
        float: none;
        height: 100%;
    }
}

@media (min-width: 992px) {
    .row-md-table {
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 100%;
    }
    .col-md-table {
        display: table-cell;
        float: none;
        height: 100%;
    }
}

@media (min-width: 1200px) {
    .row-lg-table {
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 100%;
    }
    .col-lg-table {
        display: table-cell;
        float: none;
        height: 100%;
    }
}

So, dengan CSS ini, kalo Kamu hanya ingin style kolom sama tinggi ini diterapkan hanya pada ukuran medium saja, maka daripada menggunakan class .row-table dan .col-table, gunakanlah class .row-md-table dan .col-md-table. Kalo ingin menggunakannya pada ukuran layar medium dan small (tablet), maka gunakan .row-md-table, .row-sm-table, .col-md-table dan .col-sm-table. Demikian seterusnya.

Selamat mencoba :D

Sumber : www.minimit.com