What is Cara Menggunakan Bootstrap 5 untuk Pemula?

Bootstrap adalah framework CSS paling populer di dunia yang memungkinkan kamu membangun website responsif dengan cepat tanpa harus menulis banyak CSS dari nol. Bootstrap 5 adalah versi terbaru yang le...

Who should learn this tutorial?

This tutorial is suitable for beginners and developers who want to improve their programming and web development skills.

What technologies are covered?

This tutorial may include Laravel, PHP, JavaScript, database, API development, and modern web technologies.

How to Use Bootstrap 5 for Beginners

Bootstrap is the most popular CSS framework in the world, letting you build responsive websites quickly without having to write a lot of CSS from scratch. Bootstrap 5 is the latest version, which is lighter, no longer requires jQuery, and has many ready-to-use components. This article guides you from installation to using Bootstrap 5's important components.

How to Install Bootstrap 5

There are two ways to use Bootstrap 5:

1. Via CDN (The Fastest Way)

Add the following links inside your HTML <head>:

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet">

<!-- Bootstrap JS (at the end of the body) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
</script>

2. Via npm

npm install bootstrap@5.3.2

Then import it in your JS/CSS files as needed.

Bootstrap 5 Basic Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Website</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <!-- Content here -->

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

The Bootstrap Grid System

Bootstrap uses a 12-column Flexbox-based grid system. The basic structure is: .container → .row → .col-*.

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

The col-md-4 class means: on medium screens and up (md = 768px+), the element takes 4 of 12 columns. Below 768px, it automatically becomes full width.

Bootstrap Grid Breakpoints

col- — all sizes (<576px)
col-sm- — ≥576px
col-md- — ≥768px
col-lg- — ≥992px
col-xl- — ≥1200px
col-xxl- — ≥1400px

<!-- 1 column on mobile, 2 on tablet, 3 on desktop -->
<div class="row">
  <div class="col-12 col-sm-6 col-lg-4">Item 1</div>
  <div class="col-12 col-sm-6 col-lg-4">Item 2</div>
  <div class="col-12 col-sm-6 col-lg-4">Item 3</div>
</div>

Frequently Used Bootstrap Components

Button

<button class="btn btn-primary">Blue Button</button>
<button class="btn btn-success">Green Button</button>
<button class="btn btn-danger">Red Button</button>
<button class="btn btn-outline-primary">Outline Button</button>
<button class="btn btn-lg btn-primary">Large Button</button>

Card

<div class="card" style="width: 300px;">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">A short description of this card.</p>
    <a href="#" class="btn btn-primary">View Details</a>
  </div>
</div>

Bootstrap Navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">MyBrand</a>
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#navbarMenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarMenu">
      <ul class="navbar-nav ms-auto">
        <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>

Bootstrap Utility Classes

Bootstrap provides hundreds of utility classes for quick styling:

<!-- Text and background colors -->
<p class="text-primary">Blue text</p>
<div class="bg-warning text-dark p-3">Yellow background</div>

<!-- Margin and Padding -->
<div class="mt-4 mb-2 px-3 py-2">Responsive spacing</div>
<!-- mt = margin-top, mb = margin-bottom, px = left-right padding -->

<!-- Flexbox utilities -->
<div class="d-flex justify-content-between align-items-center">
  <span>Left</span>
  <span>Right</span>
</div>

<!-- Text -->
<p class="fw-bold fs-5 text-center">Bold, large, centered text</p>

<!-- Border and radius -->
<img src="photo.jpg" class="rounded-circle" alt="...">
<div class="border border-primary rounded p-3">Bordered box</div>

Alert and Badge

<!-- Alert -->
<div class="alert alert-success" role="alert">
  Data saved successfully!
</div>
<div class="alert alert-danger" role="alert">
  An error occurred, please try again.
</div>

<!-- Badge -->
<span class="badge bg-primary">New</span>
<span class="badge bg-danger rounded-pill">5</span>

Tips for Using Bootstrap 5

Learn the grid system first — it's the foundation of Bootstrap.
Use DevTools to inspect the applied Bootstrap classes and how they work.
Customize Bootstrap by overriding its CSS, not by editing the Bootstrap file directly.
Bootstrap 5 no longer needs jQuery, so pages are lighter.

Conclusion

Bootstrap 5 is a CSS framework that greatly helps in building responsive and professional websites quickly. By understanding the grid system, ready-to-use components, and the utility classes provided, you can build a complete web page in a matter of minutes. Start with a simple project and treat Bootstrap as a helper tool, not a replacement, for understanding CSS more deeply.