What is Bootstrap?

Lesson 1 of 14 12 min read Free lesson

What a CSS framework is, adding Bootstrap to a page from a CDN, and your first styled page.

A toolbox of ready-made styles

Bootstrap is a free collection of CSS (and a little JavaScript) that you add to your page. You then style elements by giving them Bootstrap classes:

class="btn btn-primary" turns a button into a smart blue button.
class="container" centres your content with comfortable margins.
class="row" and class="col" build responsive columns.

You still write HTML; Bootstrap simply saves you writing hundreds of lines of CSS.

The starter template

Add Bootstrap from a CDN (a fast public server): one stylesheet in the <head> and one script before </body>. The viewport meta tag makes the page work on phones.

index.html Try it in CodeLab

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Bootstrap page</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container py-5">
    <h1 class="text-primary">Hello, Bootstrap!</h1>
    <p class="lead">This page is styled with ready-made classes.</p>
    <button class="btn btn-success">Join the class</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Class	What it did
container	Centred the content with side margins
py-5	Added padding at the top and bottom
text-primary	Coloured the heading in the theme blue
lead	Made the paragraph larger and lighter
btn btn-success	Styled a green button

Exercise

Change the starter page: make the heading green (text-success), and add a second button styled btn btn-outline-primary that says "Learn more".

Starting code Try it in CodeLab

<div class="container py-5">
  <h1 class="text-primary">Hello, Bootstrap!</h1>
  <button class="btn btn-success">Join the class</button>
</div>

Show a possible solution

Solution

<div class="container py-5">
  <h1 class="text-success">Hello, Bootstrap!</h1>
  <button class="btn btn-success">Join the class</button>
  <button class="btn btn-outline-primary">Learn more</button>
</div>

Check your understanding

Quick check

How do you use Bootstrap styles on an element?

Write CSS rules Add Bootstrap classes in the class attribute Use special tags

Quick check

Where does the Bootstrap stylesheet link go?

In the <head> At the end of the <body> Inside a <div>

Quick check

Why include the viewport meta tag?

For search engines So the page fits phone screens To load Bootstrap faster

A toolbox of ready-made styles

The starter template

Exercise

Check your understanding

Quick check

Quick check

Quick check

Bootstrap lessons