Buttons
Forms
Alerts
Tabs & Navigation
Home tab content. Lorem ipsum dolor sit amet.
Progress Bars
Tables
| # | Product | Price | Status |
|---|---|---|---|
| 1 | Premium Plan | $99.99 | Active |
| 2 | Standard Plan | $49.99 | Pending |
| 3 | Basic Plan | $19.99 | Expired |
Pagination
Process Steps
Timeline
Project Started
Initial setup and configuration completed
2 hours agoMilestone Reached
50% of tasks completed successfully
1 day agoReview Pending
Waiting for client approval
3 days agoBadges & Pills
Dropdowns & Modals
Cards
Success Card
This card has a success border color.
List Group
- Active item
- A second item
- A third item
- Disabled item
Statistics
Total Users
8,249
12.5%Revenue
$34.5k
3.2%Activity Feed
John Doe commented on your post
5 min agoGreat work on this project! Looking forward to seeing more.
Task completed successfully
2 hours agoYour deployment has been completed without any errors.
System update available
1 day agoA new version 2.5.0 is available for download.
Breadcrumb
Feature List
- Responsive design for all devices
- Built with Bootstrap 5
- Customizable color schemes
- Modern and clean interface
Avatars
Typography
Heading 1 - Main Title
Heading 2 - Section Title
Heading 3 - Subsection
Heading 4 - Article Title
Heading 5 - Card Title
Heading 6 - Small Title
Display 1
Display 2
Display 3
Display 4
This is a lead paragraph. It stands out from regular paragraphs with larger text size and font weight. Perfect for introductions and key messages.
This is a regular paragraph with bold text, italic text, and underlined text. You can also use highlighted text and small text for additional emphasis.
Another paragraph demonstrating inline code, keyboard input, and
variables.
You can also show sample output from a program.
.text-primary - Primary colored text
.text-secondary - Secondary colored text
.text-success - Success colored text
.text-danger - Danger colored text
.text-warning - Warning colored text
.text-info - Info colored text
.text-muted - Muted text for secondary information
Left aligned text using .text-start
Center aligned text using .text-center
Right aligned text using .text-end
Light weight text (.fw-light)
Normal weight text (.fw-normal)
Semibold weight text (.fw-semibold)
Bold weight text (.fw-bold)
Italic text style (.fst-italic)
Normal text style (.fst-normal)
Underlined text
Strikethrough text
A well-known quote, contained in a blockquote element.
Unordered List
- First item in the list
- Second item with nested list
- Nested item one
- Nested item two
- Third item in the list
Ordered List
- First numbered item
- Second numbered item
- Sub-item A
- Sub-item B
- Third numbered item
- Description Term
- A description for the term above.
- Another Term
-
Another description with more details.
Can include multiple paragraphs.
- Truncated term that is too long
- This term text is truncated with ellipsis.
HTML and CSS are fundamental web technologies.