How to Add and Use Bootstrap in HTML

In this tutorial, you will learn how to add Bootstrap functionality in your HTML project.

What is Bootstrap?

Bootstrap is a feature-rich HTML, CSS, and JavaScript framework to create responsive websites. The Bootstrap framework enables us to use ready-made blocks of code to help us save time.

Download and Add Bootstrap in HTML

We can add Bootstrap by downloading and using the Bootstrap compiled CSS and JS files in our project. To get the compiled files, head over to this page. It contains ready-to-use,  minified CSS bundles, and JavaScript plugins.

Once you have downloaded the archive, decompress it and move it’s contents to the project’s directory. The files are now ready to be used in your HTML project. We need to import these files into our project, which we can easily do with the <link> tag.

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">

In this code, we import the Bootstrap CSS files provided to us in the archive we had downloaded. Note that the path to the .css files should be according to the location you have moved them to. In this case, they are at the root of our project.

Now we can use all of Bootstrap’s template CSS classes. Follow the same procedure for the .js files to include them in your project.

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Note that the code above should be placed near the end of your pages, just before the closing </body> tag.

Use BootstrapCDN to Add Bootstrap

Another way is by using the BootstrapCDN provided by StackPath. It’s an easy and alternative way to prevent all the hassle of downloading and configuring the Bootstrap files.

We need to add some lines of code within our head tag to import the CSS and JS files. Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load their CSS.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Bootstrap contains many JavaScript-based elements which required some files to be imported as well. Place the following near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js and JavaScript plugins.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Also, read:

Leave a Reply

Your email address will not be published. Required fields are marked *