e8-col
Updated on Sep 18, 2025 4 minutes to readA responsive column component for building grid layouts in combination with e8-row.
Supports column spans, offsets, and responsive breakpoints with flexible styling.
Overview
e8-col is used inside e8-row to define column widths and positions.
You can specify spans for different breakpoints (sm, md, lg, xl), hide columns responsively, and apply offsets.
Custom CSS classes and inline styles are also supported.
<e8-row>
<e8-col span="4">
<div class="p-3 bg-primary text-white">Column 1: Span 4</div>
</e8-col>
<e8-col
span="4"
span-md="6"
>
<div class="p-3 bg-secondary text-white">Column 2: Span 4, SpanMd 6</div>
</e8-col>
<e8-col
span="4"
span-sm="12"
>
<div class="p-3 bg-success text-white">Column 3: Span 4, SpanSm 12</div>
</e8-col>
</e8-row>
🔽 Show more
Column 1: Span 4
Column 2: Span 4, SpanMd 6
Column 3: Span 4, SpanSm 12
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| css-class | Additional CSS class(es) to apply to the column. | E8CssClassType | — |
| css-style | Inline styles for the column. | E8CssStyleType | — |
| offset | Offset column by a number of grid units (0–12). | string | — |
| offset-lg | Offset column by a number of grid units at large breakpoint. | string | — |
| offset-md | Offset column by a number of grid units at medium breakpoint. | string | — |
| offset-sm | Offset column by a number of grid units at small breakpoint. | string | — |
| offset-xl | Offset column by a number of grid units at extra large breakpoint. | string | — |
| span | Number of grid units the column should occupy (0–12). false hides the column. | string | boolean | — |
| span-lg | Number of grid units the column should occupy at large breakpoint (0–12). false hides column. | string | boolean | — |
| span-md | Number of grid units the column should occupy at medium breakpoint (0–12). false hides column. | string | boolean | — |
| span-sm | Number of grid units the column should occupy at small breakpoint (0–12). false hides column. | string | boolean | — |
| span-xl | Number of grid units the column should occupy at extra large breakpoint (0–12). false hides column. | string | boolean | — |
Slots
| Slot | Description |
|---|---|
| default | Slot for the column content. You can place text, components, or other elements inside. |