Skip to content

Bootstrap Introduction

Bootstrap is the world's most popular CSS framework for building responsive, mobile-first websites. This introduction explains what Bootstrap includes, how it works, and why teams choose it over custom CSS.

Bootstrap Introduction Overview

Bootstrap is an open-source front-end toolkit originally built by Twitter engineers in 2011 and now maintained as an independent open-source project. It bundles a responsive 12-column grid, pre-styled components like buttons, cards, and navbars, and hundreds of utility classes for spacing, color, and layout.

Instead of writing CSS from scratch, you compose interfaces by combining Bootstrap classes directly in your HTML markup. The framework ships as compiled CSS and JavaScript bundles, or as Sass source files you can customize before compiling.

Concept Description Common Usage
Grid System 12-column responsive layout built with flexbox Building page structure with rows and columns
Components Pre-styled UI elements like buttons, cards, navbars Rapidly assembling common interface patterns
Utilities Single-purpose classes for spacing, color, display Fine-tuning layout without custom CSS
Sass Source Uncompiled .scss files with variables and mixins Customizing themes and rebuilding the framework
JavaScript Plugins Bundled scripts for modals, dropdowns, carousels Adding interactivity without writing custom JS

Bootstrap Introduction Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap Starter</title>
</head>
<body>
  <div class="container py-5">
    <h1 class="display-5 fw-bold">Hello, Bootstrap!</h1>
    <p class="lead">This page uses the Bootstrap grid and utility classes.</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>

This starter page links the Bootstrap CSS in the head and the bundled JavaScript, which includes Popper, before the closing body tag. The container, display-5, lead, and btn classes come straight from Bootstrap with no custom CSS required.

Top 10 Bootstrap Introduction Examples

These examples show the first Bootstrap classes and patterns most beginners reach for when starting a new page.

# Example Syntax
1 Container wrapper <div class="container">...</div>
2 Responsive row <div class="row">...</div>
3 Grid column <div class="col-md-6">...</div>
4 Primary button <button class="btn btn-primary">Click</button>
5 Lead paragraph <p class="lead">Intro text</p>
6 Text utility <p class="text-center text-muted">Centered</p>
7 Spacing utility <div class="mt-4 mb-2">Spaced block</div>
8 Bootstrap icon <i class="bi bi-star-fill"></i>
9 Card component <div class="card p-3">Card content</div>
10 Navbar shell <nav class="navbar navbar-expand-lg">...</nav>

Best Practices

  • Always include the viewport meta tag so Bootstrap's responsive grid works correctly.
  • Load the Bootstrap CSS before your own stylesheet so your overrides win.
  • Load the bundled JavaScript (bootstrap.bundle.min.js) if you need dropdowns, modals, or tooltips.
  • Read the version-specific documentation because class names change between Bootstrap 4 and 5.
  • Start with the grid and utilities before reaching for custom CSS.
  • Use the Sass source instead of the CDN once you need theme customization.
  • Keep your HTML semantic; Bootstrap classes should enhance markup, not replace it.

Common Mistakes

  • Forgetting the viewport meta tag, which breaks responsive behavior on mobile.
  • Mixing Bootstrap 4 class names like ml-2 with Bootstrap 5 names like ms-2.
  • Loading only bootstrap.min.js instead of the bundle, then wondering why dropdowns don't work.
  • Overriding Bootstrap styles with !important instead of proper specificity or Sass variables.
  • Not wrapping grid columns inside a row element.
  • Assuming Bootstrap replaces the need to learn HTML and CSS fundamentals.

Key Takeaways

  • Bootstrap is a CSS and JavaScript framework for building responsive UIs quickly.
  • It provides a 12-column grid, prebuilt components, and utility classes.
  • You can use it via CDN links or by compiling the Sass source.
  • Bootstrap 5 removed the jQuery dependency and renamed several utility classes.
  • Understanding the grid and utilities is the fastest path to Bootstrap fluency.

Pro Tip

Bookmark the official Bootstrap documentation for the exact version you're using, since class names and defaults change between major versions.

You now understand what Bootstrap is and why it's used. Continue to Bootstrap Basics to learn the framework's core building blocks.