tutorialstonight logo
A Platform To Learn To Code

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:

  1. Using Bootstrap CDN
  2. 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 <head> tag.

Botstrap 4 CDN: Minifies CSS

Javascript Dependency

Some of Bootstrap component requires use of javascript to work. Bootstrap mainly require jquery, Pooper.js and own javascript plugins.

Note: In the latest version of Bootstrap jquery has been removed and replaces by vanilla javascript(Pure javascript).

The following are the javascript dependencies of Bootstrap 4. Copy it and paste it just before the end of <body> tag.

Botstrap 4 CDN : Javascript Dependencies

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 <head> tag.

Responsive meta tag

Hello World In Bootstrap

Here is code of complete setup with Hello World!:

Hello World In Bootstrap

Run the code

Downloading 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 .css and .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.

Bootstrap Containers