NOA Labs

Bootstrap Introduction

What Bootstrap is, installing it via CDN or npm, and the container/row/column philosophy.

What is Bootstrap?

Bootstrap is a component-based CSS framework created at Twitter in 2011. Unlike a utility-first framework, Bootstrap ships pre-built, pre-styled components — navbars, buttons, cards, modals, forms — as ready-to-use CSS classes, so you can assemble a professional-looking UI quickly without designing every piece from scratch.

HTML
<button class="btn btn-primary">Save changes</button>
<div class="alert alert-warning">This action can't be undone.</div>

Bootstrap 5 (the current major version) dropped its jQuery dependency entirely — every interactive component (dropdowns, modals, tooltips, carousels) is implemented in vanilla JavaScript, and it dropped Internet Explorer support in favor of modern CSS features like custom properties and flexbox.

Installing Bootstrap

Via CDN — the fastest way to try it, no build tooling required:

HTML
<head>
    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        rel="stylesheet"
    >
</head>
<body>
    <!-- your content -->

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

The bundle JS file includes Popper.js (needed for dropdowns, tooltips, and popovers to position themselves correctly) — use the non-bundle version only if you're already loading Popper separately.

Via npm — for projects with a build step (Vite, webpack):

Bash
npm install bootstrap
Javascript
// app.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

npm installation also unlocks customizing Bootstrap's Sass source directly (covered in the Utilities & Customization page), which the CDN build doesn't allow.

The container → row → column philosophy

Nearly every Bootstrap layout follows the same three-level nesting pattern:

HTML
<div class="container">
    <div class="row">
        <div class="col">Column 1</div>
        <div class="col">Column 2</div>
    </div>
</div>
  • .container — centers content horizontally and applies responsive max-widths and side padding. .container-fluid is the full-width alternative (always 100% wide, no max-width cap).
  • .row — a flex container for columns; also cancels out the container's side padding using negative margins, so columns align flush with the container's edge.
  • .col (and its numbered/breakpoint variants, .col-md-6 etc.) — the actual content columns, built on Bootstrap's 12-column grid (covered in depth on the next page).

This structure exists because Bootstrap's grid is built on flexbox under the hood — .row sets display: flex; flex-wrap: wrap;, and columns are flex items sized by fractions of 12.

A minimal complete page

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Starter</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container py-5">
        <h1 class="mb-3">Welcome to NOA Labs</h1>
        <p class="text-muted">Learn to build fast with Bootstrap's components.</p>
        <button class="btn btn-primary">Get started</button>
    </div>

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

Common mistakes

  • Forgetting the JS bundle when using interactive components (dropdowns, modals, collapses) — the CSS alone only provides static appearance; the behavior is wired up by Bootstrap's JavaScript.
  • Nesting .row directly inside another .row instead of inside a .col — a row's negative margins are designed to be offset by a container's or column's padding, and skipping the column level throws off alignment.
  • Loading an old Bootstrap 4 CDN link alongside Bootstrap 5 npm packages (or vice versa) — mixing major versions breaks both the grid math and the JavaScript component APIs, which changed between versions.