Using Bootstrap 4 Grid

Using Bootstrap 4 Grid
Average rating: 0
(0 votes)

Thanks! You’ve rated this material!

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:

  1. Columns must be the immediate child of a Row.
  2. Rows are only used to contain Columns, nothing else.
  3. 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 .row is 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.

And now let’s see how we can integrate Bootstrap CSS styles and JavaScript files and create a simple Angular app with a Bootstrap interface.

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111