Cara Membagi Kolom dengan Mudah Menggunakan Bootstrap
Ketika kita di ketika belajar HTML CSS pasti sedikit kesulitan untuk kita bagi membagi sebuah kolom, misal kita ingin membagi 4 kolom pada satu baris, dimana setiap kolom kita mesti atur berapa lebarnya kita posisikan dengan menggunakan float left, kita atur margin, peding dan sebagainya, tapi lain halnya ketika kita telah menggunakan bootstrap, dengan bantuan grid di pada bootstrap kita lebih gampang membagi sebuah kolom, bagaimana cara membagi kolom dengan gampang menggunakan bootstrap, simak terus ya teman-teman.
adakah yang masih ingat cara menggunakan bootstrap pertama-tama kali, ya betul karena bootstrap yakni sebuah framework jadi teman-teman mesti telah mengunduh file bootstrapnya, disini saya tak lagi mengajari teman-teman mengenai bagaimana cara mengunduh file bootstrapnya, disini saya masih memakai tipe bootstrap yang 3.7 ya teman-teman. karena saya rasa teman-teman telah dapat cara memakai bootstrap saya seketika masuk contoh cara membagi kolom dengan gampang menggunakan bootstrap, pertama-tama seperti lazimnya teman-teman masuk blog bootstrapnnya, yaitu getbootstrap.com atau teman-teman cari di search engine ketik saja bootstrap, biasanya tampil sangat atas, jikalau telah masuk, pilih yang versi 3.7 di fitur select kanan atas. Ingat beda tampilan ya teman-teman.
Oke mari kita lanjutkan lagi, pilih fitur atas yang components lalu karena disini saya akan mencotohkan seketika dengan menggunakan gambar jadi gambarnya itu nanti akan sejajar ya teman-teman, nanti pada struktur bootstrap itu ada class yang merancang 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 Theme</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 merancang gambar sejajar hingga 4 kolom, karena jumlah pada satu baris bootstrap itu yakni 12 karenanya dari itu saya merancang col-md-3 * 4 menjadi 12, lalu bagaimana hasilnya:
Oke saya rasa lumayan hingga disini dulu belajar kita mengenai cara membagi kolom dengan gampang menggunakan bootstrap, semoga bermanfaat dan hingga jumpa terimakasih.
Sumber https://kursuswebsite.org
