Bootstrap: How do I identify the Bootstrap version?
Twitter BootstrapTwitter Bootstrap Problem Overview
I want to update Bootstrap on a site, but I don't know the installed version.
How can I identify the bootstrap version, with only bootstrap.css and bootstrap.min.js files?
There is no version in the CSS file and the min.js file contains the following comment.
/*!
* Bootstrap.js by @fat & @mdo
* Copyright 2012 Twitter, Inc.
* http://www.apache.org/licenses/LICENSE-2.0.txt
*/
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
In the top of the bootstrap.css
you should have comments like the below:
/*!
* Bootstrap v2.3.1
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
If they are not there, then they have probably been deleted.
VERSIONS:
You can review version history here. Backward compatibility shouldn't be broken if the source is v2.0.0 (Jan 2012) and above. If it is prior to v2.0.0 there are details on upgrading here.
Solution 2 - Twitter Bootstrap
You can also check the bootstrap version via the javascript console in the browser:
$.fn.tooltip.Constructor.VERSION // => "3.3.7"
Credit: https://stackoverflow.com/a/43233731/1608226
Posting this here because I always come across this question when I forget to include JavaScript in the search and wind up on this question instead of the one above. If this helps you, be sure to upvote that answer as well.
Note: For older versions of bootstrap (less than 3 or so), you'll proably need to search the page's JavaScript or CSS files for the bootstrap version. Just came across this on an app using bootstrap 2.3.2. In this case, the (current) top answer is likely the correct one, you'll need to search the source code for the bootstrap find what version it uses. (Added 9/18/2020, though was in comment since 8/13/2020)
Solution 3 - Twitter Bootstrap
Method 1 - Very Simple
In Package.json
- you'll see bootstrap package installed with version mentioned.
"dependencies": {
// ...
"bootstrap": "x.x.x"
// ...
}
Method 2
- Open
node_modules
folder and under that - Search and open
bootstrap
folder - Now you'll be able to see version number in the following files
package.json
scss/bootstrap.scss
orcss/bootstrap.css
README.md
Solution 4 - Twitter Bootstrap
An easy way to do this, without searching files or folders would be:
- Open your web page on browser
- press ctrl+U
- search boostrap.min.js or boostrap.min.css, then click it (it would open source file)
- at first line(commented) you should see boostrap version
Solution 5 - Twitter Bootstrap
The Bootstrap version will be stated at the top of the CSS file. Simply open it and look at the top of the file.
e.g.
/*!
* Bootstrap v2.3.0
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
Solution 6 - Twitter Bootstrap
Shoud be stated on the top of the page.
Something like.
/* =========================================================
* bootstrap-modal.js v1.4.0
* http://twitter.github.com/bootstrap/javascript.html#modal
* =========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================= */
Solution 7 - Twitter Bootstrap
The easiest would be to locate the bootstrap file (bootstrap.css OR bootstrap.min.css) and read through the docblock, you'll see something like this
Bootstrap v3.3.6 (http://getbootstrap.com)
Solution 8 - Twitter Bootstrap
You can find the version and little information that helps you to know that you imported successfully, do the following:
- open your browser.
- Ctrl+Shift+l or F12
- Keep search for Sources then under top, you will find your URL like http://localhost:4200, then under it you will find styles.css.
Solution 9 - Twitter Bootstrap
This is an old question, and there have been several changes to Bootstrap over the years. One of the most common issues I encounter when I don't know what version of Bootstrap I'm using is that the header comment / docblock is missing from the file.
This answer was written after the release of 5.1.3 and 4.6.1. If you update it, please update those version numbers as well!
Here are the ways I have discovered (thanks to https://getbootstrap.com/docs/versions/ and https://github.com/twbs/bootstrap/releases) to figure out what version you're using using feature-sniffing. Note that this list only covers the CSS portion!
v5
v5.1 - added the .placeholder
and .placeholder-glow
classes
v5.0 - removed .media
and added the xxl
breakpoint (.col-xxl-12
)
v4
v4.6 - Added .navbar-nav-scroll
class
v4.5 - Added .user-select-none
, .user-select-auto
, and .user-select-none
classes
v4.4 - Added .row-cols-*
classes
v4.3 - Added .stretched-link
and .text-break
classes
v4.2 - Added .font-weight-lighter
and .font-weight-bolder
classes
v4.1 - Added .table-borderless
and .text-monospace
classes
v4.0 - Removed .img-responsive
. Added .img-fluid
v3
v3.4 - Added .row-no-gutters
class
v3.3 - Added .media-left
and .media-right
classes
v3.2 - Added .sr-only-focusable
class
v3.1 - Added .text-justify
, .modal-sm
and .modal-lg
classes
v3.0 - Removed .span#
classes. Added .col-X-#
classes
- # is a number from 1 to 12
- X is one of
xs
,sm
,md
, orlg
v2
v2.3 - Added .text-left
, .text-center
, and .text-right
classes
v2.2 - Added .media
class
v2.1 - Added .uneditable-input
and .uneditable-textarea
classes
v2.0 - Added .table
and .table-*
classes
v1
v1.4 - Added .condensed-table
class
v1.3 - Added .thumbnail
class
v1.2 - Added .one-third
.two-thirds
classes
Anything before this was not tracked reliable, from what I can tell.
Solution 10 - Twitter Bootstrap
That comment looks like it is a custom version of Bootstrap v2.3.3, here is the default header in the .css, notice the last comment line:
/*!
* Bootstrap v2.3.2
*
* Copyright 2013 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world by @mdo and @fat.
*/
What are you trying to accomplish? If it's customization then you have a set of files to work with though that seems like a bad idea. Otherwise, I would suggest going with the full build of v4.1.x since that is the current release.
Solution 11 - Twitter Bootstrap
Open package.json and look under dependencies. You should see:
"dependencies": {
...
"bootstrap-less": "^3.8.8"
...
}
for angular 5 and over
Solution 12 - Twitter Bootstrap
To expound more on @vrian's answer
To view the bootstrap version of a website in your web browser, do the following:
First Method:
- Open the website on your favourite browser
- Press Ctrl + U to view the web page source
- Look at the head section for a file named
boostrap.min.js
orboostrap.min.css
. It should look like this<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
- Then click it to open the source file
- This will display the bootstrap version of the website. It should look like this:
Bootstrap v4.4.1 (https://getbootstrap.com/)
Second Method:
- Open the website on your favourite browser
- Press Ctrl + Shift + I to inspect the webpage element
- In the inspect console, click on the Style Editor tab
- And then click on
boostrap.min.css
- This will display the bootstrap version of the website. It should look like this:
Bootstrap v4.4.1 (https://getbootstrap.com/)
That's all
I hope this helps
Solution 13 - Twitter Bootstrap
you will see your current bootstrap version in this "bootstrap.min.css/bootstrap.css" files, In the top section
Solution 14 - Twitter Bootstrap
You can locate it in the doc Block from bootstrap.min.css
, at the top part.
Solution 15 - Twitter Bootstrap
To check what version you currently have, you can use -v for the command line/console terminal.
bootstrap -v