Bootstrap Installation

As discussed in Bootstrap introduction, Bootstrap is the most popular open-source toolkit which built with HTML, CSS and JavaScript framework. By using bootstrap, we can develop responsive, mobile-first applications which will fit for any browser, device, and screen.

Bootstrap Download

In web applications, we can use the bootstrap framework in different ways, those are

 

  1. Download Bootstrap Files
  2. Referencing a Bootstrap from CDN
  3. Package Managers

Download Bootstrap Files

You can download the latest version of 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 also gets easily debugged, but slower to load and heavier as compared to the minified version. This should be used 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 header (<head>) section by using src attribute of the <script> tag like as shown below.

 

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

 

<!-- Latest Bootstrap CSS -->

<script src="~/css/bootstrap.min.css"></script>

<!-- jQuery Library -->

<script src="~/jquery/jquery-3.4.1.min.js"></script>

<!-- Popper JS -->

<script src="~/js/popper.min.js"></script>

<!-- Latest Compiled JavaScript -->

<script src="~/js/bootstrap.min.js"></script>

 

</head>

<body>

</body>

</html>

If you observe the above code, we included jQuery and Popper.js files in header section because if we want to use compiled bootstrap js file, then 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.

Use Bootstrap from CDN

In case, if you don’t want to download the bootstrap files, then we can directly add it to our webpage by referencing it from public CDN (Content Delivery Network) like as shown below.

 

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

 

<!-- Latest Bootstrap CSS -->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- jQuery Library -->

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Popper JS -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest Compiled JavaScript -->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

 

</head>

<body> </body>

</html>

The CDN’s will provide a performance benefit by reducing the loading time, because the bootstrap files hosted on the multiple servers which 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 be cached in the browser. Again, if we request the same web page, then the CDN files will be loaded from cache instead of downloading again from CDN.

Package Managers

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 npm package by using the following command.

 

$ npm install bootstrap

To install Bootstrap in your node.js applications with yarn package, we need to use the following command.

 

$ yarn add bootstrap

In case, if you want to install and manage bootstrap components in .NET application, we need to use the following command to install bootstrap from NuGet package.

 

PM> Install-Package bootstrap

In the next chapters, we will learn how to use bootstrap in our web applications with examples.

Topics Covered