Hello Friends, In the last article I told you what is bootstrap and its benefit. The layout of 95% of the websites appearing on the internet is a bootstrap base. Before creating a website on bootstrap, it is very important to understand the grid system of bootstrap.
Friend, in this article, I will tell you what is the bootstrap grid system, how it works, how we create a professional website with the help of the bootstrap grid system.
What is Grid
Grid is one type of structure (like Graph paper) that allow us to combine horizontal and vertical line and writing some content inside the structure. To fix the height and width of the content, we divided it into rows and columns.
Similarly, the grid system of Bootstrap is used to make the website responsive, mobile-friendly, and giving it a professional look.
Bootstrap Grid System
The bootstrap Grid system is divided into 12 parts and it’s content responsive within each part whether it is a large-scale device desktop to a small-scale device like mobile.
What is column re-arrange system
when your website is divided into 3 columns in a large screen device, then it will be set automatically in one column above the other on your mobile screen.
Bootstrap grid system made up of three things:-
What is containerclass:-
Container class is primary class used to design a website.
Two type of container classes
Container:- you must have seen a lot of websites on the internet, where a little space is given both left and right side, it means that the container class is used there.
Container-fluid:- Container-fluid class is used when a web page is to be developed in full-length screen size.
2. What is Row Class:-
Row class is inside the container class. Row class is horizontal. Row class is represented by “.row”. There is at least one row class inside every container class.
3. What is Column Class:-
Bootstrap grid system has 4 type of column classes.
If you want a similar design for tablet and mobile device, only use class col-xs.
Screen Size in px
large Screen device Desktop
Medium Screen device laptop
Small screen device Tablet
Extra small screen device Mobile
Declare the column class in each row class. Column class is represented by “.class”. The column class is vertical. We can divide our content into different columns according to the device.
There is at least one column class inside every row class.
A row has a maximum of 12 columns.
The row must be placed in container and container fluid.
Content always placed inside the column.
Column rules for large scale device:-
For this example, I want to tell you, if you want to show content (text and image) in 1 column for a large device.
I am Professional Web & graphics designer, UI/UX developer, Youtuber, and blogger since 2016. I am also expert in Photoshop 2D & 3D Logo Design, PicsArt photo editing, LightRoom photo editing, Kinemaster video editing, After-effect video, and many more.