Journey With Bootstrap: Day 2 ( Grid System)

Hello Geeks,

I am here with the second day of my journey with bootstrap, today we learn Bootstrap's Grid system. If you have not read my first day's journey with Bootstrap then please first read that from here: Journey With Bootstrap: Day 1.

My first day's journey explained what Bootstrap is, its advantages, history and so on.

Now let's start the second day's journey.

Bootstrap's Grid System

We discussed previously that Bootstrap has the cool feature of being able to resize automatically based on the screen size of devices. We can organize content in multiple columns when using large screen devices but when we are using small-screen devices we need to customize the columns to prevent loss of content and also to look good of our applications or websites.



We have four types of screens:

• col-xs extra small screen size device such as smartphones (<768 px).
• col-sm small screen size device such as tablets (>=768 px).
• col-md medium screen size devices such as laptops (>=992 px).
• col-lg large screen size devices such as computers (>=1200 px).

Bootstrap's grid system are responsive and the columns are re-arranged depending on screen size.

Example of grid system