Bootstrap: Introduction to Bootstrap and Installation

1. Lesson Overview

(1) Prerequisites

Master basic HTML tags (div, p, h1~h6, a, img)
Understand CSS selectors and common properties (color, margin, padding, font-size)

(2) 🎯 What You Will Learn

Understand what Bootstrap is and its core capabilities
Learn to install Bootstrap 5.3 via CDN
Independently build the first Bootstrap page
Master Bootstrap version selection and comparison
Understand Bootstrap class naming conventions

(3) Pain Points

Alice, a beginner who has just completed HTML and CSS studies, wants to create a personal homepage featuring a navbar, cards, tables, and carousel—but writing custom CSS from scratch is too slow.

(4) Solution

Bootstrap is currently the most popular front-end CSS framework. It provides a complete library of components and a responsive grid system, allowing you to quickly build beautiful, multi-device compatible web pages without writing CSS from scratch.

Understanding Approach: Writing CSS manually is like buying ingredients, chopping vegetables, and cooking yourself; using Bootstrap is like ordering takeout—you select the components, and it handles the styling while you focus on assembly.

(5) Benefits

After adopting Bootstrap, Alice only needs to introduce a CDN and add corresponding classes to quickly build professional pages with navbars, cards, and tables. The workload that originally required hundreds of lines of hand-written CSS is now reduced to just dozens of lines of HTML.

2. What is Bootstrap

Bootstrap was initially developed by Twitter engineers Mark Otto and Jacob Thornton in 2011, originally named Twitter Blueprint. After more than a decade of major version iterations, the current Bootstrap 5.3 has become a mature and stable framework.

(1) Core Features

Bootstrap provides four key capabilities:

Capability	Description	Example
Grid System	12-column responsive layout, adapting to mobile/tablet/desktop	`col-md-6 col-lg-4`
Component Library	70+ ready-made HTML/CSS/JS components	Buttons, Cards, Navbars, Modals
Utility Classes	Atomic CSS utilities, eliminating custom styles	`mt-3`, `text-center`, `d-flex`
JS Plugins	No jQuery required, based on native JavaScript	Carousel, Popups, Accordion

(2) Comparison with Other Frameworks

Dimension	Bootstrap	Tailwind CSS	Pure Hand-written CSS
Learning Curve	Low (Intuitive class naming)	Medium-High (Many utility classes to memorize)	High (Requires layout/selectors/compatibility knowledge)
Development Speed	Fast	Fast	Slow
Customization Flexibility	Medium (Sass variables coverage)	High (Design system-level customization)	Highest
File Size	Medium (~30KB gzip)	Small (On-demand compilation)	Depends on code volume
Component Richness	70+ Components	No Built-in Components	All Custom-built
Applicable Scenarios	Rapid Development, Admin Dashboards, MVP	Design Systems, Brand Customization	Core Business, Performance Optimization

(3) Version History

timeline
    title Bootstrap Version Timeline
    2011 : v2.0 : Twitter Blueprint Open Source
    2013 : v3.0 : Flat Design + Mobile First
    2018 : v4.0 : Flexbox Grid + Sass
    2021 : v5.0 : Removed jQuery + CSS Variables
    2023 : v5.3 : Dark Mode + Accent Colors

Output: Bootstrap 5.3 component effects where styles are active (e.g., buttons, cards, carousel, accordion), with the page defaulting to the Bootstrap default theme (light mode) and responsive grid.

3. Installing Bootstrap

The first 15 lessons of this tutorial use the CDN method—no files need to be downloaded; simply introduce two lines of code in the HTML.

(1) Method One: CDN Introduction (Recommended)

▶ Example: Basic Template via CDN

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Bootstrap Page</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1>Hello, Bootstrap!</h1>
  <p class="lead">This is my first Bootstrap page.</p>

  <!-- Bootstrap JS + Popper (needed for interactive components) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ Try it Yourself

Output: Bootstrap 5.3 component effects where styles are active (e.g., buttons, cards, carousel, accordion), with the page defaulting to the Bootstrap default theme (light mode) and responsive grid.

Key Points:

CSS is loaded within <head>, JS placed before </body>
bootstrap.bundle.min.js includes Popper.js (required for popup components)
Use of min version (compressed) reduces loading time

