How to Build Responsive Sites with Bootstrap 5 in 2026

Introduction

In 2026, Bootstrap 5 remains the leading CSS framework for building responsive, mobile-first web interfaces. Launched without jQuery, it provides over 1,500 ready-to-use utility classes, a flexible 12-column grid, and components like navbars and cards that automatically adapt to any screen size. Why use it? It speeds up development by 30-50% by eliminating the need to write CSS from scratch, while ensuring accessibility (ARIA) and cross-browser compatibility.

This beginner tutorial guides you step by step: from including it via CDN to building a complete site with grids, buttons, navigation, cards, and forms. Each example is a standalone HTML file you can test instantly in your browser. By the end, you'll be able to build a responsive landing page in under an hour. Ideal for freelancers or juniors looking to boost productivity.

Prerequisites

Basic knowledge of HTML and CSS (tags, selectors).
A code editor like VS Code.
A modern browser (Chrome, Firefox).
No Node.js needed: we use CDN to get started in 30 seconds.

Include Bootstrap 5 via CDN

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon site Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
  <div class="container text-center my-5">
    <h1 class="display-4">Hello, Bootstrap 5 !</h1>
    <p class="lead">Votre premier conteneur responsive est prêt.</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

This complete HTML file integrates Bootstrap 5.3.3 via CDN (CSS in head, JS at bottom of body). The viewport meta tag ensures responsiveness. The container centers the content and adapts to screen sizes. Just double-click to open it: everything works without a server.

Understanding Inclusion and the Container

The CDN (Content Delivery Network) loads Bootstrap from jsDelivr—super fast and no build required. Think of it like importing a ready-made library: no npm install needed. The container is your magic box: it centers content (max 1140px on desktop) and adds margins. Without it, content sticks to the edges on mobile. Test by resizing the window: the text adjusts perfectly.

Implement the Responsive Grid

grille.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grille Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
  <div class="container my-5">
    <h2>Grille responsive 12 colonnes</h2>
    <div class="row">
      <div class="col-md-4 bg-primary text-white p-4 mb-3">Colonne 1 (plein écran mobile)</div>
      <div class="col-md-4 bg-success text-white p-4 mb-3">Colonne 2</div>
      <div class="col-md-4 bg-danger text-white p-4 mb-3">Colonne 3</div>
    </div>
    <div class="row">
      <div class="col-12 col-sm-6 col-lg-3 bg-warning p-4">4 colonnes égales sur LG</div>
      <div class="col-12 col-sm-6 col-lg-3 bg-info text-white p-4">Responsive : stack sur mobile</div>
      <div class="col-12 col-sm-6 col-lg-3 bg-secondary text-white p-4">Breakpoints : XS,SM,MD,LG,XL</div>
      <div class="col-12 col-sm-6 col-lg-3 bg-dark text-white p-4">Copiez et testez !</div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

The grid uses row for horizontal alignment and col-* for width (12=100%). col-md-4 means 33% on medium+ screens, full width on small. Breakpoints: sm(576px), md(768), lg(992), xl(1200), xxl(1400). Colored backgrounds show the adaptation. Pitfall: always row > col, never col directly in container.

Mastering the Bootstrap Grid

Think of the grid like a cake cut into 12 slices: col-6 = half. Prefixes (md-, lg-) stack on mobile (xs by default). Benefit: one code handles all screens, no manual media queries. Add g-3 to rows for uniform spacing (gutters).

Add Buttons and Utilities

boutons.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Boutons Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
  <div class="container my-5">
    <h2>Boutons et couleurs</h2>
    <div class="row g-3">
      <div class="col-12">
        <button class="btn btn-primary btn-lg">Primary Large</button>
        <button class="btn btn-success">Success</button>
        <button class="btn btn-outline-danger">Outline Danger</button>
        <button class="btn btn-secondary disabled">Désactivé</button>
      </div>
      <div class="col-12">
        <span class="badge bg-primary">Badge 1</span>
        <span class="badge text-bg-success">Badge 2</span>
        <span class="badge rounded-pill bg-info">Pill</span>
      </div>
      <div class="col-12">
        <p class="text-primary fw-bold fs-4">Texte utilitaire : gras, couleur, taille.</p>
        <p class="text-muted">Grâce aux 1 500+ classes, pas de CSS custom.</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

Buttons use btn- with 8 variants (primary, secondary...). Add lg/sm for sizes, outline- for borders. Badges for compact labels. Utilities like text-, fw-bold (font-weight), fs-* style without custom CSS. Pitfall: don't overuse—Bootstrap has priority.

Utilities and Buttons in Action

Utilities are one-shot classes: my-5 = margin Y 3rem, p-4 = padding. Semantic colors (primary = blue for actions) guide UX. Buttons have native hover transitions. Pro tip: d-flex justify-content-center for flex centering.

Build a Responsive Navbar

navbar.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">MonSite</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <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="#">Accueil</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container my-5">
    <p>Navbar collapse sur mobile : burger auto !</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

navbar-expand-lg expands on large screens, shows burger on small. data-bs-toggle triggers JS for collapse. ARIA labels for accessibility. The bundle JS handles everything (Popper for dropdowns). Test resize: menu collapses perfectly.

Navbar: The Navigation Skeleton

The navbar is plug-and-play: navbar-brand for logo, nav-link for items. bg-body-tertiary for subtle background. On mobile, the toggler JS opens/closes without config. Analogy: a responsive accordion.

Create Cards and Forms

cards-form.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cards et Formulaire</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
  <div class="container my-5">
    <div class="row g-4">
      <div class="col-md-6">
        <div class="card h-100">
          <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="Image card">
          <div class="card-body">
            <h5 class="card-title">Titre Card 1</h5>
            <p class="card-text">Contenu responsive, shadows auto.</p>
            <a href="#" class="btn btn-primary">Lire plus</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <form>
          <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" placeholder="votre@email.com">
          </div>
          <div class="mb-3">
            <label for="message" class="form-label">Message</label>
            <textarea class="form-control" id="message" rows="3"></textarea>
          </div>
          <button type="submit" class="btn btn-success">Envoyer</button>
        </form>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

Cards: card-body, top img, btn inside. h-100 equalizes heights. Form: form-control for auto-styling, mb-3 spacing, native validation (:valid). Placeholders and labels are ARIA-ready. Integrate into grid for perfect layout.

Cards and Forms: Key Components

Cards are flexible boxes for products or blog posts. Forms get browser validation (required+). rows=3 for textarea. Next: combine everything into a dashboard.

Best Practices

Always include meta viewport: without it, no responsiveness.
Nest row > col: container direct col = gutter bugs.
Utilities first: less custom CSS, easier maintenance.
Test F12 mobile: emulate devices before deploy.
Accessibility: use aria-*, visible focus (btn-focus).

Common Mistakes to Avoid

Forget JS bundle: navbar/dropdowns break.
col without row: full-width column bugs.
Custom CSS before Bootstrap: unnecessary !important overrides.
Ignore breakpoints: test SM/MD, not just desktop.

Next Steps

Dive into the official Bootstrap 5 docs. Customize with Sass (npm install). Master modals/toasts with JS. Check out our Learni Dev courses for React + Bootstrap or Tailwind alternatives.

How to Create a Responsive Website with Bootstrap 5 in 2026