The Ultimate Comprehensive Guide for Mastering Bootstrap

Bootstrap is a free, open-source toolkit of CSS and JavaScript for building responsive websites: a 12-column grid, ready-made components such as navbars, cards, forms and modals, and hundreds of small utility classes. It lets you build a clean, mobile-friendly site without designing every button yourself. This guide covers Bootstrap 5.3, the current major version, from adding it to a page to customising it and avoiding the usual mistakes.

1. What Bootstrap gives you

Bootstrap was created at Twitter and released in 2011. Version 5 dropped jQuery and Internet Explorer support. Version 5.3 added colour modes and many CSS variables. At the time of writing (September 2026), 5.3.8 is the latest release; check getbootstrap.com for newer versions.

2. Add Bootstrap to a page

The quickest start is a CDN. This starter page loads Bootstrap 5.3.8 with integrity hashes, so the browser refuses a file that has been tampered with:

<!doctype html>
<html lang="en" data-bs-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My site</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
        crossorigin="anonymous">
</head>
<body>
  <main class="container py-5">
    <h1>Hello, Bootstrap</h1>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
          crossorigin="anonymous"></script>
</body>
</html>

The viewport meta tag is essential; without it, phones show a shrunk desktop layout. The bundle file includes Popper, which dropdowns, tooltips and popovers need.

You have three ways to install it:

For an npm project:

npm create vite@latest my-site -- --template vanilla
cd my-site
npm install bootstrap @popperjs/core
npm install --save-dev sass

Then import Bootstrap in your entry file, import './scss/styles.scss' and import * as bootstrap from 'bootstrap', and run npm run build to produce the files you upload.

3. The grid system

Every layout follows the same pattern: a container holds rows, and rows hold columns. A row has 12 units; col-md-6 takes half the width from the medium breakpoint up.

Bootstrap is mobile-first: a class applies at its breakpoint and above. Without a breakpoint class, columns stack on small screens.

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">Service one</div>
    <div class="col-12 col-md-6 col-lg-4">Service two</div>
    <div class="col-12 col-md-12 col-lg-4">Service three</div>
  </div>
</div>

This shows one column on phones, two on tablets and three on laptops. g-4 sets the gap (gutter) between columns. Use container-fluid for full width, and row-cols-md-3 when every column should be the same width.

4. Components: a responsive navbar and cards

A navbar that collapses into a menu button on small screens:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="index.html">Brand</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 active" aria-current="page" href="index.html">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

A card for a product or service:

<div class="card h-100 shadow-sm">
  <img src="img/shop.webp" class="card-img-top" alt="Our shop front" loading="lazy">
  <div class="card-body">
    <h2 class="h5 card-title">Home delivery</h2>
    <p class="card-text">Orders placed before 2 pm arrive the same day.</p>
    <a href="delivery.html" class="btn btn-primary">Learn more</a>
  </div>
</div>

Put cards inside grid columns; h-100 makes cards in the same row equal height. Modals, accordions, tabs and toasts follow the same idea: copy the markup from the official documentation and change the content, keeping the aria-* attributes.

5. Forms and validation

Bootstrap 5 styles form controls with form-label, form-control, form-select and form-check. For validation messages, add novalidate and the needs-validation class to the form, a required attribute to fields, and an invalid-feedback element after each field. Then add this script:

document.querySelectorAll('.needs-validation').forEach((form) => {
  form.addEventListener('submit', (event) => {
    if (!form.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
    form.classList.add('was-validated');
  });
});

Browser-side validation only helps the visitor. Always validate again on the server, because anyone can bypass the browser.

6. Utilities and colour modes

Utilities let you adjust a component without writing CSS: mt-3 (margin-top), px-4 (horizontal padding), d-none d-md-block (hide on phones), d-flex justify-content-between align-items-center, text-body-secondary, rounded-3, shadow-sm. Spacing runs from 0 to 5, and adding a breakpoint (mb-md-0) makes it responsive.

Set data-bs-theme="dark" on the html element for a dark theme, or on a single element to make only that section dark. Use the bg-body, bg-body-tertiary and text-body classes rather than fixed colours like bg-light, so your page follows the theme.

7. Customise without fighting Bootstrap

In Bootstrap 5.3, most components read CSS variables, so you can restyle them after loading Bootstrap:

.btn-primary {
  --bs-btn-bg: #1d4ed8;
  --bs-btn-border-color: #1d4ed8;
  --bs-btn-hover-bg: #1e40af;
  --bs-btn-hover-border-color: #1e40af;
}

For a full theme, use Sass in an npm project. Set variables before importing Bootstrap:

$primary: #1d4ed8;
$border-radius: .5rem;
$font-family-sans-serif: "Inter", system-ui, sans-serif;

@import "bootstrap/scss/bootstrap";

Bootstrap 5.3 still uses Sass @import, so recent Dart Sass versions print deprecation warnings when you build. The build still works.

8. Icons, performance and alternatives

Bootstrap Icons is a separate free library of more than 2,000 icons. Add its stylesheet ([email protected] on jsDelivr) and use them as bi bi-telephone classes on an i element, or paste the SVG directly. Give icon-only buttons an aria-label.

The full compiled CSS is about 230 KB before compression. To keep pages fast: import only the Sass parts you use in an npm build, compress images and serve them as WebP, add loading="lazy" to images below the fold, and check that your CSS and JavaScript are served compressed (gzip or Brotli).

If you prefer to write layouts directly in HTML with small utility classes and no ready-made components, look at Tailwind CSS; see the Tailwind CSS handbook. For the fundamentals underneath both, see the CSS guide.

9. Running a Bootstrap site on Domain India

A Bootstrap site is static HTML, CSS and JavaScript, so it runs on any Domain India shared hosting plan. You don't need Node.js on the server. Build on your computer, then upload the output folder to public_html with the File Manager or FTP, using the upload settings guide. Every plan includes free SSL, which also lets you load Bootstrap from a CDN without mixed-content warnings.

If you want a business website without writing HTML at all, the AI Website Builder builds and hosts one for you.

The price on the card is a live Domain India list price and excludes 18% GST.

Ready to publish your Bootstrap site? Upload it with the File Manager, or compare plans on DirectAdmin hosting and cPanel hosting.