Bootstrap Grids: Difference between revisions
(Created page with "Bootstrap's Grid system is one of its best features. The designers of Bootstrap realized that apps for different sized devices should have different layouts, and this it shoul...") |
|||
| Line 10: | Line 10: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
! Name !! Description !! | ! Name !! Description !! Screen with Width (pixel) | ||
|- | |- | ||
| xs || Extra Small || <768 | | xs || Extra Small || <768 | ||
| Line 20: | Line 20: | ||
| lg || Large || 1200+ | | lg || Large || 1200+ | ||
|} | |} | ||
=== Columns === | |||
Based on the width of the screen, you may choose to show your information using a different number of columns. A Extra Small screen may have one column, two for a Small screen and 3 for a Medium. Bootstrap lets you specify this. | |||
A Bootstrap row is divided up into 12 sections. For each size, you can specify how many sections each column has. For example: | |||
* A Extra Small screen could have one column 12 sections wide. | |||
* A Small screen could have 2 columns, each 6 sections wide. | |||
* A Medium screen could have 3 columns, each 4 sections wide. | |||
* A Large screen could have 4 columns, each 3 sections wide. | |||
Notice that in each case, the total of all the rows adds up to 12. (You can also have columns of unequal width: just make sure they still add up to 12.) | |||
Revision as of 20:23, 11 June 2016
Bootstrap's Grid system is one of its best features. The designers of Bootstrap realized that apps for different sized devices should have different layouts, and this it should be made easy to do.
The way they implemented this works well with AppStudio. We have a number of features which make Bootstrap Grids easy to implement in your app.
Let's have a look.
Screen Sizes
Bootstrap allows you to have different designs for up to 4 screen sizes:
| Name | Description | Screen with Width (pixel) |
|---|---|---|
| xs | Extra Small | <768 |
| sm | Small | 991 |
| md | Medium | 1199 |
| lg | Large | 1200+ |
Columns
Based on the width of the screen, you may choose to show your information using a different number of columns. A Extra Small screen may have one column, two for a Small screen and 3 for a Medium. Bootstrap lets you specify this.
A Bootstrap row is divided up into 12 sections. For each size, you can specify how many sections each column has. For example:
- A Extra Small screen could have one column 12 sections wide.
- A Small screen could have 2 columns, each 6 sections wide.
- A Medium screen could have 3 columns, each 4 sections wide.
- A Large screen could have 4 columns, each 3 sections wide.
Notice that in each case, the total of all the rows adds up to 12. (You can also have columns of unequal width: just make sure they still add up to 12.)