Bootstrap

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.

https://getbootstrap.com/

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

<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

<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

index.html

<!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

<!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:

Class

Keterangan

.col-*

Digunakan untuk mengatur grid pada layar berukuran < 576px

.col-sm

Digunakan untuk mengatur grid pada layar berukuran 576px

.col-md

Digunakan untuk mengatur grid pada layar berukuran 768px

.col-lg

Digunakan untuk mengatur grid pada layar berukuran 992px

.col-xl

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:

 <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

grid.html

<!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:

 <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:

<!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:

Dengan menggunakan sistem grid Bootstrap, pengembang dapat dengan cepat membuat tata letak halaman yang responsif dan menarik dengan mengoptimalkan penggunaan ruang halaman web.

Membuat Tabel

Membuat tabel dengan Bootstrap sangat mudah. Beberapa class yang dapat digunakan antara lain:

Class

Keterangan

.table

Class ini digunakan untuk membuat tabel standar

.table-striped

Class tambahan yang digunakan untuk menambahkan style strip pada tabel (Baris pertama dan baris kedua beda warna)

.table-bordered

Class table-bordered adalah class tambahan yang digunakan untuk menambahkan style garis pada tabel

.table-hover

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

tabel.html

<!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:

Class

Keterangan

.rounded-circle

untuk menampilkan gambar dengan bentuk lingkaran

.rounded

untuk menampilkan gambar dengan bentuk melengkung pada sudut gambar

.img-thumbnail

untuk menampilkan gambar thumbnail

.img-fluid

untuk menampilkan gambar responsif pada semua ukuran layar

 <img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

 <img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

 <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

 <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

<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>

<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">

Button

Bootstrap menyediakan style button dengan nama class btn

<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>