What Bootstrap is
Bootstrap is a CSS framework: a big ready-made stylesheet with classes for the grid, buttons, forms, menus and other parts of an interface. Instead of writing CSS yourself, you add classes such as btn btn-primary to elements and get a neat button that looks the same in every browser. This course uses Bootstrap 5.3.
What Bootstrap is made of
| Part | What it gives you |
|---|---|
| Grid | Columns that rearrange to fit the screen width |
| Utilities | Small single-property classes: spacing, color, alignment |
| Components | Ready buttons, cards, menus, forms, tables |
| JavaScript | Behavior for modals, dropdowns, tabs, the carousel |
Bootstrap 5 does not need jQuery: its scripts are written in plain JavaScript.
When it fits
Bootstrap is good when you need an interface quickly and have no designer: a prototype, an admin panel, an internal company tool, a landing page to test an idea. It takes care of responsiveness, accessibility and a consistent look. If a project has its own unique design, you will keep overriding the ready styles — the last lesson of the course covers this.
In this course we build a landing page for the Tasko task service and a small admin dashboard for it.
Adding it from a CDN
A CDN is a network of servers that hands out popular files. Two lines are enough to add Bootstrap: the stylesheet in <head> and the script before the closing </body>. Create a project folder with an index.html file in it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tasko</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>Tasko</h1>
<p class="lead">A task planner for small teams.</p>
<button class="btn btn-primary">Try it</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Open the file in a browser: the heading, the large intro text and the blue button are already styled, although there is not a single line of your own CSS. The bootstrap.bundle.min.js file contains all Bootstrap scripts together with the Popper library, which positions tooltips and dropdowns.
How the course examples work
From now on, examples are fragments of the <body> of your index.html. Each one starts with the <link> line so that the preview under the code loads Bootstrap by itself. If an example needs JavaScript, a <script> tag with the bundle sits at the bottom.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<button class="btn btn-success">Save</button>
<button class="btn btn-outline-secondary">Cancel</button>The preview shows a green button and a gray outlined button.
Common mistake
Forgetting <meta name="viewport">. Without it a phone renders the page about 980 pixels wide and scales it down, so the responsive Bootstrap grid does not work: the screen shows a tiny "desktop" version. This line is required on every page that uses Bootstrap.