loading...
Cover image for How to add Bootstrap to HTML
Themesberg

How to add Bootstrap to HTML

zolidev profile image Zoltán Szőgyényi Updated on ・2 min read

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.

Posted on by:

zolidev profile

Zoltán Szőgyényi

@zolidev

CEO at Themesberg. I turn beautiful coffee into delicious websites. He/him.

Themesberg

We are shaping the WWW by developing and selling high quality and fully featured website templates and UI/UX resources for web developers and agencies across the world.

Discussion

markdown guide