1. What is Bootstrap 5?

Bootstrap is the world's most popular open-source front-end framework. It ships a design system of CSS classes and a small JavaScript bundle so you can build professional, responsive websites without designing every button, form, or navigation bar from scratch. Version 5 removed the jQuery dependency, added a comprehensive utility API, introduced CSS custom properties, and modernised the grid with flexbox.

Bootstrap 5 targets modern browsers, ships in ~30 KB of gzipped JavaScript, and is published under the MIT licence — meaning you can use it freely in personal and commercial projects.

2. Installation & starter template

The fastest way to start is with a CDN. Copy the HTML below into a new index.html file, open it in any browser, and you have a working Bootstrap page.

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Bootstrap page</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1 class="mt-5">Hello, Bootstrap!</h1>
    <p class="lead">Drop any CodeShikhi component right here.</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

For production, prefer installing via npm i bootstrap and importing only the parts you use — you'll get smaller bundles and full Sass theming.

3. The 12-column grid

Bootstrap's grid uses three primitives: .container (a padded wrapper), .row (a horizontal flex track), and .col-* (a flexible cell). Every row is split into 12 equal columns, and each column can span a different width at each breakpoint.

html

<div class="container">
  <div class="row g-3">
    <div class="col-12 col-md-6 col-lg-4">Card 1</div>
    <div class="col-12 col-md-6 col-lg-4">Card 2</div>
    <div class="col-12 col-md-12 col-lg-4">Card 3</div>
  </div>
</div>

In the snippet above, the three cards stack on mobile, sit two per row on tablets, and align in a single row of three on large screens — with no custom CSS.

4. Responsive breakpoints

Bootstrap 5 defines six breakpoints. They power grid columns, spacing helpers, display utilities, and more.

Name	Infix	Min width	Typical device
Extra small	`—`	< 576px	Phones (portrait)
Small	`sm`	≥ 576px	Phones (landscape)
Medium	`md`	≥ 768px	Tablets
Large	`lg`	≥ 992px	Laptops
Extra large	`xl`	≥ 1200px	Desktops
XXL	`xxl`	≥ 1400px	Large desktops

5. Utility classes

Utilities let you build layouts and style small pieces of UI without writing new CSS. Combine spacing (p-4, mt-5), flexbox (d-flex, justify-content-between), colour, and typography helpers to compose almost anything.

html

<div class="d-flex justify-content-between align-items-center p-4 bg-light rounded shadow-sm">
  <h2 class="fs-4 mb-0 text-primary">Utilities are powerful</h2>
  <button class="btn btn-primary">Action</button>
</div>

6. Components

Bootstrap ships a library of ready-made components — navbars, cards, modals, carousels, accordions, alerts, dropdowns, offcanvas panels, and more. Each is designed to be accessible by default, keyboard-friendly, and easy to style.

Browse dozens of ready-to-copy examples on our components library — every card includes a live preview, source code, and step-by-step guidance.

7. Accessibility best practices

Bootstrap gives you accessible defaults, but you still have to wire them up correctly. Use semantic HTML5 landmarks (<nav>, <main>, <footer>), always label interactive elements with aria-label or visible text, keep focus outlines visible, and test every flow with the keyboard alone before shipping.

html

<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
  <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 active" aria-current="page" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Docs</a></li>
      </ul>
    </div>
  </div>
</nav>

Give every image a meaningful alt attribute (or alt="" if decorative).
Maintain a contrast ratio of at least 4.5:1 for body text.
Prefer <button> for actions and <a> for navigation.
Test modals, dropdowns, and offcanvas panels with Tab and Esc.

8. Customisation with Sass & CSS variables

Bootstrap exposes ~600 Sass variables and a growing set of CSS custom properties. To tweak the primary colour without recompiling Sass, override the variable in your own stylesheet:

css

:root {
  --bs-primary: #1d4ed8;
  --bs-body-font-family: "Inter", system-ui, sans-serif;
}

For deeper theming — new breakpoints, extra colours, custom spacing scale — install Bootstrap via npm and import the Sass entry points selectively.

9. Where to go next

Explore the component library and copy the sections you need.
Read curated tutorials on the CodeShikhi blog.
Set up your editor with our VS Code guide.
Download a complete Bootstrap starter from the downloads page.