Bootstrap 5 Complete Guide — Build Responsive Sites Faster

Bootstrap is the world's most popular CSS framework, used by millions of developers to build responsive websites quickly. Bootstrap 5 removed the jQuery dependency and added tons of new features.

Why Bootstrap 5?

• **Rapid development** — Pre-built components save hours
• **Responsive by default** — Mobile-first grid system
• **Consistent design** — Unified styling across browsers
• **Great documentation** — Comprehensive and well-organized
• **No jQuery** — Smaller, faster, modern JavaScript

Getting Started

CDN (Quick Start)

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

<!-- JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

NPM Installation

npm install bootstrap

The Grid System

Bootstrap's 12-column grid is its most powerful feature.

<div class="container">
  <div class="row">
    <div class="col-md-6">Half width on medium+</div>
    <div class="col-md-6">Half width on medium+</div>
  </div>
  <div class="row">
    <div class="col-12 col-md-4">Full → Third</div>
    <div class="col-12 col-md-4">Full → Third</div>
    <div class="col-12 col-md-4">Full → Third</div>
  </div>
</div>

Breakpoints

Essential Components

Navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Abhishek Bhanot</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navMenu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Cards

<div class="card" style="width: 18rem;">
  <img src="project.jpg" class="card-img-top" alt="Project">
  <div class="card-body">
    <h5 class="card-title">Project Title</h5>
    <p class="card-text">Brief description of the project.</p>
    <a href="#" class="btn btn-primary">View Demo</a>
  </div>
</div>

Buttons

<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-success btn-lg">Large Success</button>
<button class="btn btn-danger btn-sm">Small Danger</button>

Modal

<!-- Trigger -->
<button data-bs-toggle="modal" data-bs-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Modal content here</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Utility Classes

Bootstrap 5 comes with powerful utility classes:

<!-- Spacing (m=margin, p=padding, 0-5 scale) -->
<div class="mt-3 mb-4 px-5">Spacing</div>

<!-- Text -->
<p class="text-center text-primary fw-bold fs-4">Styled text</p>

<!-- Display -->
<div class="d-flex justify-content-between align-items-center">Flexbox</div>

<!-- Background & Colors -->
<div class="bg-dark text-white p-4">Dark background</div>

<!-- Shadows & Rounded -->
<div class="shadow rounded p-3">Card-like element</div>

Customizing Bootstrap with Sass

// Override Bootstrap variables BEFORE importing Bootstrap
$primary: #4db5ff;
$dark: #000000;
$border-radius: 0.5rem;
$font-family-base: 'Poppins', sans-serif;

// Then import Bootstrap
@import "bootstrap/scss/bootstrap";

Bootstrap 5 vs Tailwind CSS

Conclusion

Bootstrap 5 remains one of the best tools for rapid, responsive web development. Its grid system, components, and utilities will dramatically speed up your workflow. Master it alongside custom CSS, and you'll be able to build professional websites efficiently. For unique, brand-specific designs, combine Bootstrap with custom CSS variables for the best of both worlds.