# What is Bootstrap?

Bootstrap is a free CSS framework of ready-made styles and components; add it to a page with two lines from a CDN and start using its classes.

Novice · CSS · HTML · Web Development · Updated November 3, 2026

## After this lesson you can

- Explain what Bootstrap is, and add it to a page from a CDN

## Key takeaways

- Bootstrap is a free CSS framework: add its stylesheet to a page, then put its class names on your elements to style them.
- Load Bootstrap's CSS with a `<link>` in the `head`. Its `<script>` at the end of the `body` is needed only by components that move, such as menus and carousels.
- Keep the `viewport` meta tag in the `head`, or Bootstrap's phone layouts don't work.
- Bootstrap is mobile-first: its styles start from small screens and adapt as the screen gets wider.
- Link your own stylesheet after Bootstrap's, and your rules win wherever they overlap.

Writing every style for a website yourself takes a long time: buttons, forms, menus, tables, and layouts that work on a phone as well as a laptop. **Bootstrap** is a free **CSS framework** that has all of that ready-made. You add its stylesheet to a page, then put its class names on your elements, and they take on its look.

Bootstrap was first built at Twitter, and it's now one of the most widely used front-end toolkits in the world. ASP.NET Core's MVC project template, which you'll use in a later chapter, comes with Bootstrap already set up.

## Adding Bootstrap to a page

The quickest way is from a **CDN** (content delivery network): servers around the world that host popular files, so your page can link to them instead of copying them. Here's a complete page using Bootstrap 5.3:

```html
<!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 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>
    <div class="container">
        <h1 class="mt-4">Hello, Bootstrap!</h1>
        <p class="lead">This paragraph is a little larger than normal text.</p>
        <button type="button" class="btn btn-primary">A Bootstrap button</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>
```

- The `<link>` in the `head` loads Bootstrap's CSS: all the styles.
- The `<script>` at the end of the `body` loads Bootstrap's JavaScript, which a few components need to move: menus that open, carousels that slide. Pages that don't use those can leave it out.
- `integrity` is a fingerprint of the exact file. If the file the CDN sends ever doesn't match, the browser refuses to use it. Copy these lines exactly, or take fresh ones from [getbootstrap.com](https://getbootstrap.com).
- The `viewport` meta tag tells phones to show the page at their real width. Without it, Bootstrap's phone layouts don't work.

Open the page with Live Server: the heading, the larger paragraph and the blue button all come from Bootstrap's classes.

## Classes do the work

With Bootstrap, you style mostly by adding **classes**, not by writing CSS:

| Class | Does |
|---|---|
| `container` | centers the content, with comfortable margins |
| `mt-4` | adds space above (margin-top) |
| `lead` | makes a paragraph stand out |
| `btn btn-primary` | makes a button, in the theme's main color |

The rest of this chapter covers the three groups of classes you'll use most: the **grid** for layout, **components** such as navigation bars and cards, and **utilities** for small adjustments.

## Responsive by design

Bootstrap is **mobile-first**: its styles start from small screens and adapt as the screen gets wider. The same page rearranges itself for a phone, a tablet and a desktop, which is called **responsive design**. You'll see how in *The Grid System*.

## Your own styles still work

Bootstrap is a starting point, not a cage. Add your own stylesheet **after** Bootstrap's link, and your rules win wherever they overlap:

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

For a whole new look without writing much CSS, free themes such as those on [Bootswatch](https://bootswatch.com) replace Bootstrap's stylesheet with a restyled one: same classes, different look.

## Check yourself

1 question to try on the lesson page.

## So what

Bootstrap gives you a professional, responsive look from the first line, so you can spend your time on what your site does instead of on how every button looks.

## Key terms

- [Bootstrap](https://www.ask-codey.com/glossary/bootstrap)
- [Content Delivery Network (CDN)](https://www.ask-codey.com/glossary/content-delivery-network-cdn)
- [Responsive design](https://www.ask-codey.com/glossary/responsive-design)

## Cheat sheets

- [What is Bootstrap?](https://www.ask-codey.com/cheat-sheets/bootstrap-what-is-bootstrap-cheat-sheet)

Source: https://www.ask-codey.com/lessons/bootstrap-what-is-bootstrap
