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.

​x
 
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
​
    <!-- Bootstrap CSS -->
    <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>
​
​
    <!-- Optional JavaScript; choose one of the two -->
​
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <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>
​
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" 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:

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

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

xxxxxxxxxx
 
<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>

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

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

xxxxxxxxxx
 
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

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: 

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  ...
</html>

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: 

xxxxxxxxxx
 
<meta name="viewport" content="width=device-width, initial-scale=1">