A deep, practical guide to responsive design with get Bootstrap plus real-world patterns from CodeShikhi (কোড শিখি).

Responsive web design is the baseline expectation of every modern website. This is a hands-on, step-by-step tutorial: follow the ten steps below in order and you will finish with a fully responsive landing page built on Bootstrap 5. Everything here works with the free CodeShikhi (কোড শিখি) component library — whether you just ran get bootstrap for the first time, or you are stacking Bootstrap plus your own utility layer.

Developer writing responsive HTML and CSS on a laptop — Figure 1 — You only need a browser and a code editor to complete this tutorial.

What you will build

A mobile-first page shell with a responsive navbar
A two-column hero that collapses to one column on phones
A three-card feature grid driven by the Bootstrap grid
Responsive images, typography and spacing that scale by breakpoint

Before you start: the breakpoint map

Bootstrap 5 has six breakpoints. Memorise this table — every responsive decision in the rest of the tutorial refers back to it.

xs <576px phones (no infix, this is the default) sm ≥576px large phones .col-sm-* md ≥768px tablets .col-md-* lg ≥992px laptops .col-lg-* xl ≥1200px desktops .col-xl-* xxl ≥1400px large desktops .col-xxl-*

Bootstrap is mobile-first: a class with no infix applies to every screen, and each infix applies to that width and up. So col-12 col-md-6 means “full width on phones, half width from tablet up”.

Step 1 — Create the HTML shell

Create index.html and paste the boilerplate below. The two lines that matter most are the viewport meta tag (without it, phones render your page at 980px and zoom out) and the Bootstrap CSS link.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Responsive Page</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- content goes here -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Step 2 — Wrap everything in a container

Never place a .row directly inside <body>. Every section starts with a container, which supplies the horizontal gutters and the maximum width.

.container — steps down at each breakpoint; the safest default
.container-fluid — always 100% wide; good for dashboards and hero backgrounds
.container-lg — full width until 992px, then fixed

All CodeShikhi components are shipped wrapped in <div class="container"> for exactly this reason: paste them anywhere and they stay centred.

Step 3 — Add the responsive navbar

The navbar is the first place beginners lose responsiveness. The magic class is navbar-expand-lg: it means “show the horizontal menu from 992px up, collapse into a hamburger below that”.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">CodeShikhi</a>
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#nav"
            aria-controls="nav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">Components</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
      </ul>
    </div>
  </div>
</nav>

The toggler only works if the Bootstrap bundle JavaScript is loaded — that is the file you added in Step 1.

Website layout previewed side by side on desktop and mobile screens — Figure 2 — Test every step at 375px, 768px and 1440px before moving on.

Step 4 — Build the hero with the 12-column grid

The grid is three nested layers: container → row → columns. Columns must be direct children of a row, and rows must be direct children of a container.

<section class="py-5">
  <div class="container">
    <div class="row align-items-center g-4">
      <div class="col-12 col-md-6">
        <h1 class="display-5 fw-bold">Build faster with Bootstrap 5</h1>
        <p class="lead text-secondary">Copy-paste sections that are responsive out of the box.</p>
        <a href="#" class="btn btn-primary btn-lg">Get started</a>
      </div>
      <div class="col-12 col-md-6">
        <img src="hero.jpg" class="img-fluid rounded-3" alt="Product screenshot">
      </div>
    </div>
  </div>
</section>

Why `g-4` matters

Gutters are the space between columns. Using g-4 (or gx-* / gy-* for one axis) keeps spacing consistent instead of adding random margins that break at other widths.

Step 5 — Make images responsive

A raw <img> will overflow its column on small screens. Two classes solve almost every case:

.img-fluid — sets max-width:100%; height:auto
.object-fit-cover — crops rather than squashes when you fix a height

Also add width, height and loading="lazy" to every below-the-fold image. Those three attributes reserve space, remove layout shift, and improve your Core Web Vitals score.

Step 6 — Lay out the feature cards

Use row-cols-* instead of repeating column classes on every card. It sets how many columns fit per row at each breakpoint.

<div class="container py-5">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
    <div class="col"><div class="card h-100 p-3">…</div></div>
    <div class="col"><div class="card h-100 p-3">…</div></div>
    <div class="col"><div class="card h-100 p-3">…</div></div>
  </div>
</div>

h-100 on the card makes every card the same height regardless of text length — a detail that instantly makes a layout look professional.

Step 7 — Control visibility and alignment per breakpoint

d-none d-md-block — hidden on phones, visible from tablet up
text-center text-lg-start — centred on mobile, left aligned on laptops
flex-column flex-md-row — stack buttons vertically on phones
order-2 order-md-1 — reorder columns without touching the HTML source order

Prefer these utilities over custom media queries. They are already tested across browsers and keep your stylesheet almost empty.

Step 8 — Scale typography and spacing

Use the display classes (display-1 … display-6) for hero headings and the responsive spacing scale (py-3 py-md-5) for sections. A common beginner bug is a 72px heading that overflows a 360px phone; fs-1 fs-md-display-4-style pairing, or simply display-5, avoids it.

Step 9 — Theme with CSS variables, not overrides

Bootstrap 5.3 exposes native custom properties, so you can rebrand without recompiling Sass:

:root{
  --bs-primary: #4f46e5;
  --bs-body-font-family: "Inter", system-ui, sans-serif;
  --bs-border-radius: .9rem;
}

Put your overrides in a stylesheet loaded after Bootstrap. Never edit bootstrap.min.css directly — you will lose the changes on the next update.

Step 10 — Test, then ship

Open DevTools device toolbar and check 320px, 375px, 768px, 1024px, 1440px.
Look for horizontal scrollbars — they usually mean a fixed width or a stray row outside a container.
Run Lighthouse and fix any layout-shift and image-size warnings.
Tab through the page with the keyboard to confirm focus order still makes sense on mobile.

Common mistakes checklist

Missing viewport meta tag
Columns that are not direct children of a row
Fixed pixel widths instead of grid columns
Images without .img-fluid
Custom media queries fighting Bootstrap utilities

Next steps

Open the CodeShikhi component library, pick a navbar, a hero, a feature grid, a pricing table and a footer, then assemble them in the order above. Every block is already container-wrapped and mobile-first, so your first responsive page can be finished in an afternoon.

Comprehensive Guide to Responsive Web Design using Bootstrap 5: Best Practices for Beginners