Belajar Bootstrap Dasar

Belajar Bootstrap Dasar

author

Teguh Bagas M

Web Developer

Tags

#bootstrap#pemula#css-framework

Share this post

Belajar Bootstrap Dasar: Panduan untuk Pemula

Apa itu Bootstrap?

Bootstrap adalah framework CSS yang paling populer di dunia untuk membangun website yang responsif dan mobile-first. Dikembangkan oleh tim di Twitter (sekarang X), Bootstrap menyediakan komponen-komponen siap pakai yang memudahkan developer untuk membuat tampilan website yang menarik tanpa harus menulis CSS dari nol.

Mengapa Belajar Bootstrap?

  1. Hemat Waktu: Komponen siap pakai mempercepat proses development.
  2. Responsif: Otomatis menyesuaikan tampilan di berbagai ukuran layar.
  3. Konsisten: Desain yang seragam di seluruh halaman.
  4. Dokumentasi Lengkap: Mudah dipelajari dengan dokumentasi yang jelas.
  5. Komunitas Besar: Banyak resource dan tutorial tersedia.
  6. Browser Compatible: Bekerja dengan baik di semua browser modern.

CSS Murni vs Bootstrap: Apa Bedanya?

Menggunakan CSS Murni

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Button dengan CSS Murni</title>
    <style>
      .btn-custom {
        background-color: #007bff;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
      }
      .btn-custom:hover {
        background-color: #0056b3;
      }
      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
      }
      @media (max-width: 768px) {
        .container {
          padding: 0 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <button class="btn-custom">Klik Saya</button>
    </div>
  </body>
</html>

Kelebihan CSS Murni:

  • Kontrol penuh atas setiap style
  • File lebih ringan (hanya CSS yang dibutuhkan)
  • Lebih fleksibel untuk desain unik

Kekurangan CSS Murni:

  • Membutuhkan waktu lebih lama
  • Harus menulis kode responsif sendiri
  • Perlu membuat komponen dari awal

Menggunakan Bootstrap

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Button dengan Bootstrap</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container">
      <button class="btn btn-primary">Klik Saya</button>
    </div>
  </body>
</html>

Kelebihan Bootstrap:

  • Cepat dan efisien
  • Sudah responsif secara otomatis
  • Komponen siap pakai
  • Konsisten dan teruji

Kekurangan Bootstrap:

  • File lebih besar (memuat seluruh framework)
  • Tampilan bisa terlihat "generic" jika tidak dikustomisasi
  • Perlu belajar class-class Bootstrap

Cara Menggunakan Bootstrap

Ada dua cara utama untuk menggunakan Bootstrap dalam project Anda:

1. Menggunakan CDN (Content Delivery Network)

Cara ini paling mudah dan cepat untuk memulai. Anda cukup menambahkan link CDN di file HTML.

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap via CDN</title>
    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>Hello, Bootstrap!</h1>
 
    <!-- Bootstrap JS (Optional, untuk komponen interaktif) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Kelebihan CDN:

  • Tidak perlu download file
  • Cepat untuk memulai project
  • File mungkin sudah ter-cache di browser pengguna
  • Selalu mendapat versi terbaru

Kekurangan CDN:

  • Membutuhkan koneksi internet
  • Tergantung pada server CDN

2. Download dan Gunakan Secara Lokal

Download Bootstrap dari website resmi dan simpan di folder project Anda.

Langkah-langkah:

  1. Kunjungi getbootstrap.com
  2. Klik tombol "Download"
  3. Extract file zip yang didownload
  4. Salin folder css dan js ke project Anda

Struktur Folder:

project/
│
├── index.html
├── css/
│   └── bootstrap.min.css
└── js/
    └── bootstrap.bundle.min.js

Cara Menggunakannya:

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap Lokal</title>
    <!-- Bootstrap CSS Lokal -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
  </head>
  <body>
    <h1>Hello, Bootstrap!</h1>
 
    <!-- Bootstrap JS Lokal -->
    <script src="js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Kelebihan Download Lokal:

  • Tidak perlu internet setelah download
  • Lebih cepat (tidak perlu request ke server lain)
  • Kontrol penuh atas versi yang digunakan

Kekurangan Download Lokal:

  • File project lebih besar
  • Harus update manual jika ada versi baru

Komponen Dasar Bootstrap

1. Grid System

Grid system Bootstrap menggunakan 12 kolom untuk membuat layout responsif.

html
<div class="container">
  <div class="row">
    <div class="col-md-4">Kolom 1</div>
    <div class="col-md-4">Kolom 2</div>
    <div class="col-md-4">Kolom 3</div>
  </div>
</div>

2. Buttons

Bootstrap menyediakan berbagai style button siap pakai.

html
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>

3. Cards

Card adalah komponen konten yang fleksibel dan dapat diperluas.

html
<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="..." />
  <div class="card-body">
    <h5 class="card-title">Judul Card</h5>
    <p class="card-text">Ini adalah deskripsi card.</p>
    <a href="#" class="btn btn-primary">Lihat Detail</a>
  </div>
</div>

4. Navbar

Navbar responsif untuk navigasi website.

html
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Latihan Praktik

Mari membuat halaman profil sederhana menggunakan Bootstrap:

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Profil Mahasiswa</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container mt-5">
      <div class="row justify-content-center">
        <div class="col-md-6">
          <div class="card shadow">
            <div class="card-body text-center">
              <img
                src="profile.jpg"
                class="rounded-circle mb-3"
                width="150"
                height="150"
                alt="Foto Profil"
              />
              <h2 class="card-title">Teguh Bagas M</h2>
              <p class="text-muted">Mahasiswa Teknik Informatika</p>
              <p class="card-text">
                Seorang mahasiswa yang antusias belajar web development dan sedang fokus mempelajari
                Bootstrap framework.
              </p>
              <div class="d-grid gap-2">
                <button class="btn btn-primary">Lihat Portfolio</button>
                <button class="btn btn-outline-secondary">Contact Me</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Tips untuk Mahasiswa Pemula

  1. Mulai dengan CDN: Lebih mudah untuk belajar dan eksperimen.
  2. Pelajari Grid System: Ini adalah fondasi layout responsif di Bootstrap.
  3. Eksplor Dokumentasi: Website Bootstrap punya contoh code yang lengkap.
  4. Jangan Takut Eksperimen: Coba kombinasikan berbagai komponen.
  5. Pelajari Class Utilities: Bootstrap punya banyak class helper untuk spacing, color, dll.
  6. Praktik Konsisten: Buat project kecil untuk melatih skill Anda.

Class Utilities yang Sering Digunakan

utilities
/* Spacing */
m-3    /* margin all sides */
mt-3   /* margin top */
mb-3   /* margin bottom */
p-3    /* padding all sides */
pt-3   /* padding top */
 
/* Display */
d-flex          /* display flex */
d-none          /* display none */
d-md-block      /* display block on medium screens and up */
 
/* Text */
text-center     /* text align center */
text-primary    /* text color primary */
fw-bold         /* font weight bold */
 
/* Background */
bg-primary      /* background color primary */
bg-light        /* background color light */

Kesimpulan

Bootstrap adalah framework yang powerful untuk membuat website responsif dengan cepat. Untuk mahasiswa semester 1 yang baru belajar, Bootstrap memberikan jalan pintas yang bagus untuk membuat website yang terlihat profesional tanpa harus menguasai CSS yang kompleks terlebih dahulu.

Kapan Menggunakan Bootstrap?

  • Project dengan deadline ketat
  • Butuh website responsif cepat
  • Membuat prototype atau MVP
  • Project dengan desain standard

Kapan Menggunakan CSS Murni?

  • Desain yang sangat custom dan unik
  • Website yang butuh performa maksimal
  • Ingin kontrol penuh atas setiap detail
  • Belajar fundamental CSS secara mendalam

Sebagai mahasiswa, disarankan untuk memahami keduanya. Mulai dengan Bootstrap untuk membangun project dengan cepat, tapi jangan lupakan fundamental CSS murni karena itu akan membuat Anda menjadi developer yang lebih baik!

Sumber Daya Tambahan

  1. Bootstrap Official Documentation
  2. W3Schools Bootstrap Tutorial
  3. FreeCodeCamp Bootstrap Course
  4. Bootstrap Cheat Sheet

Selamat belajar dan semangat untuk mahasiswa baru! 🚀

See all blogs