XPdKyZ3Dx8AsjrBpycdAEdBz2M6yyUpdeYe1l6qN
Bookmark

Tutorial Bootstrap untuk Pemula: Bangun Website Responsif dengan Mudah

... menit baca
Dengarkan

 

bootstrap

Apa itu Bootstrap?

Bootstrap adalah framework CSS yang paling populer di dunia untuk membangun website responsif dan mobile-first. Dengan Bootstrap, kamu tidak perlu pusing mengatur styling dari nol. Framework ini menyediakan komponen dan class siap pakai yang bisa mempercepat proses pembuatan website.

Dalam artikel ini, kita akan belajar dasar-dasar Bootstrap versi 5, lengkap dengan contoh agar kamu bisa langsung praktik.

1. Persiapan Awal

Sebelum mulai, kita butuh:

  • Browser (Chrome, Firefox, Edge, dll)
  • Teks editor (VS Code, Sublime Text, dll)
  • File HTML dasar

Cara Menggunakan Bootstrap:

Ada 2 cara:

  • Menggunakan CDN (cara cepat)

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Contoh Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-center text-primary">Halo, Bootstrap!</h1>
</body>
</html>

2. Grid System (Sistem Kolom)

Grid adalah inti dari Bootstrap. Kamu bisa membagi halaman menjadi beberapa kolom menggunakan class container, row, dan col.

Contoh:

<div class="container">
  <div class="row">
    <div class="col">Kolom 1</div>
    <div class="col">Kolom 2</div>
    <div class="col">Kolom 3</div>
  </div>
</div>

3. Komponen Umum yang Sering Digunakan

a. Button (Tombol)

<button class="btn btn-primary">Tombol Biru</button>
<button class="btn btn-success">Tombol Hijau</button>

b. Card (Kartu Konten)

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Judul Kartu</h5>
    <p class="card-text">Isi singkat dari konten kartu.</p>
    <a href="#" class="btn btn-primary">Aksi</a>
  </div>
</div>

c. Navbar (Navigasi Atas)

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MySite</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="#">Tentang</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

4. Utility Class yang Membantu

Bootstrap punya banyak class kecil yang berguna untuk styling cepat, seperti:

  • mt-3 (margin-top)
  • mb-2 (margin-bottom)
  • text-center, text-start, text-end
  • bg-primary, bg-success, bg-danger, dll

Contoh Penggunaan:

<p class="text-center text-success mt-4">Paragraf ini di tengah dan berwarna hijau dengan margin atas</p>

5. Layout Responsif

Bootstrap otomatis membuat layout kamu tampil baik di berbagai ukuran layar, tapi kamu juga bisa mengatur secara manual dengan breakpoint:

  • col-sm-6 untuk layar kecil ke atas
  • col-md-4 untuk layar medium ke atas

Contoh:

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4">Kolom A</div>
    <div class="col-sm-6 col-md-4">Kolom B</div>
    <div class="col-sm-12 col-md-4">Kolom C</div>
  </div>
</div>

Dengan Bootstrap, kamu bisa membuat tampilan web yang cantik dan responsif tanpa ribet. Cocok banget buat kamu yang baru mulai ngoding HTML dan CSS.

Langkah selanjutnya:

  • Coba kombinasikan komponen
  • Pelajari dokumentasi resmi Bootstrap di getbootstrap.com
  • Latihan bikin landing page sederhana

Semangat belajar, dan sampai jumpa di tutorial selanjutnya!

Related Posts
Posting Komentar

Related Posts

Posting Komentar