To quickly add Bootstrap to your prject, link to bootstrap
through a
CDN.
You will need a CSS file and a JS file (Javascript is required
for few components like tooltips,modals,etc)
Copy-paste the stylesheet <link> into your
<head> before all other stylesheets to load
our CSS.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
Many of our components require the use of JavaScript to
function. Specifically, they require our own JavaScript plugins
and Popper. Place
one of the following <script>s
near the end of your pages, right before the closing
</body> tag, to enable them.
Include every Bootstrap JavaScript plugin and dependency with
one of our two bundles. Both
bootstrap.bundle.js and
bootstrap.bundle.min.js include
Popper for our tooltips and
popovers. For more information about what’s included in
Bootstrap, please see our
contents
section.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
If you decide to go with the separate scripts solution, Popper must come first (if you’re using tooltips or popovers), and then our JavaScript plugins.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>