How to add Bootstrap to HTML -  2020 Guide

Published: 2020-11-09 09:57:35

Bootstrap is one of the most popular CSS, HTML, and JavaScript framework that exists. Needless to say, the question of **how to add bootstrap to HTML** must surely have crossed your mind. This step by step guide explains the different methods you can use to effortlessly link Bootstrap in HTML or to import Bootstrap to HTML, depending on how you want to integrate it into your website.

The most recent version of Bootstrap is Bootstrap 5. The steps you need to follow to add Bootstrap to HTML differ slightly based on the version you desire to use. You will need a basic knowledge of HTML/CSS and JS to start with Bootstrap. Use one of the following three methods to add Bootstrap to HTML.
![bootstrap-html](https://creativetimblog.com/blog/wp-content/uploads/2020/11/19362653-1024x683.jpg)
##**Method 1: Using the Bootstrap Content Delivery Network (CDN)**

Using the Bootstrap CDN is a great way to deliver the content from your website to your users quickly and efficiently based on their geographic location and improve your website server's performance. To link Bootstrap in HTML using this method:

### Adding Bootstrap 4 CDN to HTML

1. **For CSS:**

    Copy this stylesheet link to the _&lt;head>_ tag of your desired HTML file.

    _&lt;link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>_

2. **For JS:**

    Copy this stylesheet before the end of the _&lt;body>_ tag of your desired HTML file.

    _&lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">&lt;/script>_


    _&lt;script src=[https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js) integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">&lt;/script>_


    _&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">&lt;/script>_


    Note that the functionalities of some JavaScript components like tabs and dropdowns depend on popper.js and jQuery. Hence, before loading the Bootstrap JavaScript file, include the jQuery and Popper CDN before loading the _bootstrap.min.js_ file.


###Adding Bootstrap 5 CDN to HTML

Bootstrap 5 no longer needs jQuery as a dependency since JavaScript can provide the same functionality. To add Bootstrap 5 CDN to HTML:

1. **For CS**

    Copy this stylesheet link to the _&lt;head>_ tag of your desired HTML file.


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

2. **For JS**

    _&lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">&lt;/script>_


    _&lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous">&lt;/script>_


    Note that you need to load Popper JS before loading Bootstrap JS.

##**Method 2: Downloading files locally**

Yet another way of importing Bootstrap to HTML is to directly download the files locally to your HTML project folder. The files can be downloaded from the following links:

*   Bootstrap 4: [https://getbootstrap.com/docs/4.3/getting-started/download/](https://getbootstrap.com/docs/4.3/getting-started/download/)
*   Bootstrap 5: [https://v5.getbootstrap.com/docs/5.0/getting-started/download/](https://v5.getbootstrap.com/docs/5.0/getting-started/download/)

After the desired Bootstrap version files have been downloaded:

1. **For CSS**:

    Include a link to the _bootstrap.min.css_ file in the &lt;head> portion of your HTML file. Doing this enables you to use the Bootstrap CSS components as per your need.

2. **For JS:**

    Add a link to the _bootstrap.min.js_ file before the end of the _&lt;body> _portion of your HTML file. Doing this enables you to use Bootstrap JS components. 


    Note that the _jquery.min.js_ and _popper.min.js_ files must be included before loading _bootstrap.min.js_, even if you have downloaded the files locally.


##**Method 3: Using package managers to import Bootstrap to HTML**

Package managers like _npm_ and _yarn_ can prove to be yet another efficient way of adding Bootstrap to HTML effortlessly. Since _npm_ is the most popular package manager, the following example shows how Bootstrap can be installed and pulled into any project using it. 

Type one of the following commands to the project folder. This is only valid if you have initialized _npm_ in the project.

*   Bootstrap 4: _npm install bootstrap_
*   Bootstrap 5:_ npm install bootstrap@next_

A local copy of the desired version of the Bootstrap files is now downloaded into the ‘node_modules’ folder in your project. After the desired Bootstrap version is imported:

1. **For CS:**

    Include the _bootstap.min.css_ file in the _&lt;head>_ of your HTML file to use Bootstrap CSS components. 

2. **For JS:**

    Use the _bootstrap.min.js_ file before the end of the _&lt;body>_ portion of your HTML file to use the Bootstrap JS components. 


    As mentioned before, _jquery.min.js_ and _popper.min.js_ both have to be loaded before you load _bootstrap.min.js._


Once you integrate 4 or 5 CSS with HTML, you can simply use the Bootstrap class elements and style your HTML files in the desired manner. You can refer to the Bootstrap documentation of your desired version to understand the classes that can be used, and the actions that the corresponding classes perform. Similarly, after integrating Bootstrap JS to HTML you can use the Bootstrap JS components by using JS data attributes directly in the HTML markup or by using jQuery. Refer to the Bootstrap documentation to understand how these components work and what features they offer.


##**Examples from Creative Tim**

[![Material Dashboard](https://creativetimblog.com/blog/wp-content/uploads/2020/11/material-dashboard.jpg)](https://www.creative-tim.com/product/material-dashboard?ref=devto)

**_Material Dashboard_** is a free Material Bootstrap 4 Admin template which offers a cool design, easy to use components, and third-party plugins designed to work perfectly with other elements. 
📌 Check out here its [Download Page](https://www.creative-tim.com/product/material-dashboard?ref=devto) and [Live Preview](https://demos.creative-tim.com/material-dashboard/examples/dashboard.html?ref=devto).

You can find similar, easy to integrate Bootstrap templates and themes from [Creative Tim here](https://www.creative-tim.com/bootstrap-themes?ref=devto). 


##**Conclusion**

You can often be concerned with the question of how to start with Bootstrap. However, rest assured that importing and adding Bootstrap to HTML is a pretty straightforward process, and you can easily use Bootstrap to enjoy additional attributes and features on top of your HTML files in no time.