---
title: "Bootstrap 5 Layouts"
description: "Guide to using Bootstrap 5 template layouts with J2Commerce for Joomla."
url: "https://docs.j2commerce.com/v6/layout/bootstrap5-layouts"
markdown_url: "https://docs.j2commerce.com/v6/layout/bootstrap5-layouts.md"
last_updated: "2026-10-23T02:33:38+00:00"
version: "J2Commerce 6"
breadcrumbs:
  - title: "Home"
    url: "https://docs.j2commerce.com/"
  - title: "J2Commerce 6"
    url: "https://docs.j2commerce.com/v6"
  - title: "Template Layouts"
    url: "https://docs.j2commerce.com/v6/layout"
  - title: "Bootstrap 5 Layouts"
    url: "https://docs.j2commerce.com/v6/layout/bootstrap5-layouts"
---

# Bootstrap 5 Layouts

Bootstrap 5 is the default CSS framework built into Joomla 5 and Joomla 6. Most Joomla templates — including Joomla's own default template Cassiopeia — are built on Bootstrap 5. When you select the Bootstrap 5 layout in J2Commerce, your product listings and detail pages use Bootstrap 5 grid, card, and button classes that match the rest of your site.

## How to tell if your template uses Bootstrap 5

Most templates built for Joomla 5 or Joomla 6 use Bootstrap 5. The clearest way to confirm is to open any page on your site, right-click, and choose **Inspect** (or **View Page Source**). Look at the HTML for class names like `container`, `row`, `col-md-6`, `btn btn-primary`, or `card`. If you see those patterns, your template is Bootstrap 5.

You can also check your template's documentation or product page. Template providers typically list "Bootstrap 5" as a feature for modern templates.

## Common Bootstrap 5 classes

When customizing your J2Commerce layout overrides, you will work with these Bootstrap 5 classes:

### Grid

| Class | What it does |
| --- | --- |
| `container` | Centers content and adds horizontal padding |
| `row` | Creates a horizontal row of columns |
| `col-[number]` | A column spanning \[number\] of 12 grid units |
| `col-md-[number]` | Column width applied at medium screens (768 px) and above |
| `col-lg-[number]` | Column width applied at large screens (992 px) and above |

### Spacing

| Class | What it does |
| --- | --- |
| `mt-3` | Adds top margin (level 3 of 5) |
| `mb-4` | Adds bottom margin (level 4 of 5) |
| `p-3` | Adds padding on all sides (level 3) |
| `mx-auto` | Centers a block element horizontally |

### Buttons

| Class | What it does |
| --- | --- |
| `btn` | Base button style — always required |
| `btn-primary` | Filled button in the primary color |
| `btn-secondary` | Filled button in the secondary color |
| `btn-outline-primary` | Outlined button in the primary color |

### Cards

| Class | What it does |
| --- | --- |
| `card` | Container with border and rounded corners |
| `card-body` | Inner padding area of a card |
| `card-title` | Heading inside a card |
| `card-img-top` | Image at the top of a card |

### Alerts

| Class | What it does |
| --- | --- |
| `alert` | Base alert container — always required |
| `alert-success` | Green success message |
| `alert-danger` | Red error message |
| `alert-warning` | Yellow warning message |

### Display utilities

| Class | What it does |
| --- | --- |
| `d-none` | Hides the element on all screen sizes |
| `d-flex` | Applies flexbox layout |
| `d-block` | Forces block display |
| `d-md-none` | Hides the element on medium screens and above |

### Text utilities

| Class | What it does |
| --- | --- |
| `text-center` | Centers text |
| `text-start` | Left-aligns text |
| `text-end` | Right-aligns text |
| `fw-bold` | Makes text bold |

