Difference between revisions of "Bootstrap Grid"
PeterRobert (talk | contribs) (Created page with "<div class="btn btn-grey btn-back">{{#fas:arrow-left}} Back</div> <div class="btn btn-grey btn-faq">{{#fas:question-circle}} FAQ Tips & Tricks</div> <hr> <hr> {{Contribute}}") |
PeterRobert (talk | contribs) |
||
| (11 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<div class="btn btn-grey btn-back">{{#fas:arrow-left}} Back</div> <div class="btn btn-grey btn-faq">{{#fas:question-circle}} FAQ Tips & Tricks</div> | <div class="btn btn-grey btn-back">{{#fas:arrow-left}} Back</div> <div class="btn btn-grey btn-faq">{{#fas:question-circle}} FAQ Tips & Tricks</div> | ||
<hr> | <hr> | ||
| + | |||
| + | CE Phoenix Cart is built on Bootstrap. Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. | ||
| + | |||
| + | Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. | ||
| + | |||
| + | Within each container, each row has twelve columns. | ||
| + | |||
| + | Each column can be made to behave differently according the size of the viewport of the device being used to view the page, that is, it is '''responsive'''. | ||
| + | |||
| + | Bootstrap has six default responsive tiers or '''breakpoints'''. | ||
| + | |||
| + | [[Image:Bootstrap Breakpoints.png|800px]] | ||
| + | |||
| + | |||
| + | Here is a container with 3 rows as it would display on a larger viewport. | ||
| + | |||
| + | [[Image:Bootstrap Grid.png|800px]] | ||
| + | |||
| + | |||
| + | The top row has 2 elements. | ||
| + | |||
| + | The first element has the class, '''col-md-8'''. This will default to full width (spanning 12 columns) on viewports smaller than medium (md), for example, on a mobile 'phone but will increase width to span 8 columns on a medium viewport and larger. | ||
| + | |||
| + | The second element has the classes, '''col-6 col-md-4'''. This will span 6 columns on viewports smaller than medium (md) but will decrease width to span 4 columns on a medium viewport and larger. | ||
| + | |||
| + | The middle row has 3 elements. | ||
| + | |||
| + | All 3 elements have the class, '''col-6 col-md-4'''. They will span 6 columns on viewports smaller than medium (md) but will decrease width to span 4 columns on a medium viewport and larger. | ||
| + | |||
| + | The bottom row has 2 elements. | ||
| + | |||
| + | Both the elements have the classes, '''col-6'''. They will span 6 columns on every viewport. | ||
| + | |||
| + | |||
| + | Learn more: '''https://getbootstrap.com/docs/5.3/layout/grid/''' | ||
<hr> | <hr> | ||
{{Contribute}} | {{Contribute}} | ||
Latest revision as of 12:11, 17 September 2024
CE Phoenix Cart is built on Bootstrap. Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content.
Within each container, each row has twelve columns.
Each column can be made to behave differently according the size of the viewport of the device being used to view the page, that is, it is responsive.
Bootstrap has six default responsive tiers or breakpoints.
Here is a container with 3 rows as it would display on a larger viewport.
The top row has 2 elements.
The first element has the class, col-md-8. This will default to full width (spanning 12 columns) on viewports smaller than medium (md), for example, on a mobile 'phone but will increase width to span 8 columns on a medium viewport and larger.
The second element has the classes, col-6 col-md-4. This will span 6 columns on viewports smaller than medium (md) but will decrease width to span 4 columns on a medium viewport and larger.
The middle row has 3 elements.
All 3 elements have the class, col-6 col-md-4. They will span 6 columns on viewports smaller than medium (md) but will decrease width to span 4 columns on a medium viewport and larger.
The bottom row has 2 elements.
Both the elements have the classes, col-6. They will span 6 columns on every viewport.
Learn more: https://getbootstrap.com/docs/5.3/layout/grid/
Phoenix Cart User Guide, like CE Phoenix Cart, is free to use but is maintained by unpaid volunteers.
All other content is the reserved Intellectual Property and Copyright of phoenixcart.org
