GETTING STARTED WITH BOOTSTRAP 4

9th Apr, 2019

Click here to share

In the former tutorial on bootstrap, we discussed everything that you need to know concerning the history of bootstrap. We also talked about the advantages and how you can benefit when using bootstrap. In this lesson, we will study how you can get started with using bootstrap 4 on your website or your development machine.

SETTING UP BOOTSTRAP

Bootstrap as a web development framework needs to be included in your project for it to work as expected. The method of adding bootstrap to your project is what setting up bootstrap is all about.

To do this bootstrap needs at least the following files to work

FILES NEEDED TO SET UP BOOTSTRAP ON YOUR PROJECT

• bootstrap.css: bootstrap CSS file.

• bootstrap.js: bootstrap JavaScript functionalities e.g. dropdown, animations, alerts, etc.

• jQuery.js: This file is the jQuery library which can be downloaded from the ‘jQuery’ website. It is required for proper working of ‘bootstrap.js.

INCLUDING BOOTSTRAP IN A PROJECT

All the files listed above that is bootsytrap.css, bootstrap.js and jquery.js are all downloaded into the project folder. The files are then included in your project following the below example.

For instance, your working directory is the c directory. And you have a folder called website. You will then add the following bootstrap folder into your website folder. After that, all the three files you downloaded will be loaded onto the bootstrap so that you can include it properly using the below code snippet as an example.

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Tutorial On worldtok.com/blog</title>

 

<!-- CSS -->

<link href="bootstrap/bootstrap.css" rel="stylesheet">

 

 </head>

 <body>

 

 

 <!-- Javascript -->

 <!-- put jQuery.js before bootstrap.min.js; and then add custom jquery -->

 <script type="text/javascript" src="bootstrap/jquery.js"></script>

 <script type="text/javascript" src="bootstrap/bootstrap.js"></script>

</body>

</html>

If you are following along you can copy the above code and paste it in your index.html inside website directory and then save it. Now open the file in your browser and press ctrl+u or command+u (if you are working on Mac Book), to see if the files are loaded, click on its link and if its opens that means that the files are loaded correctly.

Now that you have loaded bootstrap in your project you can go ahead and start using bootstrap for development.

Having loaded the bootstrap files using the above method, you can start working on it but there is another method you can use to easily load bootstrap without having to download any file to your project directory. This method is called loading using CDN.

LOADING BOOTSTRAP BY CDN

CDN mean content delivery network. Using cdn you can easily load bootstrap by just copying the links and pasting it inside your project.

The only disadvantage of this method is that it cant work if you are offline. So those of us who have limited data to stay online will not find this method economical.

Now to load bootstrap using cdn

Visit the bootstrap website and copy the link to the version you prefer to work with.

In this method, you have to copy three links as well.

One for bootsdtrap.css which will be on the head section of your web page.

Second for jquery.js which will be on the body section of your website just before the closing tag of the body section of your webpage </body>

And finally, the bootstrap.js link which will also be at the body section of your website also just after the jquery.js link.

The code below is just a typical example of index.html that we just loaded bootstrap files using cdn method .

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Tutorial On worldtok.com/blog</title>

 

<!-- CSS -->

<link href="bootstrap/bootstrap.css" rel="stylesheet">

 

 </head>

 <body>

 

 

 <!-- Javascript -->

 <!-- put jQuery.js before bootstrap.min.js; and then add custom jquery -->

 <script type="text/javascript" src="bootstrap/jquery.js"></script>

 <script type="text/javascript" src="bootstrap/bootstrap.js"></script>

</body>

</html>

With that, you have finally loaded the files as expected if you follow the tutorial as explained it will just work as the first method and you can start using it.

If you enjoyed the lesson please support us by sharing it with your friends using the social share buttons.

Also if you are an enthusiastic developer you can join our Facebook group for unlimited support.