In this article, we shall highlight some of the things that make bootstrap not to work on your website. You may follow all the steps of adding bootstrap to your website and it fails to work which may discourage you and at the same time use a lot of time figuring out why.
There are some common reasons which most developers do without knowing and fixing them becomes a problem since they cannot understand what is really causing the error.
In a previous article, we discussed what is bootstrap, how to install bootstrap in your working folder, and how to use bootstrap in your web pages, view this link.
But just for recap and summary, we shall highlight a few items regarding bootstrap so that we can understand where errors come from.
What is bootstrap?
Bootstrap is a CSS framework that is popularly used due to its ability to produce mobile-friendly websites.
Bootstrap being a framework allows the user to reuse resources without having to reinvent the functionality all over again.
Bootstrap uses classes such that when the classes are initialized, the functionality already defined in the bootstrap files is imported and used in your web pages.
How to download bootstrap in your web pages
There are multiple ways in which you can download bootstrap and import it into your working folder which we discussed in our previous article that can be found here.
The latest bootstrap version is available at https://www.getbootstrap.com and download the latest version or any other previous version you may wish to have.
Download and note the location where the files are saved into.
Extract the files to your working directory
Include bootstrap in your project
To use version 5.1.3 in your project, add the links below in the head section of your website
// bootstrap CSS file
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
//bootstrap js file
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
How to fix bootstrap is not working
Sometimes you may follow the above steps to include bootstrap in your web project and due to one reason or another, bootstrap functions may fail to work.
Since there is no specific error that will be displayed in your webpage of why bootstrap is not working, we shall discuss various ways which sometimes cause the error and make bootstrap not to work.
Incorrect link to bootstrap file
This happens when you are either an absolute or relative path to reference the bootstrap file. When the path to the bootstrap file is not correct, bootstrap functions will not work
To know whether you have an incorrect link to the bootstrap files, copy the link and test it in the browser and check the result it will bring.
To fix the error of incorrect link to bootstrap files, follow the path specified and ensure that it is pointing to the correct link.
Other CSS files overriding the bootstrap file
When you have other CSS files that may have the same classes as the bootstrap files, it may become hard for bootstrap classes to be implemented in your project.
Also if you may have other CSS files before the main bootstrap file, it may cause bootstrap file not to work
To fix the error of overriding CSS files with the bootstrap file, it is recommended to have the main bootstrap CSS file as the first file in the files section at the head section like shown below
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Cached files in your webpage
If the cache is not disabled in your web pages, you may implement or add some features to your website and note that the changes or features are not working.
To ensure that there are no cached files on your website, you can frequently clear the cache in your working browser.
Also, you can force a refresh to see the browser changes by using Ctrl+Shift+R
Bootstrap version in your website
You may want to test some features provided by some bootstrap versions that you do not have on your website. A feature like col-12 will not work in bootstrap that is less than 4
To ensure that the features are working, cross-check the bootstrap version from the bootstrap docs website and ensure that the feature is supported in the version you have used on your website
Conclusion
In the above discussion, we have highlighted various ways you can cross-check to ensure that bootstrap is working on your website. Some reasons why bootstrap is not working may vary from one user to another. It is, therefore, necessary to test any or all the above ways we have provided above.
