Membuat Grid Sama Tinggi dengan Fix Height pada Bootstrap

Halo, ketemu lagi dengan saya :), Apa kabarnya ? Semoga baik yah, amin.

Kemarin saya telah membahas bagaimana cara install framework bootstrap, Nah Pada artikel kali ini saya akan menjelaskan bagaimana Membuat Grid Sama Tinggi Dengan Fix Height pada bootstrap, biasanya ketika kita dalam penggunaan grid pada bootstrap kita sering menemukan masalah pada layout, entah itu tidak sama tinggi nya atau pun yang lain nya, Nah dibawah ini saya akan jelaskan bagaimana Grid bisa sama tinggi nya, ada berbagai macam cara sebenarnya tapi kali ini saya akan jelaskan dengan menggunakan Fix Height, Langsung saja simak langkah-langkah nya berikut ini.

1. Silahkan ketikan atau salin kode dibawah ini pada file index.html bootstrap nya.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="wrapper">
    <div class="container">
        <h1 align="center">Membuat Grid Sama Tinggi Dengan Fix Height</h1>
 
        <hr>
        <h2>Teknik 1 : Fix Height</h2>
        <div class="row">
            <div class="col-sm-4">
                <div class="txt">
                    Lorem ipsum dolor sit amet.
                </div>
            </div>
            <div class="col-sm-4">
                <div class="txt">
                    Lorem ipsum dolor sit amet.
                </div>
            </div>
            <div class="col-sm-4">
                <div class="txt">
                    Lorem ipsum dolor sit amet.
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

2. Untuk paragraf nya silahkan salin di lipsum.com.

3. Kalo sudah, lanjutkan untuk kode CSS nya, silahkan ketikan kode berikut:

*{margin:0px auto;}
#wrapper {padding:20px;}
 
/*teknik 1 : fix height*/
.txt{
    height:180px; /*Atur Ketinggian sesuai kebutuhan*/
    background:#30B5FF; 
    padding:10px; 
    color:#fff;}

4. Setelah itu jangan lupa disimpan, kemudian coba jalankan di browser masing-masing dan lihat hasilnya. Selesai.

Cukup mudah yah ? Baik sampai disini penjelasan mengenai bagaimana Membuat Grid Sama Tinggi Dengan Fix Height Pada Bootstrap, Semoga bermanfaat, amin.

Selamat Mencoba :).