How to Build a Responsive Web Page Using Bootstrap

Bootstrap makes responsive layout practical by starting with the smallest viewport and adding changes at wider breakpoints. The essential recipe is:

1. Use a Bootstrap-version-matched starter document.
2. Add <meta name="viewport" content="width=device-width, initial-scale=1">.
3. Load Bootstrap CSS.
4. Wrap the grid in a .container or .container-fluid.
5. Place columns inside a .row and choose breakpoint classes such as .col-12 col-md-6.
6. Load the JavaScript bundle when using a collapsing navbar or another interactive plugin.
7. Use .img-fluid for content images.

This guide uses Bootstrap 5.0 conventions. Keep snippets from the same major version and consult the official Bootstrap 5 documentation.

1. Start with a complete Bootstrap document

The viewport tag controls how mobile browsers calculate the page width and enables normal touch zooming. The CDN links below follow Bootstrap’s versioned getting-started guidance.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive Bootstrap page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3qzM0GZ9bM8QYq1g2kQ2Q4Q1Q4Q1Q4Q1Q4Q1Q4Q1Q4Q1" crossorigin="anonymous">
  </head>
  <body>
    <main class="container py-4">
      <h1>Responsive page</h1>
      <p>Resize the viewport to see the layout change.</p>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEUNsfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

For production, copy the exact current integrity values from the versioned Bootstrap page you use. A package manager or downloaded assets are preferable when your project already has dependency and asset pipelines.

2. Choose a container

Containers provide horizontal padding and responsive maximum widths and are the normal wrapper for Bootstrap’s grid.

Class	Width behavior	Use when
.container	Centered content with breakpoint-specific maximum widths	Text, forms and dashboards should remain readable
.container-fluid	100% width at every viewport	A full-bleed application or edge-to-edge section needs all available space

See Bootstrap’s container documentation for the default width tiers. You can use a fluid outer section and a regular container inside it when only the background should span the viewport.

3. Build a layout with rows and columns

Bootstrap’s grid has 12 columns. A class without a breakpoint applies from the smallest viewport upward; a class with a breakpoint starts at that width and continues above it. In this example each section is full width on narrow screens and half width from md upward.

<main class="container py-4">
  <div class="row g-4">
    <section class="col-12 col-md-6">
      <article class="card h-100">
        <div class="card-body">
          <h2 class="h4">Documentation</h2>
          <p>Readable content that stacks on small screens.</p>
        </div>
      </article>
    </section>
    <section class="col-12 col-md-6">
      <article class="card h-100">
        <div class="card-body">
          <h2 class="h4">Examples</h2>
          <p>A second column when the viewport has room.</p>
        </div>
      </article>
    </section>
  </div>
</main>

g-4 adds consistent gutters. The row must be inside a container, and columns must be direct children of the row for the grid’s spacing and wrapping to work predictably.

Bootstrap 5 breakpoints

Name	Minimum viewport	Example
xs	0px (base)	col-12
sm	576px	col-sm-6
md	768px	col-md-6
lg	992px	col-lg-4
xl	1200px	col-xl-3
xxl	1400px	col-xxl-2

These are viewport thresholds, not device names. Pick the point where your content becomes cramped or leaves too much empty space. Bootstrap documents the mobile-first model and Sass customization in its breakpoint guide.

4. Add a responsive, accessible navbar

.navbar-expand-lg keeps links expanded at 992px and above and collapses them below that width. The button’s aria-controls, aria-expanded and accessible label should match the collapse element.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="/">Site name</a>
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#mainNav"
            aria-controls="mainNav" aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#docs">Docs</a></li>
        <li class="nav-item"><a class="nav-link" href="#examples">Examples</a></li>
      </ul>
    </div>
  </div>
</nav>

The collapse interaction is a JavaScript plugin. Load bootstrap.bundle.min.js, which includes the dependencies needed by Bootstrap’s interactive components. Use a semantic <nav> landmark as shown. More options are covered in the Bootstrap navbar documentation.

5. Make images responsive

Add .img-fluid to content images so their rendered width cannot exceed the parent while their height keeps the intrinsic aspect ratio.

