Bootstrap Introduction and Setup

Bootstrap is the most widely used open-source CSS framework for building responsive, mobile-first websites. Originally created at Twitter in 2011, it now powers millions of sites because it lets you assemble polished layouts with ready-made classes instead of writing every style by hand. In this first lesson you will learn what Bootstrap actually is, why teams still choose it in the age of utility frameworks, and how to set up Bootstrap 5 in a project in under five minutes.

What Bootstrap Gives You

Bootstrap ships three main things: a responsive grid system, a large library of pre-styled components (buttons, navbars, cards, modals and more), and hundreds of utility classes for spacing, color, display and alignment. Because Bootstrap 5 dropped the jQuery dependency, its JavaScript components now run on plain vanilla JS, which keeps your pages lighter and easier to integrate with React, Vue or no framework at all.

Key reasons developers pick Bootstrap:

Speed: prototype a full page in minutes using documented classes.
Consistency: every component follows the same design language and naming rules.
Responsiveness: the grid and utilities adapt to phones, tablets and desktops automatically.
Browser support: styles are tested across all modern browsers.
Community: enormous ecosystem of themes, templates and answered questions.

Setup Option 1: CDN (Fastest)

The quickest way to try Bootstrap is loading it from a CDN. Add one stylesheet link in the head and one script bundle before the closing body tag:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Bootstrap Page</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="text-primary">Hello, Bootstrap!</h1>
    <button class="btn btn-success">It works</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

The bootstrap.bundle.min.js file includes Popper.js, which tooltips, dropdowns and popovers need, so you do not have to load it separately.

Setup Option 2: npm (For Real Projects)

When you use a build tool such as Vite or webpack, install Bootstrap as a dependency so you can customize it later with Sass:

bash

npm install bootstrap@5.3.3

Then import it in your entry JavaScript or Sass file:

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";

The Viewport Meta Tag Matters

Bootstrap is mobile-first, meaning its styles are written for small screens first and enhanced for larger ones. For that to work on phones, the viewport meta tag shown above is required. Without it, mobile browsers render the page at desktop width and then shrink it, breaking every responsive behavior.

Verifying Your Setup

Open the example page in a browser. If the heading renders in Bootstrap blue and the button appears green with rounded corners, the CSS loaded correctly. To confirm JavaScript works, add a data-bs-toggle component such as a dropdown later in this course and check that it opens on click.

Key Takeaways

Bootstrap is a mobile-first CSS framework offering a grid, components and utilities.
Bootstrap 5 needs no jQuery; the bundle file already includes Popper.js.
Use the CDN for quick demos and npm for production projects you plan to customize.
Always include the viewport meta tag so responsive styles work on mobile.

Next up: Containers and the Grid System, where you will learn how Bootstrap structures every layout.