What is a Grid?
In graphic design, a grid is a structure (usually
two-dimensional) made up of a series of intersecting straight (vertical,
horizontal) lines used to structure the content. It is widely used to
design layout and content structure in print design. In web design, it
is a very effective method to create a consistent layout rapidly and
effectively using HTML and CSS.
Working of Bootstrap Grid System
Grid systems are used for creating page layouts through a series of
rows and columns that house your content. Here's how the Bootstrap grid
system works −
- Rows must be placed within a .container class for proper alignment and padding.
- Use rows to create horizontal groups of columns.
- Content should be placed within the columns, and only columns may be the immediate children of rows.
- Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
- Columns create gutters (gaps between column content) via padding.
That padding is offset in rows for the first and the last column via
negative margin on .rows.
- Grid columns are created by specifying the number of twelve
available columns you wish to span. For example, three equal columns
would use three .col-xs-4.
Example |
Description |
Download link |
Grids |
This example indicates about grid structure in Bootstrap. |
Download |
No comments:
Post a Comment