Anda di halaman 1dari 4

HALAMAN WEB PERTAMA DENGAN BOOTSTRAP

1. Tambahkan Meta Tag Untuk Mobile-First


Bootstrap4 didesain untuk web responsive yang lebih mengutamakan tampilan
di mobile device. Untuk meyakinkan fitur ini berjalan dengan baik, kita sebaiknya
menambahkan meta tag diantara <head> dan </head> sebagai berikut:
<meta name="viewport" content="width=device-width, initial-scale=1">
parameter width=device-width untuk memastikan lebar halaman di set sesuai
dengan lebar device, sedangkan parameter initial-scale=1 berfungsi untuk
memastikan zoom level = 1 (100%) saat halaman web di load.
2. Menentukan Jenis Container
Bootstrap4 membutuhkan Class Container untuk bisa menjalankan fitur
responsivenya, ada jenis Class Container yaitu:
.container : digunakan untuk web dengan lebar tertentu sesuai device
yang digunakan.
.container-fluid : digunakan untuk web lebar penuh menyesuaikan lebar layar.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 - Class Container</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css\bootstrap.min.css">
<script src="js\bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>

.container
Sisi Kanan Kiri
Ada Space
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 - Class Container-Fluid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css\bootstrap.min.css">
<script src="js\bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>

STRUKTUR PENGGUNAAN GRID


Anda bisa mengatur grid dengan pola sebagai berikut:
<div class="container">
<div class="row">
...
</div>
</div>
atau jika diinginkan menggunakan lebar layar penuh tanpa ada jarak di pinggir
layar bisa dengan class .container-fluid sebagai berikut:
<div class="container-fluid">
<div class="row">
...
</div>
</div>
tanda titik 3 (…) di coding di atas kita isi dengan class .col-media-lebar. Media
dalam bootstrap ada 4 jenis yaitu:
xs atau extra small untuk device dengan lebar layar dibawah 768 pixel
sm atau small device untuk device dengan lebar layar 768 – 991pixel
md atau medium device untuk device dengan lebar layar 992 – 1199 pixel
lg atau large device untuk device dengan lebar layar diatas 1200 pixel
sedangkan lebar bisa kita isi dengan angka antara 1 sampai 12. Anda bebas
menentukan angkanya dengan syarat dalam satu row jumlahnya harus 12.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css\bootstrap.min.css">
<script src="js\bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
</div>
<div class="row">
<div class="col-md-1">md-1</div>
<div class="col-md-2">md-2</div>
<div class="col-md-3">md-3</div>
<div class="col-md-4">md-4</div>
<div class="col-md-2">md-2</div>
</div>
<div class="row">
<div class="col-md-3">md-3</div>
<div class="col-md-3">md-3</div>
<div class="col-md-3">md-3</div>
<div class="col-md-3">md-3</div>
</div>
</div>
</body>