Bootstrap Grid

Back

FAQ Tips & Tricks

---

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.

Code references are licensed under a Commons Attribution-NonCommercial-ShareAlike 2.0 UK: England & Wales License.
All other content is the reserved Intellectual Property and Copyright of phoenixcart.org