<img src="hero.jpg" class="img-fluid" alt="Team reviewing a responsive layout">

For a caption, wrap the image in <figure> and use Bootstrap’s figure utilities. See the figures documentation.

6. Select breakpoints by content

Start with the narrow layout, then add only the changes that improve the wider view.

1. Write the smallest layout with readable type and controls that fit.
2. Resize until a row feels crowded or a navigation list becomes unwieldy.
3. Choose the nearest Bootstrap threshold and add a class such as col-md-6 or navbar-expand-lg.
4. Repeat for the next meaningful change. Several small transitions are valid; not every page needs every breakpoint.

Use utilities such as text-center text-md-start or d-none d-md-block only when the content genuinely needs different presentation. Avoid naming classes after a particular phone or tablet model.

7. Test the page at real layout boundaries

• Check widths just below and above 576px, 768px, 992px, 1200px and 1400px when those thresholds are used.
• Look for horizontal scrolling, clipped buttons, long unbroken strings and oversized media.
• Open the navbar at its collapsed width and verify keyboard focus, the visible label and the expanded state.
• Test long translations, zoomed text and content with missing images.
• Inspect network requests and the browser console for a missing CSS or JavaScript asset.

These checks are practical recommendations for validating your page; the breakpoint values themselves come from Bootstrap’s documentation.

8. Common problems and fixes

Symptom	Likely cause	Fix
Mobile layout appears zoomed out	Viewport meta tag is missing or malformed	Add the exact width=device-width, initial-scale=1 tag in <head>.
Navbar button does nothing	Bootstrap JavaScript is absent, the wrong major version is loaded, or the target ID differs	Load the matching bundle and ensure data-bs-target="#mainNav" matches id="mainNav".
Columns have unexpected spacing	Columns are not direct children of a .row, or the row is outside a container	Use .container > .row > .col-* and apply gutters on the row.
Classes seem ignored	CSS from another Bootstrap major version or a later custom rule overrides them	Match all snippets to one version and inspect computed styles.
Image overflows its card	The image lacks responsive sizing or a long intrinsic width	Add .img-fluid; constrain the parent and provide a useful alt.
Content is hidden at an unexpected width	A display utility such as d-none is combined with the wrong breakpoint	Trace each responsive utility and confirm its mobile-first starting point.
Layout works locally but not after deployment	CDN blocked, incorrect asset path, or integrity mismatch	Check the browser network panel, use the exact versioned URLs and verify HTTPS and integrity attributes.

9. Performance, reliability and maintenance

• Pin a Bootstrap major and preferably a specific release so a future update does not silently change styles.
• Use the minified CSS and bundle in production, and serve them through a reliable HTTPS asset path.
• Load only the JavaScript needed for interactive components when your build setup supports selective imports.
• Keep image files appropriately sized; .img-fluid prevents overflow but does not reduce download bytes.
• Prefer semantic HTML and progressive enhancement so the page remains understandable if a plugin fails.
• When customizing Sass breakpoints, document the values and rebuild every dependent utility consistently.

Or skip the browser setup

If you need rendered screenshots of your responsive page for documentation, visual checks or previews, ScreenshotNeo provides a single GET request. It accepts consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets before capture; each step can be disabled. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing state. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.

See the ScreenshotNeo API documentation for all options, including viewport presets, full-page capture, custom CSS and JavaScript, waits, request blocking, cookies, headers, geolocation and signed links.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/bootstrap-page -o shot.webp

Python

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/bootstrap-page"}, timeout=90)
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/bootstrap-page' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Free accounts include 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

FAQ

Should I use .container or .container-fluid?

Use .container when readable maximum line lengths matter. Use .container-fluid when content should remain full width.

What does col-md-6 mean?

It makes the column half of the 12-column grid from 768px upward. Below that, add a base class such as col-12 if you want it full width.

Do all responsive pages need Bootstrap JavaScript?

No. CSS grid, containers and utilities work without it. Interactive components such as a collapsing navbar require the matching JavaScript bundle.

Can I change Bootstrap’s breakpoint values?

Yes. Bootstrap’s Sass variables can be customized, but rebuild the framework and keep the values documented for your team.