If you don’t put a Row in a Container, the Row will overflow it’sĬontainer, causing an undesirable horizontal scroll. This is to keep content evenly aligned on the edges of the layout. The Container padding of 15px is used to counteract the negative margins of the Row. Rows have a negative left/right margin of -15px. It’s important that a Container is used to contain grid Rows (.row). It all depends on what layout you’re trying toĪccomplish, but don’t get too concerned with that yet. You can have multiple Rows in aĬontainer, and you can have multiple Containers on one page. When utilizing the Grid, one more Rows will be placed inside the Container. But, if youĭo utilize the Grid Rows & Columns, the Rows should be placed inside a Container. Note: A Container can be used to contain any content, not just the Grid Rows & Columns. container scales down in width responsively (as the screen width narrows) so that eventually You can use either one: 1 - Fixed-width container to center your layout in the middle:Ģ - Full-width container for a layout the spans the entire width: container, but there is also theįull-width. The Container is also used to evenly align the left and right edges of theīootstrap 4 has 2 types of Containers. For example, this is perfectly valid Bootstrap markup:Īt first, the Container may seem trivial or unnecessary, but it’s very important to control The Container can be used to hold any elements and content. The Container is the root (a.k.a: top-level, outermost) element of the Bootstrap Grid. In the basic examples before you may have noticed that I used the. There's a Right Way to Use the Bootstrap Grid. At first this might sound complicated, but it’s really easy once you understand how the Grid works. On Stack Overflow by simply applying those rules. I’ve answered countless Bootstrap questions

The Rows & Columns always work together, and you should never have one without the other.īad stuff will happen if you don’t follow those 3 simple Grid rules, exactly. You might have some questions like… Why do I need a Container? Can I make one column wider than the others? Do I need to use the Row? This gives us one big “column” horizontally across the viewport…īasic Grid concepts are quickly understood, but you may be wondering why all of this Reference the 'bootstrap-grid.css' which contains the Grid and Flexbox classes. The Bootstrap Grid can be used alone, without the Bootstrap JavaScript and other CSS Components. The Grid is made up of groupings of Rows & Columns inside one or more Containers. Understanding how it works is vital to understanding Bootstrap. Is used for layout, specifically Responsive Layouts.

Understanding bootstrap grids