(2) Method Two: npm Installation (Used in Phase 5)

BASH

npm install bootstrap@5.3.3

JAVASCRIPT

// import in JS entry file
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

▶ Try it Yourself

Output: Bootstrap 5.3 component effects where styles are active (e.g., buttons, cards, carousel, accordion), with the page defaulting to the Bootstrap default theme (light mode) and responsive grid.

This method should be combined with Sass customization in Phase 5; it can be skipped during the initial phase.

4. Complete Page Example

The following is a complete Bootstrap page containing a navbar, buttons, cards, and grid layout:

▶ Example: Comprehensive Personal Homepage Template

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Demo - Alice's Portfolio</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Alice</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navMenu">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero Section -->
  <div class="bg-primary text-white text-center py-5">
    <div class="container">
      <h1 class="display-4">Hi, I'm Alice</h1>
      <p class="lead">A web developer who loves building clean, responsive websites.</p>
      <a href="#" class="btn btn-light btn-lg">View My Work</a>
    </div>
  </div>

  <!-- Cards -->
  <div class="container my-5">
    <div class="row">
      <div class="col-md-4 mb-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Web Design</h5>
            <p class="card-text">Clean and modern interfaces built with Bootstrap.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Responsive Layout</h5>
            <p class="card-text">Works perfectly on mobile, tablet, and desktop.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">UI Components</h5>
            <p class="card-text">Over 70 ready-to-use components at your fingertips.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

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

▶ Try it Yourself

Output: Bootstrap 5.3 component effects where styles are active (e.g., buttons, cards, carousel, accordion), with the page defaulting to the Bootstrap default theme (light mode) and responsive grid.

This code consists of only about 40 lines of HTML—compared to pure CSS hand-writing which would require at least 150+ lines.

5. Bootstrap Class Naming Rules

Bootstrap class naming follows a fixed pattern; understanding this model allows you to "guess" most class names:

TEXT

{property}{direction}-{size}-{value}

Part	Meaning	Example
`property`	Property Abbreviation	`m`=margin, `p`=padding, `text`=text-align
`direction`	Direction (Optional)	`t`=top, `b`=bottom, `s`=start, `e`=end
`size`	Breakpoints (Optional)	`sm`, `md`, `lg`, `xl`, `xxl`
`value`	Value	`0` ~ `5`, `auto`, `center`, `start`

For example, mt-md-3 sets margin-top: 1rem on md screens and above. This naming system runs throughout Bootstrap and will be elaborated in subsequent lessons.

(1) Bootstrap vs. Pure CSS Development Efficiency Comparison

Scenario	Native CSS	Bootstrap	Time Saved
Responsive 3-Column Grid	40+ lines of media queries	1 line `row-cols-md-3`	~90%
Navbar + Collapsible Menu	80+ lines CSS + JS	1 `navbar` component	~85%
Card-based Layout	60+ lines CSS	1 `card` component	~95%
Form Validation Styles	30+ lines CSS	`was-validated` class	~90%

(2) Bootstrap Version Selection Comparison

Version	jQuery	CSS Variables	Dark Mode	Grid	IE Support
v4.6	Required	None	None	Flexbox	✅
v5.0	Removed	Added	None	Flexbox + xxl	❌
v5.3	Removed	Enhanced	✅	Flexbox + CSS Grid helpers	❌

▶ Example: Verify Bootstrap Loading Success

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Verify Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container text-center py-5">
    <div class="spinner-border text-primary mb-3" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <h3>Bootstrap 5.3.3 is loaded</h3>
    <p class="text-success"><strong>✓</strong> CSS is working</p>
    <button class="btn btn-primary" onclick="alert('JS is working!')">Test JS</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ Try it Yourself

Output: Bootstrap 5.3 component effects where styles are active (e.g., buttons, cards, carousel, accordion), with the page defaulting to the Bootstrap default theme (light mode) and responsive grid.

▶ Example: Quick Usage of Common Components

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Components</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-4">
    <span class="badge bg-primary">New</span>
    <span class="badge bg-success">Active</span>
    <span class="badge bg-danger">Expired</span>
    <div class="progress mt-3" style="height: 20px;">
      <div class="progress-bar bg-success" style="width: 75%">75% Complete</div>
    </div>
    <div class="alert alert-info mt-3">Info alert with an <a href="#" class="alert-link">example link</a>.</div>
  </div>
