*Hello everyone, My previous blog was about getting started with Bootstrap and learning the basics about it.* > Here is a link Getting started with Bootstrap. # In today's blog, I will cover
![main image.jpg](https://cdn.steemitimages.com/DQmcofwgcQ5cvAsy15vQcYUHgeWnbrM9Q2zcMy29V6i1sGn/main%20image.jpg) *

Grid system in bootstrap

* Bootstrap allows its user to draw / design **12 columns** on screen. You can draw **maximum of *12* columns using bootstrap.** Make sure that the sum of columns add up to 12. ![coloums.PNG](https://cdn.steemitimages.com/DQmTQQnk2ndz4ujaJTZPehkibgKgHgxy6gcbDUARAeKs66x/coloums.PNG) *This is the total amount of columns you can use.* As you already know that bootstrap is famous because of its responsive behavior. The webpage accommodates its size with respect to the sizeof the screen. The columns in bootstrap also re-arrange themselves according to the size of the screen. * Initiating a grid: - *From my previous blog,You come to know that every pre-defined keyword in bootstrap is in the form of class. Similar is the case with grids of bootstrap !* Yes you guessed this right ! There is also a class for rows and columns. Since a grid consists of both rows and columns. To initiate a column, We use the class column which can be modified as the user wants . Bootstrap grid has four classes * xs ( Extra small ) * sm (Small) * md (Medium) * lg (Large) These classes will create a grid as it is specified by their name. ### For example :-

I am a column

*Creates a column with a lavender background which stacks on small screen sizes * As we know a grid is a combination of rows and columns that's why we have typed a column class inside a row class. ## That's all for today, Tomorrow I'll cover more about grid systems in Bootstrap, How to use it and what actually screen sizes do ! # Until then peace ! ![images.png](https://cdn.steemitimages.com/DQmPCzdkVTcu7Ey3DPXv7KyGUnrWa1asytHtrJM1HkG5H3k/images.png)