> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nexudus.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Bootstrap CSS Classes

> How to use Bootstrap utility classes in the portal editor to customise spacing, colours, layout and responsiveness.

Every editor component exposes an **Advanced** section with a `className` (or `classNames`) field. This field accepts any valid [Bootstrap 5 utility class](https://getbootstrap.com/docs/5.3/utilities/api/), giving you fine-grained control over appearance without custom CSS.

## Spacing utilities

The most commonly used utilities control **margin** and **padding**.

### Syntax

```
{property}{side}-{breakpoint}-{size}
```

| Token        | Values                                 | Meaning                                                                    |
| ------------ | -------------------------------------- | -------------------------------------------------------------------------- |
| `property`   | `m` or `p`                             | Margin or padding                                                          |
| `side`       | `t`, `b`, `s`, `e`, `x`, `y`, or blank | Top, bottom, start (left), end (right), horizontal, vertical, or all sides |
| `breakpoint` | `sm`, `md`, `lg`, `xl`, `xxl`          | Optional — applies from this breakpoint up                                 |
| `size`       | `0`–`5`, `auto`                        | 0 = none, 1 = 0.25 rem, 2 = 0.5 rem, 3 = 1 rem, 4 = 1.5 rem, 5 = 3 rem     |

### Examples

| Class       | Effect                                        |
| ----------- | --------------------------------------------- |
| `mt-3`      | Top margin of 1 rem                           |
| `mb-5`      | Bottom margin of 3 rem                        |
| `p-4`       | 1.5 rem padding on all sides                  |
| `px-3 py-5` | 1 rem horizontal + 3 rem vertical padding     |
| `ms-auto`   | Push element to the right                     |
| `mx-auto`   | Centre horizontally                           |
| `pt-md-4`   | 1.5 rem top padding from medium breakpoint up |

## Text utilities

| Class                 | Effect                                    |
| --------------------- | ----------------------------------------- |
| `text-start`          | Left-align text                           |
| `text-center`         | Centre-align text                         |
| `text-end`            | Right-align text                          |
| `text-white`          | White text                                |
| `text-muted`          | Muted (grey) text                         |
| `text-primary`        | Primary colour text                       |
| `fw-bold`             | Bold font weight                          |
| `fs-1` through `fs-6` | Font sizes matching `<h1>` through `<h6>` |
| `text-uppercase`      | Uppercase text                            |
| `text-truncate`       | Ellipsis-truncate overflowing text        |

## Background colours

| Class            | Effect               |
| ---------------- | -------------------- |
| `bg-primary`     | Primary brand colour |
| `bg-secondary`   | Secondary colour     |
| `bg-success`     | Green success        |
| `bg-danger`      | Red danger           |
| `bg-warning`     | Yellow warning       |
| `bg-info`        | Cyan info            |
| `bg-light`       | Light grey           |
| `bg-dark`        | Dark/black           |
| `bg-white`       | White                |
| `bg-transparent` | Transparent          |

## Borders

| Class            | Effect                      |
| ---------------- | --------------------------- |
| `border`         | Default border on all sides |
| `border-0`       | Remove all borders          |
| `border-top`     | Border on top only          |
| `rounded`        | Rounded corners             |
| `rounded-3`      | Medium radius               |
| `rounded-circle` | Full circle crop            |
| `rounded-pill`   | Pill shape                  |
| `border-primary` | Primary colour border       |
| `border-2`       | 2 px border width           |

## Display and visibility

| Class               | Effect                                      |
| ------------------- | ------------------------------------------- |
| `d-none`            | Hide element                                |
| `d-block`           | Show as block                               |
| `d-flex`            | Flexbox container                           |
| `d-inline-flex`     | Inline flexbox                              |
| `d-none d-md-block` | Hidden below medium, visible from medium up |
| `d-md-none`         | Hidden from medium up                       |

### Responsive visibility pattern

Combine `d-none` with a breakpoint display class to show content only at certain screen sizes:

```
d-none d-lg-block     → visible only on large screens and up
d-block d-md-none     → visible only below medium
d-none d-sm-block d-xl-none → visible between small and large
```

## Flexbox utilities

| Class                     | Effect                            |
| ------------------------- | --------------------------------- |
| `d-flex`                  | Enable flexbox                    |
| `flex-row`                | Horizontal direction              |
| `flex-column`             | Vertical direction                |
| `justify-content-center`  | Centre items horizontally         |
| `justify-content-between` | Space items evenly                |
| `align-items-center`      | Centre items vertically           |
| `gap-2`                   | Gap of 0.5 rem between flex items |
| `gap-3`                   | Gap of 1 rem                      |
| `flex-wrap`               | Allow wrapping to next line       |

## Sizing

| Class                           | Effect                          |
| ------------------------------- | ------------------------------- |
| `w-25`, `w-50`, `w-75`, `w-100` | Width as percentage             |
| `h-100`                         | Full height                     |
| `mw-100`                        | Max width 100%                  |
| `min-vh-100`                    | Minimum height of full viewport |

## Shadows

| Class         | Effect        |
| ------------- | ------------- |
| `shadow-none` | No shadow     |
| `shadow-sm`   | Small shadow  |
| `shadow`      | Medium shadow |
| `shadow-lg`   | Large shadow  |

## Combining classes

The `className` field accepts multiple classes separated by spaces. Combine them freely:

```
mt-4 mb-2 text-center bg-light rounded-3 shadow-sm p-4
```

This gives a 1.5 rem top margin, 0.5 rem bottom margin, centred text, light background, rounded corners, a small shadow, and 1.5 rem padding.

<Tip>
  Responsive prefixes work on most utilities. For example, `text-center text-md-start` centres text on mobile but left-aligns it from medium
  breakpoint up.
</Tip>