Utility Classes Reference
Tabler (based on Bootstrap 5) provides a comprehensive set of atomic CSS utility classes. When using @gulcc/tabler-vue, you can use these class names directly in your templates for fine-grained style control.
Borders
Border Direction
html
<div class="border">All sides</div>
<div class="border-top">Top border</div>
<div class="border-end">End (right) border</div>
<div class="border-bottom">Bottom border</div>
<div class="border-start">Start (left) border</div>
<div class="border-x">X-axis borders</div>
<div class="border-y">Y-axis borders</div>Border Width
| Class | Description |
|---|---|
border-0 | No border |
border | Standard border (1px) |
border-wide | Wide border (2px) |
Removing Borders
html
<div class="border border-top-0">Remove top</div>
<div class="border border-end-0">Remove end</div>
<div class="border border-bottom-0">Remove bottom</div>
<div class="border border-start-0">Remove start</div>Border Color
html
<div class="border border-primary">primary</div>
<div class="border border-secondary">secondary</div>
<div class="border border-success">success</div>
<div class="border border-danger">danger</div>
<div class="border border-warning">warning</div>
<div class="border border-info">info</div>Border Radius
| Class | Description |
|---|---|
rounded-0 | No rounding |
rounded | Standard rounding |
rounded-1 | Small rounding |
rounded-2 | Medium rounding |
rounded-3 | Large rounding |
rounded-circle | Circle |
rounded-pill | Pill shape |
rounded-top / rounded-end / rounded-bottom / rounded-start | Single side rounding |
Cursors
| Class | Effect |
|---|---|
cursor-pointer | cursor: pointer |
cursor-default | cursor: default |
cursor-grab | cursor: grab |
cursor-grabbing | cursor: grabbing |
cursor-wait | cursor: wait |
cursor-text | cursor: text |
cursor-move | cursor: move |
cursor-not-allowed | cursor: not-allowed |
cursor-help | cursor: help |
cursor-crosshair | cursor: crosshair |
cursor-zoom-in | cursor: zoom-in |
cursor-zoom-out | cursor: zoom-out |
Interactions
User Select
| Class | Description |
|---|---|
user-select-all | Select all on click |
user-select-auto | Default selection behavior |
user-select-none | Disable text selection |
Pointer Events
| Class | Description |
|---|---|
pe-none | pointer-events: none |
pe-auto | pointer-events: auto |
Overflow
| Class | Description |
|---|---|
overflow-auto | Auto scroll |
overflow-hidden | Hide overflow |
overflow-visible | Visible overflow |
overflow-scroll | Force scrollbar |
Margins & Padding
Tabler uses the {property}{side}-{size} format:
- property:
m— margin,p— padding - side:
t(top),b(bottom),s(start/left),e(end/right),x(both x),y(both y), empty (all) - size:
0~8
Size Reference
| Size | Value |
|---|---|
0 | 0 |
1 | 0.25rem |
2 | 0.5rem |
3 | 1rem |
4 | 1.5rem |
5 | 2rem |
6 | 3rem |
7 | 5rem |
8 | 8rem |
Examples
html
<!-- Margin -->
<div class="m-4">Margin all sides</div>
<div class="mt-3">Margin top</div>
<div class="mb-2">Margin bottom</div>
<div class="ms-4">Margin start</div>
<div class="me-2">Margin end</div>
<div class="mx-auto">Horizontally center</div>
<!-- Padding -->
<div class="p-4">Padding all sides</div>
<div class="pt-3">Padding top</div>
<div class="pb-2">Padding bottom</div>
<div class="ps-4">Padding start</div>
<div class="pe-2">Padding end</div>Vertical Align
| Class | Description |
|---|---|
align-baseline | vertical-align: baseline |
align-top | vertical-align: top |
align-middle | vertical-align: middle |
align-bottom | vertical-align: bottom |
align-text-top | vertical-align: text-top |
align-text-bottom | vertical-align: text-bottom |
Best used with d-inline or d-inline-block:
html
<span class="d-inline-block align-middle">Centered text</span>💡 Tip: All utility classes above come from Tabler / Bootstrap 5. Learn more at the Tabler documentation.