Which bootstrap css and javascript files should be linked to our html page?

Question

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?

Answer 1

You only need 1 CSS and 1 JS file based on your needs.

For the CSS files, this is a breakdown of the difference between bootstrap vs bootstrap-grid vs bootstrap-reboot :

CSS files	Layout	Content	Components	Utilities
bootstrap(.min).css	Included	Included	Included	Included
bootstrap-grid(.min).css	Only grid system	Not included	Not included	Only flex utilities
bootstrap-reboot(.min).css	Not included	Only Reboot	Not included	Not included

And for JS, bootstrap vs bootstrap.bundle :

JS files	Popper	jQuery
bootstrap.bundle(.min).js	Included	Not included
bootstrap(.min).js	Not included	Not included

Also, instead of serving these files locally, you could use a CDN :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

Answer 2

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>

Answer 3

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>