Component Library

80+ production-ready Bootstrap 5.3 components with dark mode support

80+
Components
7
Templates
2
Theme Modes
4
Languages
Tip: Toggle dark mode using the button in the bottom right corner.

Hero Sections

Landing page hero components

Centered Hero
New Release

Build Beautiful Websites Faster

Premium Bootstrap templates that help you launch your next project in record time.

Split Hero
Featured

Powerful Features for Modern Teams

Streamline your workflow with our comprehensive suite of tools.

Hero Image Placeholder

Gradient Hero

Transform Your Business Today

Join thousands of companies already using our platform.

Footers

Footer layout components

Simple Footer
Multi-Column Footer
Newsletter Footer

Subscribe to our newsletter

Get the latest updates delivered to your inbox.

Buttons

Button styles, sizes, and states

Button Variants
Outline Buttons
Button Sizes
Icon Buttons
Button Groups
Loading Buttons

Cards

Card layouts and variations

Basic Card
Card Title

Some quick example text.

Go somewhere
Image Card
Image Card

Card with image placeholder.

Card with List
Featured
  • An item
  • A second item
  • A third item
Horizontal Card
Horizontal Card

This is a horizontal card layout.

Last updated 3 mins ago

Overlay Card
Card Title

Overlay text on image background.

Forms

Form controls and input variations

Basic Form
Floating Labels
Input Groups
@
Checkboxes & Radios
Checkboxes
Radios
Switches

Tables

Table styles and variations

Basic Table
#NameEmailStatusActions
1John Doejohn@example.comActive
2Jane Smithjane@example.comPending
3Bob Wilsonbob@example.comInactive
Striped & Hoverable
ProductCategoryPriceStock
Bootstrap TemplateTemplates$49.00
Admin DashboardDashboards$99.00
UI Component KitComponents$29.00

Modals

Modal dialogs

Alerts

Alert messages and notifications

A simple primary alert—check it out!
Operation completed successfully!
An error occurred. Please try again.
Warning! Please review before proceeding.
This is a dismissible alert.

Badges

Labels and badges

Badge Variants
PrimarySecondarySuccessDangerWarningInfo
Pill Badges
PrimarySuccessDanger
Badges with Icons
FeaturedVerifiedHotPending

Progress Bars

Progress indicators

65%

Accordions

Collapsible content panels

This is the first item's accordion body. It is shown by default.

This is the second item's accordion body. It is hidden by default.

This is the third item's accordion body. It is hidden by default.

Tabs

Tab navigation

Basic Tabs
Home tab content goes here...
Profile tab content goes here...
Contact tab content goes here...
Pills

Tooltips & Popovers

Hover and click overlays

Tooltips
Popovers

Pagination

Page navigation

List Groups

Grouped list items

Basic
  • An item
  • A second item
  • A third item
With Badges
  • Inbox 14
  • Drafts 2
  • Sent 99+

Spinners

Loading indicators

Loading...

Typography

Text styles and headings

Headings

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
Display Headings

Display 1

Display 4

Display 6

Text Styles

This is a lead paragraph. It stands out from regular paragraphs.

Regular paragraph text with bold, italic, and underlined text.

This is small muted text for secondary information.

Highlighted text for emphasis.

Deleted text and inserted text.

"This is a blockquote for featuring notable content."

Someone famous
Text Colors

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-muted

Pricing Tables

Pricing plan cards

Basic
$9/mo
  • 5 Projects
  • 10GB Storage
  • Email Support
  • Priority Support
  • Custom Domain
Pro Popular
$29/mo
  • 25 Projects
  • 100GB Storage
  • Priority Support
  • Custom Domain
  • API Access
Enterprise
$99/mo
  • Unlimited Projects
  • 1TB Storage
  • 24/7 Support
  • Custom Domain
  • Full API Access

Testimonials

Customer testimonial cards

"Excellent product! The templates are well-designed and easy to customize. Saved us weeks of development time."

JD
John Doe
CEO, TechCorp

