bootstrap

Bootstrap

Bootstrap 5 dropped jQuery and embraced modern CSS (Grid, Flexbox, Variables). It remains the safest choice for admin panels and internal tools.

When to Use

• Rapid Prototyping & MVPs: Quickly laying out responsive pages with pre-built components and utilities.
• Administrative Portals & Back-Office Dashboards: Building clean, accessible user interfaces without a dedicated design team.
• Responsive Grid Layouts: Utilizing mobile-first 12-column flexbox and CSS Grid layout systems.
• Design System Customization with Sass: Overriding theme variables, color palettes, and breakpoints.

Quick Start

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <title>Bootstrap Demo</title>
  </head>
  <body>
    <div class="container py-5">
      <div class="row g-4">
        <div class="col-md-6">
          <div class="card p-4 shadow-sm">
            <h2 class="card-title">Responsive Card</h2>
            <p class="text-muted">Built with Bootstrap 5 utilities.</p>
            <button class="btn btn-primary">Action</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Core Concepts

Responsive 12-Column Grid & Flexbox Utilities

Mobile-first layout containers adapting to viewports:

<div class="container-fluid px-4 py-5">
  <div class="row g-4 align-items-center">
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card h-100 shadow-sm border-0">
        <div class="card-body d-flex flex-column justify-content-between">
          <h5 class="card-title text-primary">Standard Plan</h5>
          <p class="card-text text-muted">
            Complete features for growing teams.
          </p>
          <a href="#" class="btn btn-primary mt-3 w-100">Get Started</a>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card h-100 shadow-lg border-primary">
        <div class="card-body d-flex flex-column justify-content-between">
          <h5 class="card-title text-success">Enterprise Plan</h5>
          <p class="card-text text-muted">
            Dedicated infrastructure and SLA guarantees.
          </p>
          <a href="#" class="btn btn-success mt-3 w-100">Contact Sales</a>
        </div>
      </div>
    </div>
  </div>
</div>

Customizing Design Tokens with Sass

Overriding variables before compiling Bootstrap:

// Custom theme variable overrides
$primary: #4f46e5;
$secondary: #64748b;
$success: #10b981;
$enable-rounded: true;
$border-radius: 0.75rem;
$enable-shadows: true;

// Import Bootstrap source
@import "bootstrap/scss/bootstrap";

Vanilla JavaScript Component Initialization

Programmatic control of interactive modals and toasts:

import Modal from "bootstrap/js/dist/modal";
import Toast from "bootstrap/js/dist/toast";

// Initialize Modal programmatically
const modalEl = document.getElementById("confirmationModal");
const confirmModal = new Modal(modalEl, {
  backdrop: "static",
  keyboard: false,
});

// Initialize Toast notification
const toastEl = document.getElementById("statusToast");
const toast = new Toast(toastEl, { delay: 4000 });

document.getElementById("saveButton").addEventListener("click", () => {
  confirmModal.hide();
  toast.show();
});

Common Patterns

Responsive Flexbox Navbar with Toggler

Problem: Creating a clean mobile hamburger menu that expands smoothly on desktop viewports.

Solution: Use the standard Bootstrap 5 navbar structure:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</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 mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
      </ul>
    </div>
  </div>
</nav>

Best Practices

Do:

• Compile Bootstrap from source Sass to strip unused components and reduce CSS bundle size.
• Import individual JavaScript component modules (import Modal from 'bootstrap/js/dist/modal') instead of full bundles.
• Utilize Bootstrap CSS variables (var(--bs-primary)) for runtime theme switching and dark mode.
• Ensure proper ARIA attributes (aria-expanded, aria-label) on all interactive buttons and modals.

Don't:

• Use !important to override Bootstrap styles; use Sass variables or CSS specificity.
• Include jQuery with Bootstrap 5+; all plugins use native vanilla DOM APIs.
• Hardcode pixel widths; use Bootstrap utility classes (w-100, max-w-100) and the responsive grid.

Troubleshooting

Error	Cause	Solution
Dropdown / Modal / Collapse not opening on click	Bootstrap JavaScript bundle (bootstrap.bundle.min.js) not imported.	Add <script src=".../bootstrap.bundle.min.js"></script> before </body>.
Columns not wrapping on mobile viewports	Using fixed .col-6 without responsive prefixes like .col-md-6.	Use responsive breakpoint classes (col-12 col-md-6 col-lg-4).
Custom CSS styles overwritten by Bootstrap	Custom stylesheet imported before Bootstrap CSS in <head>.	Import custom CSS file after the Bootstrap CSS link tag.

References

• GetBootstrap