Bootstrap Introduction

Bootstrap is the world's most popular open-source CSS framework. It provides a collection of ready-made components, a powerful grid system, and helpful utility classes that let you build responsive, mobile-first websites quickly and consistently — without writing a lot of custom CSS from scratch.

What is Bootstrap?

Bootstrap is a free, open-source front-end framework
Originally created by Twitter developers in 2011
It includes HTML, CSS, and JavaScript-based design templates
It is built around a 12-column responsive grid system
Bootstrap 5 is the latest major version (no jQuery dependency)

Why Use Bootstrap?

Building a website from scratch requires a lot of effort. Bootstrap solves common problems by giving you:

Responsive layout — pages automatically adjust for phones, tablets, and desktops
Pre-styled components — buttons, cards, modals, navbars, and more, ready to use
Cross-browser consistency — looks the same in Chrome, Firefox, Edge, and Safari
Faster development — less custom CSS to write
Strong community — huge ecosystem of themes, plugins, and documentation

Bootstrap vs Plain CSS

Feature	Plain CSS	Bootstrap
Responsive grid	Write manually	Built-in (12-col grid)
UI Components	Build from scratch	Ready-to-use
JavaScript widgets	Needs custom JS	Included (modals, dropdowns…)
Learning curve	Low (just CSS)	Low (class-based)
File size	Minimal	Larger (CDN makes it fast)

How to Add Bootstrap to Your Page

The easiest way to get started is to include Bootstrap from a CDN (Content Delivery Network) — no download required.

Step 1 — Add the CSS in <head>

Paste this <link> tag inside your HTML <head> section:

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

Step 2 — Add the JS before </body>

Paste this <script> tag just before the closing </body> tag to enable interactive components like modals and dropdowns:

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

Step 3 — A Minimal Bootstrap Page

Here is a complete, working Bootstrap starter template:

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

    <div class="container">
        <h1 class="text-primary mt-4">Hello, Bootstrap!</h1>
        <p class="lead">This is my first Bootstrap page.</p>
        <button class="btn btn-success">Click Me</button>
    </div>

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

Note: The meta name="viewport" tag is required for Bootstrap's responsive behaviour to work correctly on mobile devices.

Key Bootstrap Concepts at a Glance

Concept	Description	Example Class
Container	Centers and constrains your page content	`container`, `container-fluid`
Grid	12-column layout system using rows and columns	`row`, `col-md-6`
Components	Ready-made UI elements	`btn`, `card`, `navbar`
Utilities	Helper classes for spacing, color, text, etc.	`mt-3`, `text-center`, `bg-dark`
Breakpoints	Screen size targets for responsive design	`sm`, `md`, `lg`, `xl`

Key Points to Remember

Bootstrap is class-based — you style elements by adding predefined class names
Always include the viewport meta tag for responsive behaviour
Bootstrap 5 does NOT require jQuery — it uses vanilla JavaScript
The CDN approach is the fastest way to start — no installation needed
You can customise Bootstrap by overriding its CSS with your own stylesheet

Next Lesson »