BOOTSTRAP 4 GETTING STARTED
Before getting started with Bootstrap first understand what actually bootstrap delivers us and how to use them.
Bootstrap provides a CSS library that contains a bunch of CSS classes that prevents us from writing much of CSS as well as building modern and responsive websites using it.
In simple words, Bootstrap is nothing but just an external CSS file that is connected to an HTML page. You just add bootstrap classes to your HTML elements and your responsive website is ready. So question how to get bootstrap in the first place.
How To Get Bootstrap?
Bootstrap is available to use in 2 different ways for simple HTML pages:
- Using Bootstrap CDN
- By downloading Bootstrap
1). Bootstrap 4 CDN
The Bootstrap 4 can be added to your website by using Bootstrap 4 CDN (Content Delivery Network). BootstrapCDN is free to use.
CDN stands for Content Delivery Network. It refers to geographically distributed data centres and servers that ensure to deliver data faster.
Here is the CDN of Bootstrap 4 CDN, copy the code and paste it in
Botstrap 4 CDN: Minifies CSS
Responsive Meta Tag
Bootstrap is developed as a mobile-first approach, it optimizes code for mobile devices first and then scales it up to larger devices using a media query. To ensure proper rendering of the Bootstrap component add the following meta tag in
Responsive meta tag
Hello World In Bootstrap
Here is code of complete setup with Hello World!:
Hello World In Bootstrap
Apart from using CDN, we can also directly download the Bootstrap library and use it. To download Bootstrap go to the official site of Bootstrap.
The downloaded compiled bootstrap file will be a zip file when unzipped contains 2 folders: JS and CSS. The CSS folder contains a few
.map file but we are only interested in bootstrap.css and bootstrap.min.css, these two files contain core CSS of bootstrap.
Add either of these two files in your HTML file ( bootstrap.min.css is recommended because it is minified therefore has less size ).
Similarly in the JS folder bootstrap.min.js and add it to your HTML file. You will also have to add jquery and Popper.js externally. Now your bootstrap is set up.
Bootstrap CDN vs Local
It is suggested to use CDN because your visitors may already have visited some websites that contain Bootstrap, in that case, their browser has already downloaded Bootstrap's CSS and JS from the same CDN, it is stored in the cache memory and when visitors visit your website then it directly loads it from cache memory makes the website faster.