Tutorial Bootstrap langkah-langkah dasar

Berikut adalah langkah-langkah dasar untuk memulai belajar Bootstrap

Mengimpor Bootstrap : Dalam halaman HTML Anda, tambahkan link ke file CSS dan JavaScript Bootstrap. Anda dapat menggunakan versi Bootstrap yang disediakan melalui Content Delivery Network (CDN) atau mengunduhnya dan menambahkannya secara lokal ke proyek Anda.

<!-- Menggunakan CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/js/bootstrap.bundle.min.js"></script>

<!-- Menggunakan file lokal -->
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<script src="path/to/bootstrap.bundle.min.js"></script> 

Menggunakan Grid System : Bootstrap memiliki sistem grid yang kuat untuk membangun tata letak responsif. Anda dapat menggunakan kelas container, row, dan col untuk membuat grid.

<div class="container">
  <div class="row">
    <div class="col-md-6">Kolom 1</div>
    <div class="col-md-6">Kolom 2</div>
  </div>
</div> 

Menggunakan Komponen : Bootstrap menyediakan berbagai komponen siap pakai seperti navbar, jumbotron, card, form, button, dll. Anda dapat menggabungkan komponen-komponen ini untuk membangun tampilan yang kaya dan interaktif.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <!-- Konten navbar -->
</nav>

<div class="jumbotron">
  <h1 class="display-4">Selamat Datang!</h1>
  <p class="lead">Ini adalah contoh jumbotron.</p>
</div>

<div class="card">
  <img src="path/to/image.jpg" class="card-img-top" alt="Gambar">
  <div class="card-body">
    <h5 class="card-title">Judul Kartu</h5>
    <p class="card-text">Deskripsi kartu.</p>
    <a href="#" class="btn btn-primary">Tombol</a>
  </div>
</div>

<form>
  <div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="mb-3">
    <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form> 

Custom Styling : Anda dapat menggunakan kelas CSS dan variabel kustom untuk menyesuaikan tampilan Bootstrap. Anda juga dapat menulis kode CSS khusus untuk menambahkan gaya tambahan atau mengubah gaya yang ada.

<div class="bg-primary text-white p-3">Teks dengan latar belakang biru dan warna putih</div>

<button class="btn btn-danger">Tombol Bahaya</button>

<style>
  .my-custom-class {
    color: red;
    font-size: 20px;
  }
</style> 

Berbagi :