"The dark mode support is amazing. Our users love being able to switch between themes seamlessly."

JS
Jane Smith
Designer, Creative Agency

"Great documentation and support. The team was very helpful when we had questions about customization."

BW
Bob Wilson
Developer, StartupXYZ

Team Members

Team profile cards

Sarah Johnson

CEO & Founder

Leading the company vision with 15+ years of industry experience.

Mike Chen

CTO

Building scalable solutions with cutting-edge technology.

Emily Davis

Head of Design

Creating beautiful user experiences and design systems.

Alex Kim

Marketing Lead

Driving growth through data-driven marketing strategies.

Statistics

Stats and counter displays

Simple Stats
10K+
Happy Customers
500+
Projects Completed
99%
Satisfaction Rate
24/7
Support Available
Card Stats
Total Revenue

$54,230

12% from last month
New Users

1,234

8% from last week
Orders

567

3% from yesterday
Pending

23

Requires attention
Stats with Icons

45,678

Downloads

4.9/5

Average Rating

120+

Countries

Timeline

Timeline and history displays

Project Started
Jan 2024

Initial planning and requirements gathering phase completed.

Design Phase
Feb 2024

UI/UX design and prototyping completed successfully.

Development
Mar 2024

Core features development and testing in progress.

Beta Launch
Apr 2024

Beta version released to early adopters for feedback.

Official Launch
May 2024

Product officially launched to the public!

Feature Sections

Feature showcase layouts

Icon Features
Fast Performance

Optimized for speed and efficiency with minimal load times.

Secure

Enterprise-grade security to protect your data and users.

Customizable

Easily customize every aspect to match your brand.

Card Features
Cloud Storage

Store your files securely in the cloud with automatic backups.

Learn more
Real-time Sync

Keep your data synchronized across all devices in real-time.

Learn more

Call to Action

CTA section layouts

Simple CTA

Ready to get started?

Join thousands of satisfied customers using our platform.

Start Free Trial Contact Sales
Gradient CTA

Subscribe to our newsletter

Get the latest updates and exclusive offers directly in your inbox.

Card CTA

Need help choosing the right plan?

Our team is here to help you find the perfect solution for your needs.

FAQ

Frequently asked questions

Simply download the package, extract the files, and open the HTML file in your browser. You can then customize the templates using any code editor.

Yes! All templates come with a commercial license that allows you to use them in both personal and commercial projects.

Yes, we provide email support and regular updates to ensure compatibility with the latest Bootstrap versions and browsers.

Absolutely! All templates are built with Bootstrap 5.3 and are fully responsive, working perfectly on mobile, tablet, and desktop devices.

Animations

CSS animations and transitions

Fade Animations
.animate-fade-in
.animate-fade-in-up
.animate-fade-in-down
.animate-fade-in-left
Scale & Bounce
.animate-scale-in
.animate-bounce
.animate-pulse
Hover Effects
.hover-liftHover me!
.hover-shadowHover me!
.hover-scaleHover me!

Icons

Font Awesome icon examples

Solid Icons
fa-home
fa-user
fa-cog
fa-bell
fa-heart
fa-star
fa-search
fa-envelope
fa-check
fa-times
Brand Icons
fa-github
fa-twitter
fa-facebook
fa-instagram
fa-linkedin
fa-youtube
fa-slack
fa-discord
Icon Sizes
fa-xs
fa-sm
1x
fa-lg
fa-2x
fa-3x
fa-4x

Colors

Theme color palette

Theme Colors
Primary
#2563eb
Secondary
#6c757d
Success
#10b981
Danger
#ef4444
Warning
#f59e0b
Info
#06b6d4
Background Colors
.bg-light
.bg-dark
.bg-body-secondary
.bg-body-tertiary

Spacing

Margin and padding utilities

Padding Examples
p-1
p-2
p-3
p-4
p-5
Margin Examples
No margin
ms-3
ms-5
Gap Utilities (Flexbox)

gap-1:

Item
Item
Item

gap-3:

Item
Item
Item

gap-5:

Item
Item
Item