Skip to main content
Bootstrap
CHAPTER 01 Beginner

Introduction to Bootstrap

Updated: May 18, 2026
5 min read

# CHAPTER 1

Introduction to Bootstrap

1. Chapter Introduction

Imagine you need to build a professional, mobile-friendly website in hours rather than weeks. Without a framework, you would write hundreds of lines of custom CSS for layouts, buttons, navigation bars, and modals. Bootstrap solves this problem by giving you a massive collection of pre-built, responsive UI components that work on every screen size right out of the box.

Bootstrap is the world's most popular CSS framework, downloaded over 20 million times per week. Used by Twitter, Spotify, and LinkedIn, it is the first tool most frontend developers reach for when building dashboards, landing pages, or web applications.

2. Learning Objectives

  • Explain what Bootstrap is and what problem it solves.
  • Understand Bootstrap's history and evolution.
  • List Bootstrap's key features.
  • Compare Bootstrap with TailwindCSS.
  • Understand responsive design principles.

3. What is Bootstrap?

Bootstrap is an open-source CSS and JavaScript UI framework originally created by Twitter engineers Mark Otto and Jacob Thornton in 2011. It provides:
  • A 12-column responsive grid system for layouts.
  • Pre-styled components (buttons, forms, cards, navbars, modals).
  • Utility classes for spacing, colors, typography, and display.
  • JavaScript plugins for interactive components (dropdowns, modals, carousels).

Analogy: Building a UI from scratch is like building a house with raw bricks. Bootstrap is like buying a LEGO set — all the pieces are pre-made, perfectly shaped, and snap together instantly.

4. History of Bootstrap

YearMilestone
2011Created internally at Twitter by Mark Otto & Jacob Thornton
2011Released as open-source on GitHub
2013Bootstrap 3 — mobile-first design introduced
2016Bootstrap 4 — Flexbox-based grid, dropped IE 8/9 support
2021Bootstrap 5 — Dropped jQuery dependency, new utilities API, RTL support

5. Key Features of Bootstrap

  1. 1. Responsive Grid System: 12-column layout that automatically adapts from mobile to desktop.
  1. 2. Ready-Made Components: 40+ pre-built UI components (cards, modals, navbars, carousels).
  1. 3. JavaScript Plugins: Interactive components with no custom JS required.
  1. 4. Utility Classes: Hundreds of single-purpose classes for spacing, colors, typography.
  1. 5. Customizable: Override defaults with CSS variables or custom Sass.
  1. 6. Cross-Browser Compatible: Works in all modern browsers.
  1. 7. Mobile-First: Designed for mobile screens first, scales up.

6. Bootstrap vs TailwindCSS

FeatureBootstrapTailwindCSS
TypeComponent frameworkUtility-first framework
Ready componentsYes — full styled componentsNo — build everything yourself
Learning curveEasyModerate
File size~25KB gzippedVariable (purged)
CustomizationGood (Sass/CSS vars)Excellent
JavaScriptBuilt-in pluginsNone
Best forRapid prototyping, dashboardsCustom designs, long-term projects

Rule of thumb: Use Bootstrap when you need to build fast with consistent UI. Use Tailwind when you want a completely custom design system.

7. Responsive Design Basics

Responsive design means your website looks good on all screen sizes — phones, tablets, and desktops — using the same HTML.
text
12345678 
Bootstrap Responsive Breakpoints:

xs  (<576px)   → Phones (portrait)
sm  (≥576px)   → Phones (landscape) / Small tablets
md  (≥768px)   → Tablets
lg  (≥992px)   → Laptops / Desktops
xl  (≥1200px)  → Large desktops
xxl (≥1400px)  → Very large monitors

8. Mini Project: Bootstrap Welcome Page

html
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Welcome to Bootstrap</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
</head>
<body>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">⚡ BootstrapApp</a>
    </div>
  </nav>

  <!-- Hero Section -->
  <div class="container text-center py-5">
    <h1 class="display-4 fw-bold text-primary">Welcome to Bootstrap!</h1>
    <p class="lead text-muted">The world&#039;s most popular CSS framework for building responsive websites.</p>
    <div class="d-flex gap-3 justify-content-center mt-4">
      <a href="#" class="btn btn-primary btn-lg">Get Started</a>
      <a href="#" class="btn btn-outline-secondary btn-lg">Learn More</a>
    </div>
  </div>

  <!-- Feature Cards -->
  <div class="container pb-5">
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card h-100 shadow-sm border-0">
          <div class="card-body text-center p-4">
            <div class="display-4 mb-3">🎨</div>
            <h5 class="card-title">Beautiful UI</h5>
            <p class="card-text text-muted">40+ ready-made components out of the box.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 shadow-sm border-0">
          <div class="card-body text-center p-4">
            <div class="display-4 mb-3">📱</div>
            <h5 class="card-title">Fully Responsive</h5>
            <p class="card-text text-muted">Mobile-first design that works on any screen.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 shadow-sm border-0">
          <div class="card-body text-center p-4">
            <div class="display-4 mb-3">⚡</div>
            <h5 class="card-title">Fast Development</h5>
            <p class="card-text text-muted">Build production UIs in hours, not days.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

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

9. Common Mistakes

  • Not including the viewport meta tag: Without <meta name="viewport">, Bootstrap's responsive classes won't work on mobile devices.
  • Mixing Bootstrap versions: Never mix Bootstrap 4 and 5 classes. They have different syntax for some utilities.

10. MCQs with Answers

Question 1

Bootstrap was originally created by?

Question 2

Bootstrap's grid system is based on how many columns?

Question 3

Which Bootstrap version dropped jQuery?

Question 4

What does "mobile-first" mean in Bootstrap?

Question 5

What is Bootstrap's md breakpoint width?

Question 6

Which is NOT a Bootstrap feature?

Question 7

What is the primary difference between Bootstrap and TailwindCSS?

Question 8

What file do you need to include Bootstrap's JavaScript interactive components?

Question 9

What class adds a responsive container in Bootstrap?

Question 10

Bootstrap uses what CSS approach for its grid system?

11. Interview Questions

  • Q: What is Bootstrap and what problems does it solve for frontend developers?
  • Q: How does Bootstrap differ from writing raw CSS?
  • Q: What is mobile-first design?

12. FAQs

  • Is Bootstrap free? Yes, completely open-source under the MIT license.
  • Do I need to know CSS to use Bootstrap? Basic CSS knowledge helps, but Bootstrap is designed for beginners.

13. Summary

Bootstrap is the fastest path from idea to polished, responsive UI. Its 12-column grid, 40+ components, and utility classes handle 90% of frontend UI needs without writing custom CSS. Bootstrap 5 is the current standard — no jQuery, modern utilities API, and excellent documentation.

14. Next Chapter Recommendation

In Chapter 2: Installing Bootstrap and Environment Setup, we add Bootstrap to a project three different ways — CDN, npm, and local download — and write our first styled page.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Next Chapter Installing Bootstrap and Environment Setup

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1