Getting Started with Bootstrap

Here's what you need to include in your web page in order to use Bootstrap 5.

Bootstrap uses its own CSS and JavaScript files, which you need to link to. You can do this with the code below.

Bootstrap 5 doesn't use JQuery (prior releases of Bootstrap rely on JQuery).

Quick Start: Bootstrap 5 Template

You can use the following template as a basis for your Bootstrap 5 web pages. This template contains the necessary !DOCTYPE preamble, links to CSS and JS files, as well as the viewport meta tag.

<!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

<p>Content goes here...</p>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

</body>
</html>

If you don't want the whole template, you can copy/paste the links to each individual file below.

CSS & JavaScript Files

Place the following stylesheet code in the document's head:

Place the following javascript files at the bottom of your document (just before the end <body> tag):

That bundles code for both Bootstrap and Popper into one file.

You can alternatively separate Popper and Bootstrap JavaScript into two files, like this:

Design & Development Standards

To get the most out of Bootstrap 5, make sure your pages incorporate the following.

HTML5 `!DOCTYPE`

Your HTML documents should begin with the HTML5 !DOCTYPE declaration. Like this:

Add the Viewport `<meta>` Tag

To ensure proper rendering and touch zooming on mobile devices, add the viewport meta tag to your head, like this: