Avatar
Avatar can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items.
Example of Image Avatar
Include class avatar and for size add class avatar-lg, avatar-md, avatar-sm, avatar-xs
Example of Text Avatar
Include class avatar-text
Alert
Alerts are used for important information without interrupting the user's flow
Example of Primary Alert
Include class alert and primary-alert to make primary alert.
Example of Diferent Alerts
Include class alert and warning-alert danger-alert success-alert to make different alerts.
Badge
Badges are being used to display a notification count or status information
Example of Badge on Avatars
Include class badge-container and status-badge and for various status use status-online, status-away, status-busy, status-offline
Example of Badge on Icons
Include class badge-container and icon-badge
Card
Example of Vertical Card
Include class card and vertical-card
Card Title
Card Subtitle
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, fuga?
Example of Horizontal Card
Include class card and horizontal-card
Card Title
Card Subtitle
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, fuga?
Example of Text Card
Include class card and text-card
Card Title
Card Subtitle
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, fuga?
Example of Card with Badge
Include class card and badge-card
Card Title
Card Subtitle
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, fuga?
Example of Card with Dismiss
Include class card and dismiss-card
Card Title
Card Subtitle
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, fuga?
Example of Card with Text Overlay
Include class card and overlay-card
Card Title
Card Subtitle
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, fuga?
Image
Images can be responsive and also can be customised to be round shaped
Example of Responsive Image
Include class responsive-img and for making your image Responsive
Example of Round Image
Include class round-img and responsive-img
Input
Inputs are used for taking user inputs in various ways.
Example of Normal Input
Include class input-field for normal input and textarea.
Example of Validated Inputs
Include class input-field and input-validation to make Validated Input.
html
javascript
List
List are used to show and stack similar elements and items.
Example of Unordered List with bullets.
Include class list
- one
- two
- three
- four
- one
- two
- three
- four
- one
- two
- three
- four
Example of Ordered List with bullets.
Include class list and other based on style.
- Numbered List
- Numbered List
- Numbered List
- Numbered List
- Lower Alphabetical List
- Lower Alphabetical List
- Lower Alphabetical List
- Lower Alphabetical List
- Reversed List
- Reversed List
- Reversed List
- Reversed List
- Capital Alphabetical List
- Capital Alphabetical List
- Capital Alphabetical List
- Capital Alphabetical List
- Roman List
- Roman List
- Roman List
- Roman List
- Roman List
- Roman List
- Roman List
- Roman List
Example of List with no bullets.
Include class list and list-no-style
- List item 1
- List item 2
- List item 3
- List item 4
Example of Stacked List
Include class list and list-stacked
-
you have a notification
-
you have a notification
Toast
Example of Toast
Include toast class.
Typography
Example of Heading
For heading u can use h1, h2, h3, h4, h5, h6 elements.
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Example of Paragraph elements.
Include class xl, l, s, xs.
Extra Large Text
Large Text
Text
Small Text
Extra Small Text
Example of Text Alignments
Include class text-left, text-center and text-right for alignment.
Left Text
Center Text
Right Text
Example of Colored Text
Include class text-primary, text-grey, text-white,text-green and text-red
Primary Color Text
Grey Color Text
White Color Text
Green Color Text
Red Color Text
Modal
Modals are dialog overlays that require user interaction. They focus attention on important content while disabling the rest of the page.
Example of Modal
Include class modal-overlay with a modal inside. Use data-modal-open and data-modal-close attributes for open/close behavior.
Rating
Rating components allow users to provide feedback using star ratings. Supports interactive and read-only modes.
Example of Interactive Rating
Include class rating with fa-star icons. Click stars to set a rating.
Example of Read-only Rating with Sizes
Include class rating-readonly to disable interaction. Use rating-lg or rating-sm for sizes.
Chip
Chips are compact elements that represent an input, attribute, or action. Use them for tags, categories, or filters.
Example of Chip Variants
Include class chip and combine with chip-primary, chip-success, chip-danger, chip-warning or chip-outline.
Example of Chip with Avatar and Dismiss
Add an img for avatar and chip-close for a dismiss button.
Progress
Progress bars indicate the completion status of a task or process. Available in multiple colors and sizes.
Example of Progress Bars
Include class progress-container with a progress-bar inside. Set width via inline style to control progress.
Example of Progress Bar Sizes
Use progress-sm for small or progress-lg for large.
Tooltip
Tooltips display informative text when users hover over an element. Available in 4 positions: top, bottom, left, and right.
Example of Tooltip Positions
Include class tooltip-container with tooltip-text inside. Use tooltip-top, tooltip-bottom, tooltip-left, or tooltip-right for position.
Example of Tooltip on Icons
Tooltips work on any element. Here they're used on icon buttons.