Layout Grid Responsife dengan Bootstrap
Contoh Kode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tombol Bootstrap</title>
<link href="https://kursus.kitakale.id/vendor/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: #E7FBE6;
}
.row div {
background: #CBE2B5;
padding: 30px;
border: 1px solid #86AB89;
}
</style>
</head>
<body>
<center class="my-3">
<h1>Equal-width</h1>
</center>
<div class="container text-center">
<div class="row mb-3">
<div class="col">
<strong>1 of 2</strong>
</div>
<div class="col">
<strong>2 of 2</strong>
</div>
</div>
<div class="row">
<div class="col">
<strong>1 of 3</strong>
</div>
<div class="col">
<strong>2 of 3</strong>
</div>
<div class="col">
<strong>3 of 3</strong>
</div>
</div>
</div>
<center class="my-3">
<h1>Setting one column width</h1>
</center>
<div class="container text-center">
<div class="row mb-3">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
<center class="my-3">
<h1>Variable width content</h1>
</center>
<div class="container text-center">
<div class="row justify-content-md-center mb-3">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
<center class="my-3">
<h1>Responsive classes</h1>
</center>
<div class="container text-center">
<div class="row mb-3">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
<center class="my-3">
<h1>Stacked to horizontal</h1>
</center>
<div class="container text-center">
<div class="row mb-3">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
<center class="my-3">
<h1>Mix and match</h1>
</center>
<div class="container text-center">
<div class="row mb-3">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<div class="row mb-3">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<div class="row mb-3">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
</body>
</html>Preview
Last updated
