What is Bootstrap?

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:

<!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.
• 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:

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:

<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 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
• Content Delivery Network (CDN)
• Responsive design

Cheat sheets

• What is Bootstrap?