I have downloaded the latest bootstrap version 4 in my computer and it contains two folder one css and other js. The css folder contains about 12 css files whereas the js folder contains about 5 javascript files. Do we need to link all these 17 files to our html page? Is there a simple way to link css and js by folder?
Which bootstrap css and javascript files should be linked to our html page?
Viewed 1959
3 Answers
In general, just use these two files:
bootstrap.min.cssbootstrap.bundle.min.js
You can serve them locally if you want, but it's simplest to just use a CDN. For example, these are the v5.1.3 jsDelivr links:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Find the most up-to-date CDN links at getbootstrap.com under the jsDelivr section.
The other files are just trimmed versions of the full bootstrap distribution. They are only needed if you don't want the full library and you only want some specific feature(s).
For example, if you only want to use bootstrap's grid system and no other bootstrap features, you can use bootstrap-grid.min.css instead of the full bootstrap.min.css.
| CSS files | Layout | Content | Components | Utilities |
|---|---|---|---|---|
| bootstrap(.min).css | Included | Included | Included | Included |
| bootstrap-grid(.min).css | Only grid system | ✗ | ✗ | Only flex utilities |
| bootstrap-reboot(.min).css | ✗ | Only reboot styles | ✗ | ✗ |
| bootstrap-utilities(.min).css | ✗ | ✗ | ✗ | Included |
| JS files | Popper | jQuery |
|---|---|---|
| bootstrap.bundle(.min).js | Included | ✗ |
| bootstrap(.min).js | ✗ | ✗ |
Following are the files to attach for the version of bootstrap-4.0.0, Download Bootstrap from this
For CSS,
<link href="~/YourPath/bootstrap.min.css" rel="stylesheet" />
For JS,
<script src="~/YourPath/bootstrap.min.js" type="text/javascript"></script>
inside < head >:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
If you are using Bootstrap4 and want to use Javascript, you need to include JQuery before you include the bootstrap javascript tag: before </ body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
Related