Search code examples
javascriptcssbootstrap-4bootstrap-modal

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

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?

Solution

  • In general, just use these two files:

    1. bootstrap.min.css
    2. bootstrap.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 ✗ ✗