As discussed in the Bootstrap introduction, Bootstrap is the most popular open-source toolkit built with HTML, CSS, and JavaScript frameworks. Using bootstrap, we can develop responsive, mobile-first applications that will fit any browser, device, and screen.
In web applications, we can use the bootstrap framework in different ways; those are
You can download the latest version of the Bootstrap framework from https://getbootstrap.com. The download files will contain the compiled and minified versions of CSS and JavaScript plugins. We can include any of these versions, i.e., either full or minified version based on our requirements.
The full (uncompressed) version contains the proper description of each method along with the comments. It is user-friendly and easily debugged but slower to load and heavier than the minified version. This should use mainly in the development process.
On the other hand, the minified version eliminates any unnecessary spaces and comments, and hence it is not so user-friendly. This loads faster and is much lighter than the compiled version. So this version should be used when your project goes live.
Now, add the downloaded files to your application root directory and include those file references in the header (<head>) section by using src attribute of the <script> tag like as shown below.
If you observe the above code, we included jQuery and Popper.js files in the header section because if we want to use compiled bootstrap js file, we need to include jQuery and Popper.js before bootstrap js file. So, you need to download and include those files in your application directory.
If you don’t want to download the bootstrap files, then we can directly add them to our webpage by referencing them from public CDN (Content Delivery Network) like as shown below.
The CDN’s will provide a performance benefit by reducing the loading time because the bootstrap files are hosted on multiple servers, and those are spread across the globe, so when a user requests the file, it will be served from the nearest server to them.
When we request a webpage, the CDN files will cache in the browser. If we request the same web page, then the CDN files will load from cache instead of downloading again from CDN.
The other available options to get Bootstrap are through package managers like yarn, composer, and npm. The following example shows how to get it for each package manager:
To use bootstrap in node.js powered applications, we need to install bootstrap with the npm package by using the following command.
To install Bootstrap in your node.js applications with yarn package, we need to use the following command.
If you want to install and manage bootstrap components in a .NET application, we need to use the following command to install bootstrap from the NuGet package.
In the next chapters, we will learn how to use bootstrap in our web applications with examples.