183

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
*/
Improve this question
0

15 Answers 15

Reset to default
228

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.

Improve this answer
4
  • Tanner, i'm worry about backward compatibility for js
    – Nikita
    Commented Mar 11, 2013 at 10:05
  • 4
    i realise that bootstrap 3 didn't come out until aug 2013 (after this question and answer), but for anyone reading after this date - note that bootstrap v3.x is not backwards compatible with v2.x getbootstrap.com/migration
    – mulllhausen
    Commented Nov 19, 2017 at 10:53
  • 1
    The comment "can you not just upgrade to the latest version?" stops me giving this an upvote. It's unnecessary and doesn't help answer the question. And besides, if only upgrading to the latest version was that easy.
    – Matt
    Commented Apr 19, 2020 at 2:08
  • If someone have updated the bootstrap.css file and removed the version details from the top at that time, you won't be able to find version like this method.
    – Yellow Digital Labs
    Commented Nov 4, 2022 at 4:42
101

You can also check the bootstrap version via the javascript console in the browser:

Looks like this solution works better with Bootstrap 4/5:

bootstrap.Tooltip.VERSION // => '5.2.0'

Where this version works best for Bootstrap 3. It can also work for Bootstrap 4, but may not work for Bootstrap 5.

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

Note that for older versions of Bootstrap (less than 3 or so), you'll probably 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, another answer is likely the correct one, and you'll need to search the source code for the Bootstrap source file itself to find what version is being used.

Improve this answer
2
  • 8
    jQuery.fn.tooltip.Constructor.VERSION for no conflict cases :) Thanks!
    – Mubashar Aftab
    Commented Oct 14, 2019 at 12:13
  • 6
    This should be the accepted answer - it is the easiest to access.
    – alex toader
    Commented May 15, 2020 at 12:17
34

Method 1 - Very Simple

In Package.json - you'll see bootstrap package installed with version mentioned.

"dependencies": {
    // ...
   "bootstrap": "x.x.x"
    // ...
}

Method 2

  1. Open node_modules folder and under that
  2. Search and open bootstrap folder
  3. Now you'll be able to see version number in the following files
    • package.json
    • scss/bootstrap.scss or css/bootstrap.css
    • README.md
Improve this answer
3
  • The first method you propose, checking package.json, only shows you the minimum version required to satisfy the build. It does not show which version you have installed. Have a look at the description of Tilde & Caret Shorthand
    – Tony
    Commented Sep 27, 2019 at 9:32
  • @Tony brother package.json file contains installed packages along with their version numbers.
    – WasiF
    Commented Dec 24, 2021 at 4:50
  • The version number of each dependency is not necessarily the version installed on your computer. NPM docs state "When you run npm install, npm will download dependencies and devDependencies that are listed in package.json that meet the semantic version requirements listed for each." (my emphasis). The tilde and caret characters allow you to define a range of acceptable versions, so they will not always match what is installed.
    – Tony
    Commented Dec 24, 2021 at 11:11
9

An easy way to do this, without searching files or folders would be:

  • Open your web page on browser
  • press ctrl+U
  • search bootstrap.min.js or bootstrap.min.css, then click it (it would open source file)
  • at first line (commented) you should see the Bootstrap version
Improve this answer
5

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.
 */
Improve this answer
1
  • 2
    Which CSS file?
    – Matt
    Commented Apr 19, 2020 at 2:11
5

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, or lg

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.

Improve this answer
3

if you have Node.js and npm installed then you can use this to know the version in powershell/terminal:

npm view bootstrap
Improve this answer
2

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.
 * ========================================================= */
Improve this answer
2
  • "the page" - which page?
    – Matt
    Commented Apr 19, 2020 at 2:11
  • @Matt should be boostrap.min.js or boostrap.min.css or boostrap.scss for example. You can search for those files even in the Developer Tools when you inspect your web app in the browser.
    – helenatxu
    Commented Feb 1, 2021 at 14:16
2

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)

Improve this answer
1

You can find the version and little information that helps you to know that you imported successfully, do the following:

  1. open your browser.
  2. Ctrl+Shift+l or F12
  3. Keep search for Sources then under top, you will find your URL like http://localhost:4200, then under it you will find styles.css.
Improve this answer
0

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.

Improve this answer
0

Open package.json and look under dependencies. You should see:

  "dependencies": {
    ...
    "bootstrap-less": "^3.8.8"
    ...
    }

for angular 5 and over

Improve this answer
0

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 or boostrap.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/)

Bootstrap version in console

That's all

I hope this helps

Improve this answer
0

you will see your current bootstrap version in this "bootstrap.min.css/bootstrap.css" files, In the top section

Improve this answer
0

You can locate it in the doc Block from bootstrap.min.css, at the top part.

Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.