How well do you familiar with Bootstrap? We prepared something that can be of high interest to you. The Bootstrap Grid System is used for layout, specifically Responsive Layouts. Understanding how it works is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside 1 or more Containers.
The Rules of the Grid:
- Columns must be the immediate child of a Row.
- Rows are only used to contain Columns, nothing else.
- Rows should be placed inside a Container.
Those rules are very important. The Rows & Columns always work together, and you should never have one without the other.
Don’t ignore the container. At first, the Container may seem trivial or unnecessary, but it’s very important to control width of the layout. The Container is also used to evenly align the left and right edges of the layout within the browser’s viewport. The Container is used to counteract the negative margins of the Row which I will explain a little further down.
It’s also important to mention that the
display:flex. As Flexbox children, the Columns in each row are the same height. Because of Flexbox, horizontal and vertical alignment (align right, center, bottom, etc..) is easily accomplished using Bootstrap 4’s Flex and Auto-margin Utility classes.
Find more examples here.