Interactivity
Interactivity utilities provide behavior-driven CSS classes to enhance user experience through custom cursor styles, scroll behavior, list presentation, and text direction. Built to extend Bootstrap , these utilities work seamlessly in responsive and RTL environments.
All classes use the al- prefix and follow utility-first conventions.
Overview
| Utility Group | Class Format | Description |
|---|---|---|
| Cursor | .al-cursor-{type} | Set mouse cursor style |
| Scroll Behavior | .al-scroll-{type} | Set scroll behavior |
| Scrollbar on Hover | .al-scroll-on-hover | Custom scrollbar visible on hover |
| List Style | .al-list-{type} | Customize list item markers |
| Text Direction | .al-rtl / .al-ltr | Control text direction |
Class Usage Reference
| Class | Effect |
|---|---|
| .al-cursor-pointer | Pointer cursor on hover |
| .al-cursor-wait | Show wait indicator |
| .al-scroll-smooth | Enable smooth scrolling |
| .al-scroll-on-hover | Reveal scrollbar on hover |
| .al-list-none | No bullet style |
| .al-list-circle | Circle bullet |
| .al-rtl | Right-to-left text |
| .al-ltr | Left-to-right text |
Examples
Cursor
Auto
Default
Pointer
Copy
Text
Crosshair
Wait
Move
Help
None
Not-allowed
Progress
Cell
Vertical-text
Alias
No-drop
Grab
Grabbing
All-scroll
Col-resize
Row-resize
N-resize
Zoom-in
Zoom-out
Copy
Auto
Default
Pointer
Copy
Text
Crosshair
Wait
Move
Help
None
Not-allowed
Progress
Cell
Vertical-text
Alias
No-drop
Grab
Grabbing
All-scroll
Col-resize
Row-resize
N-resize
Zoom-in
Zoom-out
Scrollbar on Hover
Interactivity utilities provide behavior-driven CSS classes to enhance user experience through custom cursor styles, scroll behavior, list presentation, and text direction. Built to extend Bootstrap , these utilities work seamlessly in responsive and RTL environments.
Interactivity utilities provide behavior-driven CSS classes to enhance user experience through custom cursor styles, scroll behavior, list presentation, and text direction. Built to extend Bootstrap , these utilities work seamlessly in responsive and RTL environments.
Copy
Scrollbar on Hover
List Style
None
- List Item 01
- List Item 02
Circle
- List Item 01
- List Item 02
Square
- List Item 01
- List Item 02
Decimal
- List Item 01
- List Item 02
Decimal leading zero
- List Item 01
- List Item 02
Disc
- List Item 01
- List Item 02
Upper roman
- List Item 01
- List Item 02
Lower roman
- List Item 01
- List Item 02
Upper alpha
- List Item 01
- List Item 02
Lower alpha
- List Item 01
- List Item 02
Arabic indic
- List Item 01
- List Item 02
Copy
- None
- Circle
- Square
- Decimal
- Decimal leading zero
- Disc
- Upper roman
- Lower roman
- Upper alpha
- Lower alpha
- Arabic indic
Direction (LTR | RTL)
هذا النص باللغة العربية من اليمين إلى اليسار
This is English text from left to right.
Copy
RTL
LTR
Developer Notes
-
.al-cursor-{type} sets custom cursor styles (e.g., pointer, grab, wait).
-
.al-scroll-{smooth|auto} controls scroll behavior.
-
.al-scroll-on-hover adds WebKit-only custom scrollbars on hover.
-
.al-list-{type} applies list-style (none, circle, square, etc.).
-
.al-{rtl|ltr} sets text direction for RTL or LTR layout.
-
Scrollbars use Bootstrap variable-based RGBA colors.
-
Cursor and scroll utilities are CSS-only (no JS required).
-
Utilities integrate cleanly with Bootstrap and RTL support.