What bootstrap version am I using? How to check
Bootstrap is a popular front-end framework for the development of responsive, mobile-first websites.
It has over the years been undergoing a series of updates to improve on it and make it much better with the introduction of new features. These updates are released in form of versions.
The release of a new version may result in deprecation or changes to some previously working features. Things that used to work in earlier versions may not work in the new one.
For instance, I had previously written a number of articles where we covered how to fix several things not working in Bootstrap.
Such were:
- .pull-right and .pull-left not working
- .img-responsive not working
- .col-*-offset-* not working
- .btn-block not working
All of the above issues were a result of the conflict in bootstrap versions. The failure of all the above bootstrap classes to work was as a result of trying to use them in Bootstrap 4 or 5 where they are no longer supported. They work for version 3 and older.
Changing the bootstrap classes to match those of version 4 or 5 would easily do the fix depending on the respective version you were using on your project.
Whenever you are using bootstrap to build your website, always ensure you know which version you are using. When things don't work for you, just google how to do them in bootstrap for that specific version and you will be able to find quick solutions.
Now you may ask... John, how do I know the bootstrap version my website is using?
- Maybe you took over the website project from someone and they never told you which version they had used.
- Maybe it has been quite some time since you built the site and can't quite clearly remember which version you had used.
- Or, you could have downloaded a bootstrap website template where the version was not indicated.
Well... In this article, you will learn how to easily check the bootstrap version for any website that uses bootstrap.
How to check website bootstrap version
To check the bootstrap version used on any website, simply open the CSS file by the name bootstrap.min.css or bootstrap.css. At the very top of it, you will be able to see the version indicated as in the screenshot below:
How to locate the bootstrap CSS file on a website
Method 1:
Open one of the website pages in a browser and then open it's its source code. You can view its source code by pressing Ctrl+U or by right-clicking on the web page then clicking on the View Page Source option.
In the source code check bootstrap.min.css or bootstrap.css in the head section and click on it. The Bootstrap CSS file will be open on the browser and you will be able to see the bootstrap version at the very top.
Alternatively, you can open any of the website pages (eg. .html, .php, etc) in a text editor... then check for bootstrap.min.css or bootstrap.css at the head section. Note the path of the file bootstrap CSS file and open it in the text editor. At the very top, you will see the version.
Method 2:
The second method is to search for the bootstrap CSS file directly in the project directories. Below are the most common file paths to the CSS file in most cases.
- css > bootstrap.min.css
- assets > css > bootstrap.min.css
- bootstrap > css > bootstrap.min.css
Then just as in method 1, you just open the file in the text editor and check the version at the top.
Note: In a similar way to the bootstrap CSS file, you can also find the version indicated at the top of the bootstrap JS file (bootstrap.min.js or bootstrap.js).
Conclusion
Bootstrap framework has been undergoing lots of updates over time. New features have been introduced while some older ones have been removed. Some of the stuff (eg. classes) that were used in older versions have been deprecated and replaced with new totally different ones.
Stuff that used to work in older versions may not work in newer versions. For this reason, developers ofter encounter many version-related errors in their web projects.
It is therefore very important that developers should know which version their web project is using.
In this article, we have covered how you can easily check the bootstrap version on any website build on Bootstrap. It is my hope that you found this article helpful. If so, you can help us reach and help more developers by simply sharing this page in your networks. Have a great and productive coding time!
