Ketika kita di saat belajar HTML CSS pasti sedikit kesulitan bagi kita untuk membagi sebuah kolom, misal kita ingin membagi 4 kolom dalam satu baris, dimana setiap kolom kita harus atur berapa lebarnya kita posisikan dengan menggunakan float left, kita atur margin, peding dan sebagainya, tapi lain halnya ketika kita sudah menggunakan bootstrap, dengan bantuan grid di dalam bootstrap kita lebih mudah membagi sebuah kolom, bagaimana cara membagi kolom dengan mudah menggunakan bootstrap, simak terus ya teman-teman.
adakah yang masih ingat cara menggunakan bootstrap pertama kali, ya betul karena bootstrap adalah sebuah framework jadi teman-teman harus sudah mendownload file bootstrapnya, disini saya tidak lagi mengajari teman-teman tentang bagaimana cara mendownload file bootstrapnya, disini saya masih memakai tipe bootstrap yang 3.7 ya teman-teman. karena saya rasa teman-teman sudah bisa cara memakai bootstrap saya langsung masuk contoh cara membagi kolom dengan mudah menggunakan bootstrap, pertama seperti biasa teman-teman masuk website bootstrapnnya, yaitu getbootstrap.com atau teman-teman cari di search engine ketik saja bootstrap, biasanya tampil paling atas, jika sudah masuk, pilih yang versi 3.7 di menu select kanan atas. Ingat beda tampilan ya teman-teman.
Oke mari kita lanjutkan lagi, pilih menu atas yang components lalu karena disini saya akan mencotohkan langsung dengan menggunakan gambar jadi gambarnya itu nanti akan sejajar ya teman-teman, nanti dalam struktur bootstrap itu ada class yang membuat efek gambar tersebuh jadi sejajar 4 kolom, oke teman-teman pilih Thumbnails karena disini saya akan mencoba 4 kolom, oke perhatikan strukutur berikut ini:
<!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>
<!-- Bootstrap -->
<link href="css/bootstrap.min.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]>
<-e-script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"><-e-/script>
<-e-script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"><-e-/script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="col-xs-6 <span style="color: #ff0000">col-md-3</span>">
<a href="#" class="thumbnail">
<img src="gambar.png" class="img-responsive">
</a>
</div>
<div class="col-xs-6 <span style="color: #ff0000">col-md-3</span>">
<a href="#" class="thumbnail">
<img src="gambar.png" class="img-responsive">
</a>
</div>
<div class="col-xs-6 <span style="color: #ff0000">col-md-3</span>">
<a href="#" class="thumbnail">
<img src="gambar.png" class="img-responsive">
</a>
</div>
<div class="col-xs-6 <span style="color: #ff0000">col-md-3</span>">
<a href="#" class="thumbnail">
<img src="gambar.png" class="img-responsive">
</a>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<-e-script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"><-e-/script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<-e-script src="js/bootstrap.min.js"><-e-/script>
</body>
</html>
Tanda merah itu lah yang membuat gambar sejajar sampai 4 kolom, karena jumlah dalam satu baris bootstrap itu adalah 12 maka dari itu saya membuat col-md-3 * 4 menjadi 12, lalu bagaimana hasilnya:
Oke saya rasa cukup sampai disini dulu belajar kita tentang cara membagi kolom dengan mudah menggunakan bootstrap, semoga bermanfaat dan sampai jumpa terimakasih.