Utility classes for common layout patterns, borders, visibility, and more
Visibility
| Class | Description |
|---|---|
.pa-hide
| Always hidden |
.pa-show
| Always visible |
.pa-hide-{bp}
| Hidden at breakpoint and up |
.pa-show-{bp}
| Visible at breakpoint and up |
.pa-hide-below-{bp}
| Hidden below breakpoint |
.pa-show-below-{bp}
| Visible below breakpoint |
Breakpoints:
sm (576px), md (768px), lg (992px), xl (1200px)
Border Utilities
Border Add/Remove
border- All sidesborder-top/border-bottomborder-start/border-endborder-0- Remove all borders
Border Radius
rounded- Default radiusrounded-0- No radiusrounded-sm- Small radiusrounded-lg- Large radiusrounded-circle- Circle (50%)rounded-pill- Pill shape
Overflow
| Class | Description |
|---|---|
.overflow-auto
| Scroll when needed |
.overflow-hidden
| Clip overflow |
.overflow-visible
| Show overflow |
.overflow-scroll
| Always show scrollbar |
.overflow-x-auto
| Horizontal scroll when needed |
.overflow-y-auto
| Vertical scroll when needed |
Position
position-static/position-relative/position-absolute/position-fixed/position-stickytop-0,bottom-0,start-0,end-0- Position edgestranslate-middle- Center with transform
Cursor
| Class | Description |
|---|---|
.cursor-pointer
| Pointer (clickable) |
.cursor-default
| Default arrow |
.cursor-not-allowed
| Not allowed |
.cursor-grab
| Grab (draggable) |
.cursor-help
| Help (question mark) |
.cursor-text
| Text selection |
.cursor-move
| Move/drag |
Interaction
pe-none- Disable pointer eventspe-auto- Enable pointer eventsuser-select-none- Prevent text selectionuser-select-all- Select all on click