Beautiful Bootstrap Color System

A professional Bootstrap 5.3 design system demonstrating custom colors, backgrounds, typography, buttons, forms, tables, dashboard widgets, shadows and responsive components.

Explore Colors Components
BLUE
GREEN
PURPLE
ORANGE
Modern UI Components

23 custom colors, soft backgrounds, professional shadows, dark mode support, Bootstrap compatible utilities.

Color Palette

5+ 23 professionally selected utility colors

RED
Red Original
#ff0000
Green
Green Original
#00ff00
Blue
Blue Original
#0000ff
Black
Black Original
#000000
White
White Original
#ffffff
RED
Red
#ef4444
ORANGE
Orange
#f97316
AMBER
Amber
#f59e0b
YELLOW
Yellow
#eab308
LIME
Lime
#84cc16
GREEN
Green
#22c55e
EMERALD
Emerald
#10b981
TEAL
Teal
#14b8a6
CYAN
Cyan
#06b6d4
SKY
Sky
#0ea5e9
BLUE
Blue
#3b82f6
INDIGO
Indigo
#6366f1
VIOLET
Violet
#8b5cf6
PURPLE
Purple
#a855f7
FUCHSIA
Fuchsia
#d946ef
PINK
Pink
#ec4899
ROSE
Rose
#f43f5e
SLATE
Slate
#64748b
GRAY
Gray
#6b7280
ZINC
Zinc
#71717a
NEUTRAL
Neutral
#737373
STONE
Stone
#78716c
OLIVE
Olive
#6b705c

Text Utilities

Every custom text color

.text-red

.text-orange

.text-amber

.text-yellow

.text-lime

.text-green

.text-emerald

.text-teal

.text-cyan

.text-sky

.text-blue

.text-indigo

.text-violet

.text-purple

.text-fuchsia

.text-pink

.text-rose

.text-slate

.text-gray

.text-zinc

.text-neutral

.text-stone

.text-olive

Background Utilities

Background helper classes

bg-red
bg-blue
bg-green
bg-purple
bg-orange
bg-cyan
bg-pink
bg-rose

Soft Backgrounds

Red Soft
Green Soft
Blue Soft
Purple Soft
Orange Soft
Cyan Soft
Pink Soft
Rose Soft

Light Backgrounds

Red Light
orange Light
amber Light
yellow Light
lime Light
green Light
emerald Light
teal Light
cyan Light
sky Light
blue Light
indigo Light
violet Light
purple Light
fuchsia Light
pink Light
rose Light
slate Light
gray Light
zinc Light
neutral Light
stone Light
olive Light

Border Utilities

Border Red

Professional border utility example.

Border Green

Success style border.

Border Blue

Primary style border.

Border Purple

Creative style border.

Border Orange

Warning style border.

Border Cyan

Info style border.

Buttons

Solid, Outline & Custom Color Buttons

Solid Buttons
Bootstrap Buttons
Outline Buttons

Badges & Labels

Notification badges & custom labels

Custom Labels
New Success Primary Warning Premium Design API Disabled
Bootstrap Badges
12 Success Error Warning Info Admin

Alerts

Bootstrap notification examples

Welcome to the Bootstrap Design System.
Your profile has been updated successfully.
Storage is running low.
Something went wrong.
Custom Alert using your own utility classes.

Cards

Professional Bootstrap Card Collection

Creative Design

Build modern dashboards using reusable components.

Read More

Performance

Fast loading Bootstrap utilities and lightweight CSS.

Explore

Security

Designed for enterprise applications.

Details

Shadows & Hover Effects

Visual depth & interactive elevation

Default Shadow
Red Shadow
Green Shadow
Blue Shadow
Hover over me 🚀
Beautiful Elevation
Smooth Animation

Dashboard Widgets

Beautiful KPI cards for ERP & Admin Panels

Revenue

$245K

+18%
Orders

1,284

Today
Customers

12,650

Premium
Products

486

Inventory

Progress Bars

Bootstrap Progress Components

Storage Usage
75%
Project Completion
58%
Marketing
90%
Server Load
36%

Responsive Table

Bootstrap Data Table Example

# Customer Email Status Amount Action
1 Amit Patel amit@mail.com Active $850
2 John Smith john@mail.com Pending $210
3 Sophia sophia@mail.com Blocked $90

Forms

Modern Bootstrap Form Controls

Contact Form

Login

Navigation Components

Common Bootstrap Navigation UI

Dashboard Overview Content
Analytics Content
Settings Content

Accordion

Frequently Asked Questions

Yes. Every utility class extends Bootstrap instead of replacing it.

Yes. It uses Bootstrap's data-bs-theme attribute.

Perfect for ERP, CRM, SaaS, Inventory, Finance, HRMS and Admin Panels.

List Group

  • Dashboard 4
  • Orders
  • Customers
  • Reports
  • Settings

Project Timeline

Planning
Requirements gathering completed.
Development
Core modules completed.
Deployment
Production release pending.

Pricing

Modern Pricing Cards

Starter

$19

Single User

Email Support

Basic Dashboard

POPULAR

Professional

$49

Unlimited Users

Priority Support

Analytics

Reports

Enterprise

$99

Unlimited Everything

24x7 Support

Cloud Backup

Custom Modules

Ready to Build Amazing Interfaces?

Your Bootstrap 5.3 Custom Color System is now ready for production.

🎉 Project Complete You now have a complete Bootstrap 5.3 Design System Showcase featuring: ✅ Sticky Navigation ✅ Hero Banner ✅ Dark / Light Theme Toggle ✅ 23 Custom Color Palette ✅ Text Utilities ✅ Background Utilities ✅ Soft Background Utilities ✅ Border Utilities ✅ Buttons ✅ Badges & Labels ✅ Alerts ✅ Feature Cards ✅ Shadows & Hover Effects ✅ Dashboard KPI Widgets ✅ Progress Bars ✅ Responsive Tables ✅ Professional Forms ✅ Navigation Components (Tabs, Breadcrumbs, Pagination) ✅ Accordion (FAQ) ✅ List Groups ✅ Timeline ✅ Pricing Cards ✅ Call-to-Action Banner ✅ Professional Footer ✅ Theme Persistence with localStorage Suggested improvements If this will become the official design system for your ERP, I'd next refine it by: Replacing repeated color blocks with data-driven generation (or reusable components if moving to React). Adding a style guide section showing typography, spacing, border radius, shadows, and icon usage. Including additional enterprise components such as modals, offcanvas panels, dropdowns, toasts, steppers, empty states, loading skeletons, charts placeholders, and data table variants. Improving accessibility with visible focus states, higher-contrast combinations, ARIA attributes, and keyboard navigation examples. Organizing the page into a left-side navigation with scrollspy so it behaves like professional documentation (similar to Bootstrap or Material UI docs). Those changes would make it feel like a polished UI kit rather than just a component showcase.