Bootstrap 4 Installation and Download

Where to Get Bootstrap 4?

Getting started with Bootstrap is quite easy.

To begin using Bootstrap with your website you need to get it installed by one of the following techniques:

  • Include bootstrap 4 CDN link in your project from CDN
  • Get it downloaded from getbootstrap.com

Bootstrap 4 CDN

CDN stands for Content Delivery Network.

It is helpful in including Bootstrap 4 in your project is you’re not willing to download and host it yourself.

The CDN supports for Bootstrap’s CSS is available with BootstrapCDN. It is necessary that you include the jQuery:

BootstrapCDN:

Using Bootstrap 4 CDN has one advantage.

Owing to its popularity, Bootstrap 4 has been downloaded multiple time from BootstrapCDN and hence available in the cache.

This means that when other users visit your site, the loading time will be short and fast.

Also, CDNs in general, make sure that requested files are served at the nearest server from the user that enhances the response time.

Bootstrap 4 download

If you’d like  to download and host Bootstrap 4 for yourself you can get it from the https://getbootstrap.com

The website contains all the necessary files that you’ll need to get started with your work with Bootstrap 4.

We will now discuss the steps for creating your first webpage using Bootstrap 4:

Adding HTML5 doctype: The HTML elements used by Bootstrap 4 work best if you’re using HTML5 doc type.

Reason being that, the CSS properties require HTML5 elements to work best.

Here’s the code

Bootstrap 4 is mobile-first: The core Bootstrap 4 framework follow the mobile-first styles.

This features makes Bootstrap inherently responsive to mobile devices.

In order to make sure that the pages are properly rendered and the touch zooming is also working fine, you need to add the following <meta> tag inside your HTML doc’s <head> element

Here, the page width is made responsive by setting it as “device-width”.

This means that the width will follow the screen width of the device which, of course, will vary device to device.

Similarly, the scaling or ‘zoom level’ of the page is declared in the intial-scale which is set to one making it accordingly scaled when loaded by the browser.

Bootstrap Containers

The main job of the container in Bootstrap 4 is to provide as a containing element that will wrap the website contents.

You can choose from the following two container classes:

For a responsive fix width container you can go for the .container class whereas

You can use the .container-fluid class that will provide a full width container that will span the entire width of the viewport

Here’s the example code for both:

.container class

.container-fluid class