Grid System Bootstrap
Bootstrap mengatur tampilan layar yang di sebut juga dengan Grid system terdiri dari col dan row, col dibagi menjadi 12 kolom sedangkan row di bagi menjadi 4 model yaitu lg (large untuk megatur layar desktop), md(medium untuk megatur layar desktop), sm (small untuk megatur layar tablets), dan yang terakhir adalah xs (extra small untuk layar desktop).Struktur Dasar Grid System Bootstrap
Contoh berikut ini cara membuat kolom yang mulai sama lebar, mulai dari skala desktop yang lebar, pada tablet, dan pada ponsel akan terlihat berbaris. Berikut ini contoh struktur dasar grid system pada Bootstrap.<!DOCTYPE html>Demikian cara membuat grid system bootstrap, Semoga membantu, dan selamat mencoba.
<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]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-1" style="background-color:lavender;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:lavenderblush;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:lavender;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:lavender;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:lavenderblush;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:lavender;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:lavender;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:lavenderblush;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:lavender;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:lavender;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:lavenderblush;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:lavender;">.col-sm-1</div>
</div>
<div class="row">
<div class="col-sm-2" style="background-color:lavender;">.col-sm-2</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-2</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-2</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-2</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-2</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-2</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-2</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-2</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-2</div>
</div>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-5" style="background-color:lavender;">.col-sm-5</div>
<div class="col-sm-5" style="background-color:lavenderblush;">.col-sm-5</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-2</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div>
</div>
<div class="row">
<div class="col-sm-7" style="background-color:lavender;">.col-sm-7</div>
<div class="col-sm-5" style="background-color:lavenderblush;">.col-sm-5</div>
</div>
<div class="row">
<div class="col-sm-8" style="background-color:lavender;">.col-sm-8</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-9" style="background-color:lavender;">.col-sm-9</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-10" style="background-color:lavender;">.col-sm-10</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-2</div>
</div>
<div class="row">
<div class="col-sm-11" style="background-color:lavender;">.col-sm-11</div>
<div class="col-sm-1" style="background-color:lavenderblush;">.col-sm-1</div>
</div>
<div class="row">
<div class="col-sm-12" style="background-color:lavender;">.col-sm-12</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Grid System Bootstrap
![Grid System Bootstrap]()
Reviewed by Admin
on
12:29 AM
Rating:
No comments: