Bootstrap is a free, open-source toolkit for building websites quickly, providing ready-made styles and interactive components so a page can look polished without writing every rule of CSS from scratch.

The problem it solves

Making a website look good and work correctly across phones, tablets and desktops takes a large amount of careful CSS, along with cross-browser testing most teams do not have time for on every single project. Bootstrap has already solved that problem once, thoroughly, and packaged the result as reusable classes that any project can apply immediately.

What Bootstrap actually gives you

• A responsive grid system for arranging content into rows and columns that adapt to screen size.
• Pre-styled components such as buttons, forms, cards, navigation bars and modals.
• A large set of utility classes for spacing, colour, text alignment and layout, avoiding the need for custom CSS for small adjustments.
• Sensible, consistent typography and visual defaults applied automatically across the whole page.

Adding Bootstrap to a page

The fastest way to start is linking it directly from a CDN inside the page head, with no installation step required:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

From that point, styling an element is as simple as adding the right class name:

<button class="btn btn-primary">Click me</button>

Customising instead of fighting the defaults

Rather than overriding Bootstrap's compiled CSS with increasingly specific custom rules, a cleaner long-term approach is compiling Bootstrap from its own Sass source and changing the variables it exposes, such as colours and spacing, before the build runs. This keeps a project's visual identity organised in one place and much easier to maintain as Bootstrap itself is updated over time.

Is it the right choice?

Bootstrap is an excellent fit when a clean, responsive, professional-looking site needs to be built quickly, which describes the large majority of business sites, admin panels and internal tools. For a highly distinctive, brand-driven design, more custom CSS is usually still written on top, but even then Bootstrap remains a solid, well-tested foundation to build from rather than starting completely from nothing.

A note on alternatives

Other approaches exist, such as utility-first frameworks that provide only small building-block classes with no pre-styled components, or writing all CSS by hand. Bootstrap sits closer to the component-focused end of that spectrum, which is exactly why it tends to get a working, good-looking page finished faster, at the cost of slightly more effort later if a site needs to look truly unlike every other Bootstrap site.

The grid is the foundation of almost every Bootstrap layout. It splits the page into rows and up to twelve columns, giving a consistent, predictable way to arrange content that automatically adapts across screen sizes.

The three building blocks

• A container wraps the page content and centres it, with sensible side margins.
• A row holds one or more columns and clears any spacing quirks between them.
• Columns hold the actual content and sit side by side inside a row.

A simple two-column layout

<div class="container">
  <div class="row">
    <div class="col">Left</div>
    <div class="col">Right</div>
  </div>
</div>

Without a specific width given to either column, Bootstrap splits the available space evenly between them.

Choosing exact widths

The grid is based on twelve units, so a number after col- sets how many of those twelve units a column occupies:

<div class="col-8">Main</div>
<div class="col-4">Sidebar</div>

Eight plus four adds up to twelve, so these two columns fill the row exactly, with the main area taking twice the width of the sidebar.

Responsive columns

Adding a breakpoint, such as md, changes a column's width only from that screen size upward, letting one structure serve every device:

<div class="col-12 col-md-6">Half on desktop, full on mobile</div>

Container versus container-fluid

A plain container has a maximum width and centres itself with margin on either side, which usually looks best for typical content pages. container-fluid instead always stretches to fill the full width of the screen, better suited to dashboards or layouts that want to use every available pixel.

Gutters and nesting

Bootstrap automatically adds small gaps, called gutters, between columns, and the g classes control their size, such as g-4 for larger spacing. A row can also be nested inside a column, useful for building more complex layouts like a sidebar containing its own smaller grid:

<div class="col-8">
  <div class="row">
    <div class="col-6">Nested left</div>
    <div class="col-6">Nested right</div>
  </div>
</div>

A common mistake

Columns need a row as their direct parent, and a row generally needs a container around it. Skipping the container is sometimes fine, but placing columns directly without a wrapping row often causes spacing and alignment to look subtly wrong, since row supplies the negative margin that gutters between columns depend on.

Buttons are one of the most frequently used elements on any website, and Bootstrap turns them from plain, browser-default rectangles into consistent, professional-looking controls with just a couple of class names.

The basic button

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>

The btn class supplies the shared shape, padding and hover behaviour, while the second class chooses the colour, which should generally match the meaning of the action, such as danger for anything destructive.

Outline buttons

<button class="btn btn-outline-primary">Outline</button>

An outline button shows only a coloured border and text until hovered, giving a lighter, less dominant look that suits secondary actions sitting next to a more important primary button.

Sizes

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-sm">Small</button>

Disabled and full-width buttons

<button class="btn btn-primary" disabled>Unavailable</button>
<button class="btn btn-primary w-100">Sign in</button>