Full class reference: [getbootstrap.com/docs/5.3](https://getbootstrap.com/docs/5.3/)

## Selecting the Bootstrap 5 layout in J2Commerce

1. Go to **J2Commerce** -> **Configuration**.
2. Click the **Store** tab.
3. Find the **Layout** field and select **Bootstrap 5**.
4. Click **Save**.

All product listing and detail pages across your site will now use the Bootstrap 5 layout files. You can override this per menu item — open any J2Commerce menu item in **Menus** -> **\[your menu\]**, find the **J2Commerce** tab, and set the **Layout** field there.

## Joomla templates that use Bootstrap 5

The following popular Joomla template frameworks and providers use Bootstrap 5. If your template comes from one of these providers, select the Bootstrap 5 layout in J2Commerce.

### Joomla default template

**Cassiopeia** — The template that ships with every Joomla 5 and Joomla 6 installation. It is fully built on Bootstrap 5 and is a safe starting point for testing your J2Commerce store.

### Template frameworks and page builders

**Helix Ultimate / SP Page Builder (JoomShaper)** — Helix Ultimate is one of the most widely used Joomla template frameworks. It is built on Bootstrap 5 and integrates with SP Page Builder 5 for drag-and-drop layout editing.

**Astroid Framework (TemPlaza)** — Astroid is an open-source Bootstrap 5 template framework originally created by JoomDev and now maintained by TemPlaza. A large number of commercial templates from both providers are built on Astroid.

**T4 Framework (JoomlArt)** — The T4 Framework powers JoomlArt templates. JoomlArt has also acquired the Gavick Pro catalog, so modern Gavick Pro templates built with T4 are Bootstrap 5 based.

**Joomla51 templates** — Templates from Joomla51 are built on Bootstrap 5 and designed specifically for Joomla 5 and Joomla 6.

**Nicepage** — Nicepage is a drag-and-drop Joomla template builder that generates Bootstrap 5 output, allowing you to design visually and still get clean, responsive HTML.

**Balbooa Gridbox** — The Gridbox page builder for Joomla uses Bootstrap 5 classes in its output.

**Quix Page Builder** — Quix generates Bootstrap 5 layouts and is compatible with most Joomla 5 templates.

### TemplateMonster and marketplaces

Many templates sold on TemplateMonster, ThemeForest, and similar marketplaces for Joomla 5 are built on Bootstrap 5. Check the template's feature list for "Bootstrap 5" to confirm before purchasing.

## Tips

- If you switch from UIKit to Bootstrap 5 (or vice versa), clear your Joomla cache after saving the configuration so the new layout files are loaded immediately.
- Bootstrap 5 is the default layout in J2Commerce, so new installations are ready to use without any changes if your template is Bootstrap 5.
- When creating template overrides for J2Commerce, copy files from the `components/com_j2commerce/layouts/app_bootstrap5/` folder as your starting point.

## Troubleshooting

### Products look unstyled or the layout breaks

**Cause:** A layout mismatch — your template uses UIKit but J2Commerce is set to Bootstrap 5 (or vice versa).

**Solution:**

1. Inspect your template's HTML source and confirm whether it uses `col-md-*` (Bootstrap 5) or `uk-grid` (UIKit) classes.
2. Go to **J2Commerce** -> **Configuration** -> **Store** tab.
3. Set **Layout** to match your template's CSS framework.
4. Click **Save**, then go to **System** -> **Clear Cache** and clear all caches.

### The Layout dropdown is empty or shows a warning

**Cause:** No layout app plugin is enabled in J2Commerce.

**Solution:**

1. Go to **J2Commerce** -> **Apps**.
2. Search for **Bootstrap** or **UIKit**.
3. Enable the appropriate layout app by clicking the status toggle.
4. Return to **J2Commerce** -> **Configuration** and the **Layout** field will now show options.

### Column widths look wrong on mobile

**Cause:** The Bootstrap 5 grid needs breakpoint-specific classes to behave correctly at each screen size.

**Solution:** When overriding layout files, use responsive column classes such as `col-12 col-md-6 col-lg-4` rather than a fixed `col-4`. This ensures products stack correctly on small screens.