</body>
</html>

▶ Try it Yourself

Output: Bootstrap 5.3 component effects where styles are active (e.g., buttons, cards, carousel, accordion), with the page defaulting to the Bootstrap default theme (light mode) and responsive grid.

▶ Example: Developer Tools Debugging Techniques

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DevTools Practice</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-4">
    <h1>DevTools Practice</h1>
    <p class="text-muted">Open DevTools (F12) and inspect these Bootstrap elements.</p>
    <div class="row">
      <div class="col-4"><div class="bg-primary text-white p-3 rounded">Col 1</div></div>
      <div class="col-4"><div class="bg-success text-white p-3 rounded">Col 2</div></div>
      <div class="col-4"><div class="bg-info text-white p-3 rounded">Col 3</div></div>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

Output: Bootstrap 5.3 component effects where styles are active (e.g., buttons, cards, carousel, accordion), with the page defaulting to the Bootstrap default theme (light mode) and responsive grid.

❓ FAQ

Q Does Bootstrap 5 require jQuery?

A Not at all. Bootstrap 5 has completely removed jQuery dependencies; all JS plugins are implemented based on native JavaScript. You only need to introduce bootstrap.bundle.min.js to use all interactive components.

Q Should I choose Bootstrap or Tailwind?

A Choose Bootstrap for development speed and component richness; select Tailwind for highly customized design systems and strict brand styles. As a learning path, it is recommended to study Bootstrap first (low threshold, large community, advantageous for job hunting), followed by Tailwind.

Q Will loading via CDN be slow?

A Bootstrap's CDN files come from the jsDelivr global acceleration network with nodes in China. The compressed CSS is about 28KB and JS about 22KB, having minimal impact on page loading. Browsers will also cache CDN files, eliminating the need for repeated downloads on subsequent pages.

Q Can I use Bootstrap without prior JavaScript knowledge?

A Yes. The CSS portion of Bootstrap (grid, typography, buttons, cards, etc.) can be used independently of JS. Phase 1-2 are entirely CSS content, requiring no JS knowledge.

Q What are the main differences between Bootstrap 5 and 4?

A Bootstrap 5 removed jQuery dependencies, added support for CSS custom properties, improved the grid system (added xxl breakpoint), introduced dark mode, and dropped IE support. If migrating from v4, note changes such as left/right being replaced by start/end.

Q Are there single-point failure risks with the CDN method?

A This can be resolved through multi-CDN fallback strategies. When the primary CDN fails to load, fall back to an alternative CDN, or use the integrity attribute to verify file integrity. For production environments, consider hosting Bootstrap files on your own CDN.

📖 Summary

Bootstrap is a CSS framework providing Grid System + Component Library + Utility Classes + JS Plugins
Compared to pure hand-written CSS, development speed is significantly improved, suitable for rapidly building responsive pages
Recommended to introduce via CDN: one <link> + one <script> to get started
Class naming follows the {property}{direction}-{size}-{value} pattern, making it easy to memorize

📝 Exercises

⭐ Create a new HTML file and use the CDN method to import Bootstrap 5.3.3. Place an <h1> and <p class="lead"> in the page to observe default font and spacing effects.
⭐⭐ Refer to the "

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

Bootstrap: Introduction to Bootstrap and Installation

1. Lesson Overview

(1) Prerequisites

(2) 🎯 What You Will Learn

(3) Pain Points

(4) Solution

(5) Benefits

2. What is Bootstrap

(1) Core Features

(2) Comparison with Other Frameworks

(3) Version History

3. Installing Bootstrap

(1) Method One: CDN Introduction (Recommended)

▶ Example: Basic Template via CDN

(2) Method Two: npm Installation (Used in Phase 5)

4. Complete Page Example

▶ Example: Comprehensive Personal Homepage Template

5. Bootstrap Class Naming Rules

(1) Bootstrap vs. Pure CSS Development Efficiency Comparison

(2) Bootstrap Version Selection Comparison

▶ Example: Verify Bootstrap Loading Success

▶ Example: Quick Usage of Common Components

▶ Example: Developer Tools Debugging Techniques

❓ FAQ

📖 Summary

📝 Exercises

🙏 帮我们做得更好