What is Bootstrap and Responsive Web Design

What is Bootstrap

In this tutorial, I am going to show you how to style your web pages using Bootstrap 4, the latest version till now. Before doing that, you might wonder, what is Bootstrap and why do we need to use it?

In short, Bootstrap is a front-end css framework which helps you with styling your web pages. It provides a set of tools to help styling your menu, navigation bar, input fields, buttons, etc. It is extremely helpful when you need to build a responsive web page.

So what is responsive web page?

In the old days, people only view web pages on computer screens and web developers can assume the customers will be viewing pages on large screens. But this is no longer the truth anymore. Nowadays, people are viewing web pages from phones, pads and computers, and our pages should be working for all of them!

In order to achieve that, our web page should look differently based on different screen sizes.

Let’s take coursera as an example:

Full size:  

Mobile version:

Notice the differences now?

In order to achieve this, we can write some media query css. This task can be very cumbersome if the web page is of a decent size. With bootstrap, this can be much more straight-forward.

How will this tutorial work

As in our sfdcinpractice style, we are going to learn Bootstrap 4 by practical examples. I will provide a comprehensive guide step by step to show to how to build a good looking and responsive web page using Bootstrap 4.

Since this is the guide to Bootstrap 4, I will also include the changes since Bootstrap 3 and Bootstrap 4 alpha version. So people coming from an earlier version of Bootstrap can also find it useful.

Subscribe to Sfdcinpractice

Subscribe to get the latest blogs and tutorials of sfdcinpractice. No spam, no trash, only the awesome posts from sfdcinpractice. 

Leave a Reply

Your email address will not be published / Required fields are marked *