Skip to content

What is Bootstrap?

CSS is powerful. But writing it from scratch for every page — spacing everything, sizing buttons, making inputs look decent — gets repetitive fast. A lot of developers felt the same way.

So some people sat down and wrote a massive stylesheet full of ready-made styles for everything: buttons, tables, forms, spacing, colours, layout. They packaged it up so anyone could use it for free. You link it to your HTML page, add certain class names to your elements, and your page suddenly looks much better — without writing a single line of CSS yourself.

One of the most popular tools of this kind is Bootstrap.

Adding Bootstrap to your page

Bootstrap lives on the internet. You do not install it — you just tell your HTML page where to find it.

Go to https://getbootstrap.com/ and scroll down until you see Include via CDN. You will find a <link> tag there. That tag tells the browser: before you show this page, go fetch Bootstrap's stylesheet from the internet.

For now, use just the <link> tag — that is all you need:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

Paste it inside <head>. Bootstrap is now active on that page.

Before Bootstrap

Here is a plain HTML page — no CSS, no Bootstrap, nothing extra:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Clinic</title>
  </head>
  <body>

    <h1>Welcome to the Clinic</h1>
    <p>Please fill in your details below.</p>
    <a href="#">Learn more</a>

    <br><br>
    <input type="text" placeholder="Your name">
    <button>Submit</button>

  </body>
</html>

Open this in your browser. It works — but it looks like the internet in 1996. Plain text, a flat grey button, an input with hard edges. Nothing to look at.

Now paste the Bootstrap <link> into <head> and refresh:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Clinic</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>
  <body>

    <h1>Welcome to the Clinic</h1>
    <p>Please fill in your details below.</p>
    <a href="#">Learn more</a>

    <br><br>
    <input type="text" placeholder="Your name">
    <button>Submit</button>

  </body>
</html>

The fonts already look cleaner. The link has a colour. The page breathes a little. That happened with one line added to <head> — you changed nothing else.

Adding class names

The real power is in class names. You add class="..." to your HTML elements and Bootstrap styles them for you.

Spacing — mb-3

mb-3 means margin-bottom, size 3. It pushes space below the element:

<h1 class="mb-3">Welcome to the Clinic</h1>
<p class="mb-3">Please fill in your details below.</p>

Try it. The heading and paragraph now have breathing room below them instead of sitting on top of each other.

Colour — text-primary, text-danger

<h1 class="text-primary">Welcome to the Clinic</h1>

text-primary makes text blue. text-danger makes it red. text-success makes it green. These map to Bootstrap's colour system — one class, instant colour.

A styled input — form-control

<input type="text" class="form-control" placeholder="Your name">

Without this class the input is a grey box with sharp edges. With it — rounded corners, a clean border, full width, a soft focus highlight when you click it. One class.

A real button — btn btn-primary

<button class="btn btn-primary">Submit</button>

btn is the base button style. btn-primary makes it blue. Swap that for btn-success (green), btn-danger (red), or btn-secondary (grey). They all look like proper buttons.

The full page with classes

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Clinic</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>
  <body>

    <h1 class="text-primary mb-3">Welcome to the Clinic</h1>
    <p class="mb-3">Please fill in your details below.</p>
    <a href="#">Learn more</a>

    <br><br>
    <input type="text" class="form-control mb-3" placeholder="Your name">
    <button class="btn btn-primary">Submit</button>

  </body>
</html>

Compare this to the version with nothing. Same HTML structure — just class names added. No CSS file written. No styles typed out. Bootstrap did the work.

These are just class names. The more you use them, the more natural they become. And the full list is always waiting at getbootstrap.com when you need it.

Challenge

Create a new HTML file. Add the Bootstrap CDN link. Put a heading, a paragraph, a text input, and a button on the page. Apply at least three Bootstrap class names — try ones not shown on this page. See what they do.

← Storing Form Data    Next: Bootstrap in Flask →