Welcome

Tester for some shared components in the boilerplate

Create custom theme

Modal Test

Toast Test

Encryption

Solid Buttons

Outline Buttons

Button Sizes

Link Button

Cards

Primary Card
Card Title

Sample content to see how the theme applies to the cards in the system.

Action
Secondary Card
Card Title

Sample content to see how the theme applies to the cards in the system.

Action
Light Card
Card Title

Sample content to see how the theme applies to the cards in the system.

Action

Alerts

Primary! This is a primary alert.
Secondary Alert
Info! Something you should know about.
Success! Operation completed successfully.
Danger! Something went wrong.
Warning! Please check your input.
Light Alert
Dark Alert

List, Badges & Progress

List Group
  • Active Item
  • Messages 14
  • Alerts 3
  • Updates 7
  • Settings
Badges
Primary Secondary Success Danger Warning Info
Pill Primary Pill Secondary Pill Success Pill Danger
Progress Bars

Forms

Basic Form
Floating Labels
Input Groups
@
@example.com
$ .00
Range & Switches
Form Validation
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a state.
Please provide a zip.
You must agree before submitting.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Normal paragraph with a link, bold text and italic text.

Primary Text

Secondary Text

Success Text

Danger Text

This is a blockquote element to demonstrate themed typography styles.

Someone famous in Source Title

Table

Users
3 records
# Name Email Role Status
1 Anna Smith anna@example.com Admin Active
2 John Doe john@example.com Editor Active
3 Mary Rose mary@example.com User Pending

Accordion

Bootstrap 5 is the most popular CSS framework in the world for building responsive, mobile-first websites. It provides a comprehensive set of pre-built components and utilities.

No, Bootstrap 5 removed jQuery dependency. Now it uses pure JavaScript (Vanilla JS) for all interactive components.

Yes, it is compatible with all modern browsers: Chrome, Firefox, Edge, Safari and Opera.

Breadcrumb & Spinners

Breadcrumb
Spinners
Placeholders Skeleton

Collapse

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
First collapse panel — toggle with the button above to show both at once.
Second collapse panel — toggle with the button above to show both at once.

Button Groups & Toolbar

Popover & Tooltip

Card Variations

16:9 Ratio
Responsive Design

Use ratio classes to maintain fixed aspect ratios across all screen sizes.

Updated 3 days ago
Centered Card

Perfectly aligned content with flexbox utilities.

Explore
New
Featured Card

A card with a primary border accent and badge.

  • Feature one
  • Feature two
  • Feature three
Get Started
Side Panel

The Offcanvas is a sliding component that can appear from any side of the screen.

  • Dashboard
  • Users
  • Products
  • Reports
  • Settings
Tip: It can also be opened from the right, top or bottom.