The disabled attribute both prevents clicks and visually fades the button, making it clear the action is not currently available. Adding w-100 stretches a button to fill its container, a pattern especially common on mobile forms.

Button groups

Related actions can be grouped so they appear visually connected, useful for something like a set of view options:

<div class="btn-group">
  <button class="btn btn-outline-primary">Day</button>
  <button class="btn btn-outline-primary">Week</button>
  <button class="btn btn-outline-primary">Month</button>
</div>

Buttons that look active

Adding the active class visually marks a button as the currently selected option, commonly toggled with a small amount of JavaScript when the user clicks between choices in a group.

Using button classes on links

The exact same classes work on an anchor tag, letting a link look identical to a real button whenever it navigates somewhere rather than submitting a form:

<a href="/signup" class="btn btn-primary">Get started</a>

A quick note on accessibility

A button used purely for its icon, with no visible text, should still include an aria-label describing its purpose, since screen readers otherwise have nothing meaningful to announce, and a sighted user hovering an icon-only button benefits from the same clarity a title attribute or tooltip provides.

Forms are how users provide information to a site, and Bootstrap styles every common form element consistently, so fields, labels and buttons line up neatly without custom CSS.

A basic input

<label class="form-label">Email</label>
<input type="email" class="form-control">

The form-control class gives an input its full-width, evenly padded appearance, along with a clear focus outline when the field is selected.

Spacing fields correctly

<div class="mb-3">
  <label class="form-label">Name</label>
  <input class="form-control">
</div>

Wrapping each field with a margin utility such as mb-3 keeps fields from crowding together, which otherwise makes a form feel cramped and harder to scan quickly.

Dropdowns and checkboxes

<select class="form-select">
  <option>One</option>
  <option>Two</option>
</select>

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="agree">
  <label class="form-check-label" for="agree">I agree</label>
</div>

Showing validation state

Adding is-valid or is-invalid to a field changes its border colour and can display feedback text, giving immediate visual confirmation of whether an entry was accepted:

<input class="form-control is-invalid">
<div class="invalid-feedback">Please enter a valid email.</div>

Grouping an input with extra content

An input group attaches related content directly to a field, such as a currency symbol or a search button, without it looking like a separate element:

<div class="input-group">
  <span class="input-group-text">$</span>
  <input type="number" class="form-control">
</div>

Floating labels

A floating label sits inside the field until the user starts typing, then animates upward, saving vertical space while still keeping the label visible:

<div class="form-floating">
  <input type="email" class="form-control" id="floatEmail" placeholder="name@example.com">
  <label for="floatEmail">Email address</label>
</div>

A tip on labels and accessibility

Always pair a label with its input using a matching id and for attribute. Beyond helping screen readers announce the field correctly, it also lets a user click the label text itself to focus the input, a small convenience that noticeably improves how a form feels to use, especially on a touch screen where tapping a small checkbox directly can be fiddly.

A card is a flexible, bordered box used to group related content, such as an image, a title and some descriptive text, and it is one of the most widely used components across real Bootstrap sites, from blog previews to product listings.

A basic card

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Some text.</p>
  </div>
</div>

Adding an image

<div class="card">
  <img src="photo.jpg" class="card-img-top">
  <div class="card-body">...</div>
</div>

card-img-top automatically rounds the image's top corners to match the card itself and stretches it to fill the card's width.

Headers, footers and lists

<div class="card">
  <div class="card-header">Featured</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Item one</li>
    <li class="list-group-item">Item two</li>
  </ul>
  <div class="card-footer text-muted">Updated recently</div>
</div>

Combining a header, a list group and a footer inside one card is a common pattern for things like a small settings panel or a short summary widget.

Adding a call to action

<div class="card-body">
  <a href="#" class="btn btn-primary">Read more</a>
</div>

Cards in a grid

<div class="row g-3">
  <div class="col-md-4"><div class="card h-100">...</div></div>
  <div class="col-md-4"><div class="card h-100">...</div></div>
</div>

Adding h-100 makes every card stretch to the full height of its column, so a row of cards with differing amounts of text still lines up evenly along the bottom instead of leaving ragged gaps.

Overlaying text on an image

A card-img-overlay places text directly on top of a background image, useful for a featured article or a promotional banner:

<div class="card text-white">
  <img src="banner.jpg" class="card-img">
  <div class="card-img-overlay">
    <h5 class="card-title">Featured</h5>
  </div>
</div>

Why cards are so common

Their appeal comes from being genuinely flexible: the same handful of classes can present a product, a blog post, a user profile or a dashboard statistic, which is exactly why cards show up in almost every real Bootstrap-based website rather than staying confined to one specific use case.

A navigation bar is the menu that sits at the top of most websites, and Bootstrap's navbar component is responsive by design, showing a full horizontal menu on larger screens and collapsing into a toggle button on smaller ones.

