Home »
Web programming »
Bootstrap
How to set up Bootstrap environment?
How to set up Bootstrap environment: In this article, we will learn how to set up the bootstrap environment to build a project and how we can work on it easily?
Submitted by Bharti Parmar, on July 30, 2018
There are many web portals explaining the environment setup for Bootstrap. Most of them look filthy and overwhelmed with texts, which leaves readers confused with the proper steps to follow. So, I have brought to you the fully functioning pictorial stepwise tutorial. No more roaming on websites, bobbling minds, and time wastage. Setup easily and get started. Feel Free to ask for doubts in the comment section!
In the previous article: Bootstrap - framework for responsive web design, we discussed their two ways to use it; first by downloading bootstrap then use it as a local file and second by using CDN (content delivery network). CDN is a public host through which you don’t need to download any source files. It’s all up to you, what the way you want to use it. There are so many code editors are available online where you can test the bootstrap or if you want to setup bootstrap to your project, you can follow the following steps. You can download CDN from https://getbootstrap.com and follow the instructions. We have also included that in this article below. Check that for sure.
Most popular source of downloading Bootstrap is MaxCDN (formerly NetDNA, acquired by stack Path). MaxCDN provides bootstrapCDN, which is a free and public CDN; not develop by Otto and Thornton. Its beta version was launched on 7th June 2012 and stable version launch on 5th July 2012. It provides support for Bootstrap's CSS and JavaScript (bootstrap.min.css and bootstrap.min.js are two CDN links). So, it is easy to use Bootstrap with a CDN. It supports caching which leads to faster loading time. CDN assures that whenever a user requests a file from it, it will be served from the server closest to them.
Setting up on CDN:
When you only need to include Bootstrap's compiled CSS or JS in your <head> ... </head> tag, you can use BootstrapCDN.
CSS only
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
JS, Popper.js, and jQuery
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Setting up on local file
It is very easy to setup and using bootstrap. At this time latest version is bootstrap 4. You can also download the latest version of Bootstrap from its official website.
When your bootstrap is downloaded, extract the ZIP file, and see the following file/directory
Step 1) Extract and save the file in any particular folder:
Step 2) After extracting the file you can see this two files:
Step 3) In CSS file you have this Linker Address Map of bootstrap.min.css:
Step 4) Click and copy that path:
Step 5) Similarly, In JS file you have bootstrap.bundle.min.js:
Step 6) Select and Copy it’s Path:
Step 7) Now, On HTML file paste these path in link like this:
Conclusion:
We have now studied introduction about this amazing framework and installed it in our PCs; both local and CDN ways. We are all set to starting building a responsive yet beautiful website front-end design. Stay tuned for the next article. We will start discovering more about Bootstrap and start building front-ends sooner in upcoming articles. See you in the next Article! Happy Learning!