Bootstrap

Bootstrap Lesson 2: How to Add Bootstrap to a project

In the previous knowledge bit, we have given the introduction of Bootstrap and we have also discussed the advantages and the uses of Bootstrap. Now in this Bootstrap tutorial, we will discuss that how to add bootstrap Bootstrap locally into your own application or link via CDN. We will also discuss that how bootstrap works.

How to Add Bootstrap to a project:

There are basically two different way to include bootstrap into the project. You can either include a local copy of Bootstrap into your project. You also have an option to include via CDN (content delivery networks).

So before discussing how to add bootstrap lets create a simple HTML page skeleton and include some basic HTML components like button heading <h1> into your page.

Source code:

<!DOCTYPE html>

<html>

<head>

<title>Adding Bootstrap into Project</title>

</head>

<body>

<h1>Using Bootstrap in a project.</h1>

<button>CLICK ME!</button>

</body>

</html>       

 

Include Bootstrap Locally in Project:

If you want to include Bootstrap CSS into your Web project locally then follow these steps.

Download Bootstrap:

To include bootstrap into your project, go to the official site of Bootstrap (Link: https://getbootstrap.com/ ) then click on download. It will redirect you to download page, where you will click on the download button of “Compiled CSS and JS”

How to add bootstrap: Downloading Bootstrap from official website

Downloading bootstrap from its website.

 

You can also click on this link to download the zip file of Bootstrap.

After downloading the zip file of bootstrap, locate the zip file on your computer and unzip the bootstrap file. Now open the folder you will see the different components like CSS and JS folder.

 

Accessing css folder

 

Now open the CSS folder, and inside CSS folder you will see quite a few files but there is only two important file which we will discuss in this Bootstrap tutorials. These files are “bootstrap.CSS” and which is “bootstrap.min.CSS”

 

bootstrap.css

Bootstrap.css

Adding:

These both files are same but one is the minified version of Bootstrap CSS means all the whitespace and extra character has been removed to reduce the file size. The minified version is compressed version and it is not readable. While the other fil is the development version and can easily be readable, in that CSS file you can easily make changes. You can notice in the following screenshot that how CSS minified and development version look like. The one which is one left side is development version and the one which is on the right side is minified version.

 

how to add bootstrap in your project

Adding bootstrap to the project

 

Now let’s go ahead and add the bootstrap.css file into the same directory where your HTML page exists. Now just like we used to add any other stylesheet, go ahead and add the link of this Bootstrap stylesheet into your HTML site.

 

<link rel="stylesheet" type="text/css" href="Bootstrap.css">       

 

So we have included a local copy of Bootstrap CSS into our website and you can notice a slight change in design in your HTML page.

 

Using bootstrap in your project

Bootstrap is here!

Include Bootstrap via CDN:

There is another easy and fast way to include bootstrap CSS into your project. So you can also include bootstrap via CDN (content delivery networks), it is a hosted file on somewhere web which you can include in your project. It is the fastest way to include bootstrap into the project.

To include Bootstrap CSS via CDN go again into the download section of the official Bootstrap website. Then copy the Bootstrap CDN link into your project.

 

Include Bootstrap via CDN:

Include Bootstrap via CDN.

 

You can also include the following link into your head tag of your HTML page.

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">       

 

There is not much difference whether you want to include a downloaded version locally or you can link CSS to an external file that’s hosted somewhere online.

 

Bootstrap button Options:

Now let see bootstrap docs and make changes in styling using bootstrap. Go to the bootstrap official site and then go to CSS portion. You can notice that we have a button in our site now let’s go ahead and see that how we can make changes in styling using Bootstrap there are many options available on the official site to style button like you can notice that we can use any bootstrap class to style any button

How to add bootstrap: Bootstrap button Options

If you want to add the button like primary which you can see in the above screenshot, Add button and then add class primary into that button. Here is the demonstration below:

 

<button class="btn btn-primary" >CLICK ME! </button>       

 

This is our button tag and the output would look like this:

 

 

Similarly, there are many ways to style the components which are mentioned on the official site. Let see how the button would look like if we create the button with using the class, primary, success, warning, and danger. Here is the code below:

 

<div class="btn-group btn-group-justified">

<a href="#" class="btn btn-primary">Primary Button</a>

<a href="#" class="btn btn-success">Success Button</a>

<a href="#" class="btn btn-warning">Warning Button</a>

<a href="#" class="btn btn-danger">Danger Button</a>

</div>       

 

You can notice that we have included the different class for each button now let see how the all the buttons would look like:

 

Using bootstrap in a project

 

You can notice in the above screenshot that the every button color is different. So bootstrap is really useful if we want to design our website in a quick way. We will implement more bootstrap features in upcoming tutorials.

 

Conclusion:

In this knowledge bit, we have discussed that how you can download bootstrap and then include Bootstrap into your project locally. We have also discussed that how you can include Bootstrap in your project via CDN. We have given a really quick taste that how bootstrap works. Also, we have discussed the differenced in between the minified and developer versions of bootstrap. We have seen that how we can include different bootstrap classes to styling button.

Click to comment

Most Popular

To Top