The basic structure

<nav class="navbar navbar-expand-lg">
  <div class="container">
    <a class="navbar-brand" href="#">MySite</a>
    <button class="navbar-toggler" data-bs-toggle="collapse"
            data-bs-target="#menu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="menu">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      </ul>
    </div>
  </div>
</nav>

How the mobile toggle works

The toggle button's data-bs-target points at the id of the collapsible section beside it. Below the navbar-expand-lg breakpoint, the link list hides completely until the button is tapped, at which point it slides open; above that breakpoint, the links simply show all the time and the button never appears.

You need Bootstrap's JavaScript

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

The collapsing behaviour depends entirely on this script being loaded, usually right before the closing body tag. Without it, the toggle button renders correctly but clicking it does nothing at all.

Dark and coloured navbars

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

navbar-dark switches the text colour to something readable against a dark background, while bg-dark supplies that dark background itself; the two are typically used together rather than one without the other.

Dropdowns inside a navbar

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">More</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option</a></li>
  </ul>
</li>

Fixed and sticky positioning

Adding fixed-top keeps the navbar pinned to the very top of the viewport even while the page scrolls, always overlapping the content beneath it. sticky-top behaves similarly but only takes effect once the user scrolls past where the navbar would normally sit, which usually feels less abrupt on a long page.

Highlighting the current page

Adding the active class to the current page's nav-link, usually set based on which route the server is rendering, gives visitors a clear visual cue of where they currently are within the site.

Bootstrap includes a large set of small utility classes that adjust spacing, layout and appearance directly in HTML, which handles a surprising number of everyday styling needs without writing a single line of custom CSS.

The spacing naming pattern

• m means margin, the space outside an element; p means padding, the space inside it.
• t, b, s and e mean top, bottom, start (left in most languages) and end (right); x and y mean both horizontal or both vertical sides together.
• A number from 0 to 5 sets the size, with 0 removing the space entirely and 5 being the largest preset step.

mt-3   margin on top
pb-4   padding on the bottom
mx-2   margin on left and right
p-0    no padding at all

Responsive spacing

A breakpoint can be inserted into the same pattern, so spacing only changes from a certain screen size upward, similar to how responsive grid columns work:

mt-2 mt-md-4

This applies a small top margin everywhere, but increases it once the screen reaches medium width, useful for giving elements more breathing room on larger screens without cramming a phone layout.

Flexbox utilities

Adding d-flex turns an element into a flex container, after which several more classes control how its children align:

<div class="d-flex justify-content-between align-items-center">
  <span>Left</span>
  <span>Right</span>
</div>

justify-content-between pushes the two children to opposite ends of the row, and align-items-center centres them vertically, a combination that comes up constantly in real layouts such as a header bar.

The gap utility

Inside a flex or grid container, gap classes add space between children directly, without needing individual margins on each item:

<div class="d-flex gap-3">...</div>

Other handy utilities

• text-center centres text horizontally.
• w-100 and h-100 set full width or full height relative to the parent.
• rounded and rounded-circle add rounded corners or a fully circular shape.
• shadow adds a soft drop shadow for a subtle sense of depth.

Why utilities are worth learning well

Small visual tweaks handled through utility classes stay directly visible right in the markup, rather than hiding away inside a separate stylesheet that grows a new rule for every minor adjustment. Once the naming pattern clicks, most everyday spacing and alignment work becomes a matter of combining a few short classes rather than writing and naming new CSS rules by hand.

Responsive design means a site adapts cleanly to whatever screen it is viewed on, from a small phone to a large desktop monitor, and Bootstrap builds this in through a set of breakpoints, which are specific screen-width thresholds that trigger layout changes.

The main breakpoints

• sm, roughly 576 pixels and up, covering larger phones.
• md, roughly 768 pixels and up, covering tablets.
• lg, roughly 992 pixels and up, covering laptops.
• xl, roughly 1200 pixels and up, and xxl beyond that, covering large desktop monitors.

Mobile-first thinking

Bootstrap is built mobile-first, meaning a class with no breakpoint suffix, such as col-12, applies at every screen size unless overridden. A class with a breakpoint, such as col-md-6, only takes effect from that width upward, layering larger-screen adjustments on top of a solid small-screen default rather than the other way around.

A responsive column example

<div class="col-12 col-md-6 col-lg-4">Content</div>

This element takes the full row on a phone, half the row on a tablet, and one third of the row on a laptop or larger, all from a single line of markup with no separate stylesheets for each device.

Hiding and showing elements responsively

<div class="d-none d-md-block">Visible from tablets upward</div>

Display utilities combine a breakpoint with a display value, so an element can be hidden entirely on phones but shown as a block once the screen grows large enough, useful for things like a sidebar that only makes sense once there is enough horizontal space for it.

