Bootstrap adalah sebuah framework CSS yang dibuat untuk mengembangkan website dengan desain yang responsif. Versi Bootstrap saat ini adalah versi 5.3.3. Pada versi ini terdapat perbaikan bug, peningkatan dokumentasi, dan peningkatan lanjutan lainnya untuk mode warna .
Cara Instal Bootstrap Online
Instalasi Bootstrap secara online cukup menyisipkan link CSS ke dalam tag head dan link JS di akhir tag body. Ada kekurangan dari Bootstrap Online ini, yaitu harus selalu terhubung ke internet dan juga mengurangi kecepatan akses halaman website.
Berikut link CSS dan JS dari BootstrapCDN:
CSS
Copy <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> JS
Copy <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> Berikut cara menempatkan link CSS dan JS dari BootstrapCDN ke dalam dokumen HTML.
Buat file index.html
Copy <!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html> Hasil dari kode di atas jika dijalankan di browser akan tampil seperti gambar di bawah ini
Cara Install Bootstrap Offline
Download file CSS dan JS Bootstrap melalui link berikut ini: https://github.com/twbs/bootstrap/releases/download/v5.3.3/bootstrap-5.3.3-dist.zip
Di dalam file zip terdapat 2 folder yaitu folder css dan js. Ekstrak file zip, dan simpan di dalam folder bootstrap. Kemudian buat file index.html
Copy <!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
</body>
</html> Berikut struktur folder dari file di atas
Hasil dari kode index.html sebagai berikut
Mengenal Grid View
Grid view atau sistem grid Bootstrap adalah sebuah sistem grid yang digunakan dalam pengembangan web untuk mengatur tata letak elemen-elemen halaman secara responsif. Bootstrap adalah salah satu kerangka kerja (framework) front-end paling populer yang menyediakan seperangkat alat dan komponen untuk membangun antarmuka web yang responsif dan menarik.
Dalam Bootstrap, grid view atau sistem gridnya dibangun dengan menggunakan sistem grid 12 kolom. Ini berarti halaman web dapat dibagi menjadi 12 kolom, dan elemen-elemen dalam halaman dapat ditempatkan di dalam kolom-kolom ini dengan berbagai lebar yang dapat disesuaikan sesuai kebutuhan.
Class grid pada Bootstrap antara lain:
Digunakan untuk mengatur grid pada layar berukuran < 576px
Digunakan untuk mengatur grid pada layar berukuran 576px
Digunakan untuk mengatur grid pada layar berukuran 768px
Digunakan untuk mengatur grid pada layar berukuran 992px
Digunakan untuk mengatur grid pada layar berukuran 1200px
Class-class di atas dapat digabungkan untuk membuat layout yang dinamis dan fleksibel
Tiga Kolom yang Sama
Berikut cara membuat tiga kolom dengan ukuran width yang sama:
Copy <div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div> Berikut kode lengkap membuat tiga kolom dengan ukuran width yang sama dengan nama file grid.html
Copy <!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="row">
<div class="col bg-primary">.col</div>
<div class="col bg-warning">.col</div>
<div class="col bg-success">.col</div>
</div>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
</body>
</html> Hasil dari kode di atas sebagai berikut:
Dua Kolom dengan ukuran width berbeda
Berikut cara membuat dua kolom dengan ukuran width yang berbeda:
Copy <div class="row">
<div class="col-sm-4 bg-primary">.col-sm-4</div>
<div class="col-sm-8 bg-warning">.col-sm-8</div>
</div> Berikut kode lengkap membuat dua kolom dengan ukuran width yang berbeda:
Copy <!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="row">
<div class="col-sm-4 bg-primary">.col-sm-4</div>
<div class="col-sm-8 bg-warning">.col-sm-8</div>
</div>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
</body>
</html> Hasil dari kode di atas sebagai berikut:
Membuat Tabel
Membuat tabel dengan Bootstrap sangat mudah. Beberapa class yang dapat digunakan antara lain:
Class ini digunakan untuk membuat tabel standar
Class tambahan yang digunakan untuk menambahkan style strip
pada tabel (Baris pertama dan baris kedua beda warna)
Class table-bordered adalah class tambahan yang digunakan
untuk menambahkan style garis pada tabel
Class table-hover adalah class tambahan yang digunakan
untuk menambahkan efek hover pada baris tabel ketika cursor mouse diletakkan di atas baris tabel
Berikut kode lengkap membuat tabel dengan nama file tabel.html
Copy <!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h2>Basic Table</h2>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
<h2>Striped Rows</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
<h2>Bordered Table</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
<h2>Hover Rows</h2>
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
<h2>Striped, Bordered dan Hover</h2>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
<h2>Dark Table</h2>
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
<h2>Responsive Table</h2>
<div class="table-responsive">
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Hp</th>
<th>Alamat</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>0812</td>
<td>Jl Rajawali</td>
<td>Aktif</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>0812</td>
<td>Jl Rajawali</td>
<td>Aktif</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>0812</td>
<td>Jl Rajawali</td>
<td>Aktif</td>
</tr>
</tbody>
</table>
</div>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
</body>
</html> Hasil dari kode di atas sebagai berikut:
Sementara untuk tabel responsif terdapat scrollbar yang bisa digeser ke kanan dan kiri
Menampilkan Gambar
Bootstrap menyediakan class untuk mengatur tampilan gambar. Beberapa class Bootstrap yang dapat digunakan untuk mengatur gambar antara lain:
untuk menampilkan gambar dengan bentuk lingkaran
untuk menampilkan gambar dengan bentuk melengkung pada sudut gambar
untuk menampilkan gambar thumbnail
untuk menampilkan gambar responsif pada semua ukuran layar
Copy <img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Copy <img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Copy <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Copy <img class="img-fluid" src="img_chania.jpg" alt="Chania"> Alerts
Bootstrap menyediakan cara mudah untuk membuat sebuah pesan peringatan. Pesan peringatan biasanya digunakan ketika login gagal, input data berhasil atau gagal.
Alerts dapat dibuat menggunakan class .alert, ditambah dengan class .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light atau .alert-dark
Copy <div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div> Class button dapat digunakan pada element <a>, <button>, atau <input>
Copy <a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button"> Bootstrap menyediakan style button dengan nama class btn
Copy <button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button> Referensi
Video
Bootstrap 5 : https://www.youtube.com/playlist?list=PLnrs9DcLyeJTxqZ4lWgVHXBwFgZEkwp9r
Bootstrap 4 : https://www.youtube.com/playlist?list=PLce3Eyp7oY9-o3JavSawkXcazJSYx7KAf
