How to Use Bootstrap Min Js with A CDN
What Is the Use of Bootstrap Min JS?
It’s called min JS because it is a compressed and compiled version of the library. This usually means that you can download it and add it to your project in a few steps. It’s recommended that you use the minified and compressed version of the library on a live project as opposed to the uncompiled source code.
However, modern web design best practices dictate that you should try as much as possible to minimize the number of libraries or dependencies attached to a project especially those used on the frontend. This is why it’s advisable to use a CDN when you take your project live as opposed to downloading and hosting the entire Bootstrap library on your server.
How to Use Bootstrap Min Js on Your Projects
$ npm install bootstrap
Running the above command will initiate a direct download of the entire bootstrap library to your current folder. Make sure that you navigate to the correct folder on your project that you can easily reference with a simple path when it comes to using bootstrap in your project.
There are alternative methods to add the entire bootstrap library to your project using the other package managers as follows:
For Yarn: $ yarn install bootstrap
For Composer: $ composer require twbs/bootstrap:4.3.1
The second method is a straightforward one as it involves a normal download. Head over to the Bootstrap website and grab the correct version of Bootstrap you want to use on your project. After downloading it, decompress the zip file and move the files in it to the correct folder on your project. You can then add bootstrap to your HTML’s header section using the following code:
<link href="PATH TO BOOTSTRAP STYLESHEET FILE" rel="stylesheet">
<script src="PATH TO THE BOOTSTRAP MIN JS FILE" ></script>
For example, if the Bootstrap files were in the current home folder on your project, your code would look something like this:
<link rel="stylesheet" href="bootstrap.min.css" >
<script src="jquery-3.4.1.slim.min.js" ></script>
Using Bootstrap min js with a CDN
The third and most preferred method for adding bootstrap min js on your live project is to use a CDN hosted version of Bootstrap. Skip the whole downloading and unzipping process and grab a bootstrap CDN URL for the version of bootstrap min js you want to use. Here is an example of how you would add both the CSS and js files from an open-source CDN service:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Another option could be to download the minified and compiled versions of Bootstrap and upload them to the correct folder on your webserver. You will then place your entire website behind a CDN so that all the libraries you are using on your website can be loaded from the CDN. Using a CDN has many advantages such as making your pages to load fasters and from the nearest servers to your visitors.