Container widths at each breakpoint

A standard .container does not simply stretch to fill the screen; instead it snaps to a fixed maximum width at each breakpoint, growing in steps rather than continuously, which keeps line lengths of text comfortable to read even on very wide monitors.

A common responsive mistake

Building a layout by testing only at one browser width, then assuming it works everywhere, is one of the most frequent responsive design mistakes. Resizing the browser window continuously while developing, or using a browser's device toolbar to simulate different phones and tablets, catches awkward breakpoints far earlier than waiting for a real user to report a broken layout on their device.

Testing as you build

Treating responsiveness as something checked continuously while building a page, rather than a final pass done right before launch, consistently produces a more polished result, since small layout issues are far easier to fix the moment they appear than after an entire page has been built around an assumption that turned out to be wrong.

Colour and icons make a website considerably easier to scan at a glance and give it a friendlier, more finished feel, and Bootstrap provides simple, consistent tools for both without needing a design background.

Text colours

<p class="text-primary">Blue text</p>
<p class="text-danger">Red text</p>
<p class="text-muted">Grey, subtle text</p>

Background colours

<div class="bg-success text-white p-3">Green box</div>

Pairing a background colour with text-white, or occasionally text-dark on a lighter background, keeps text readable, since Bootstrap does not automatically adjust text colour to match whatever background colour happens to be applied.

The theme colour palette

Bootstrap ships with a small set of named theme colours meant to be used consistently across a whole site: primary for the main brand colour and default actions, secondary for less prominent actions, success for positive outcomes, danger for errors or destructive actions, warning for caution, and info for neutral notices.

Adding Bootstrap Icons

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<i class="bi bi-heart"></i>

Bootstrap Icons is a separate, free icon set that pairs naturally with the rest of the framework. Once linked, any icon becomes available simply by using its class name on an i element.

Icons inside buttons

<button class="btn btn-primary">
  <i class="bi bi-download"></i> Download
</button>

Combining a small icon with a short label is usually clearer than either alone, giving users both a quick visual cue and an unambiguous written description of what the button does.

Sizing icons

Bootstrap Icons scale with the surrounding font size by default, so wrapping an icon in an element with a larger font-size utility, such as fs-3, is enough to make it bigger without needing a dedicated icon-sizing system.

Using colour with meaning, and with contrast in mind

Keeping colours consistent with their meaning, green for success, red for danger, blue for primary actions, helps users learn the pattern quickly and navigate more confidently. It is equally important that text stays readable against its background; light grey text on a white background, or white text on a pale yellow warning background, can fail basic contrast guidelines even though it might look fine to someone without any visual impairment, so it is worth checking colour pairings rather than assuming Bootstrap's defaults are automatically accessible in every combination.

Good websites keep users informed about what just happened, and Bootstrap provides two lightweight components for exactly this: alerts for messages and badges for small counts or labels.

Basic alerts

<div class="alert alert-success">Saved successfully</div>
<div class="alert alert-danger">Something went wrong</div>
<div class="alert alert-warning">Please check your input</div>

The colour of an alert should always match the seriousness of its message, so a user can judge the situation from colour alone before even reading the text.

A dismissible alert

<div class="alert alert-info alert-dismissible">
  A quick note
  <button class="btn-close" data-bs-dismiss="alert"></button>
</div>

Adding alert-dismissible along with a btn-close button lets a user close the message manually. Bootstrap's JavaScript handles the fade-out animation and removal from the page automatically once clicked.

An alert with an icon

<div class="alert alert-danger d-flex align-items-center gap-2">
  <i class="bi bi-exclamation-triangle"></i>
  <span>Unable to save your changes.</span>
</div>

Badges

<button class="btn btn-primary">
  Inbox <span class="badge bg-light text-dark">4</span>
</button>

A badge is a small, rounded label typically used for a count, sitting neatly beside or inside other content without disrupting the surrounding layout.

Pill-shaped and positioned badges

<span class="badge rounded-pill bg-danger">New</span>

<button class="btn btn-primary position-relative">
  Messages
  <span class="badge rounded-pill bg-danger position-absolute top-0 start-100 translate-middle">3</span>
</button>

Combining position-absolute with top-0, start-100 and translate-middle pins a badge to the corner of whatever it sits inside, the familiar small notification dot pattern seen on many apps.

A related component: toasts

For a temporary message that appears briefly and disappears on its own, such as confirming an action succeeded without requiring the user to dismiss anything, Bootstrap's toast component fits better than a permanent alert, since it is designed specifically to show, wait, and then fade away automatically.

Keep messages clear

Regardless of which component is used, a message should be short, specific and written in plain language. Telling a user exactly what happened, and what to do next if something failed, is far more useful than a vague "an error occurred" that leaves them guessing about what comes next.