How to add Bootstrap to HTML

Linking Bootstrap CSS Framework to your HTML files is pretty easy and there are many ways to do it depending on how you want to integrate Bootstrap into your website. The easiest way to get started with Bootstrap in your HTML files is by using a CDN service.

Here’s how you can get started:

Step 1: linking Bootstrap CSS inside the head tag of your HTML template:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

Step 2: linking Bootstrap dependencies and scripts before the end of the tag:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Adding Bootstrap 5 to your HTML

Bootstrap 5 has been officially launched removing jQuery as a dependency, dropping support for IE 10 & 11 and bringing new awesome features such as icons and a utility API.

Here’s how you can get started by adding Bootstrap 5 to your HTML:

Step 1: linking Bootstrap CSS inside the tag of your HTML template:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

Step 2: lining the Bootstrap Javascript code and Popper.js before the end of the tag:

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

Notice that there is no need to require jQuery anymore? That makes you save almost 90kB of data which makes your website faster.

Bootstrap themes and templates

You can check out some of the free and premium Bootstrap templates that we’ve been working on here at Themesberg. You can save a lot of time and money and get started with professionally designed user interfaces in no time.

Most of the templates come with a pre-built dev environment using Gulp, Bootstrap Sass, and BrowserSync to make development a seamless experience.

Blog