DocHero
Lesson 3 +10 XP

Get Started with Bootstrap 5

Get Started with Bootstrap 5

There are two ways to start using Bootstrap 5 in your project:

  1. Download the compiled files from getbootstrap.com and include them locally.
  2. Use a CDN (Content Delivery Network) by copy-pasting a few lines into your HTML.

The easiest way for beginners is the CDN approach.

Step 1: Add the CSS

Copy the stylesheet link into your <head> before all other stylesheets:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Step 2: Add the JavaScript

Many components need JavaScript to work. Put one of these script tags right before the closing </body> tag.

The easiest option is the bundle, which includes Popper for tooltips and popovers:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

The separate option

If you prefer separate scripts, Popper must come first, then Bootstrap:

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>

TL;DR

  • Use a CDN for the quickest setup.
  • CSS link goes in the <head>.
  • JS script goes right before </body>.
  • The bundle already includes Popper.