Bootstrap 5.3.3
Design System

The most comprehensive Bootstrap Design System with 150+ components, every variation documented, and copy-paste ready code. Your complete reference for building modern web applications.

150+ Components 100% Copy Buttons Light/Dark Mode Production Ready

Quick Start

Include Bootstrap CDN
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
How to Use This System
  1. Browse components by category below
  2. Click on any component to see all variations
  3. Click the "Copy" button on any code example
  4. Paste directly into your project

Customization

Choose your preferred setup method and learn how to customize Bootstrap

Quick Start with CDN

The fastest way to get started - no build tools required!

<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Bootstrap Site</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
    <!-- Your content here -->

    <!-- Bootstrap JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Dark Mode Support: Add data-bs-theme="dark" to the <html> tag to enable dark mode.
Install via NPM

For more control and the ability to customize with SCSS

1. Install Bootstrap
npm install bootstrap @popperjs/core
2. Import Bootstrap CSS

In your main JavaScript/TypeScript file:

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Import Bootstrap JavaScript (optional)
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
3. Or Import Bootstrap SCSS

For full customization capabilities:

// Create a custom.scss file
@import "bootstrap/scss/bootstrap";
4. Using with Build Tools
Vite 
npm install -D sass
// Then import in main.js
import './styles/custom.scss'
Webpack 
npm install -D sass-loader sass
// Add to webpack.config.js
module: {
  rules: [{
    test: /\.scss$/,
    use: ['style-loader',
          'css-loader',
          'sass-loader']
  }]
}
Want to learn more? Check out our comprehensive SCSS Customization Guide for advanced customization techniques.
Customize Theme Colors

Override Bootstrap's default colors with your brand colors

Method 1: CSS Custom Properties (CDN)

Add this to your custom CSS file:

:root {
  --bs-primary: #6f42c1;
  --bs-primary-rgb: 111, 66, 193;
  --bs-secondary: #fd7e14;
  --bs-secondary-rgb: 253, 126, 20;
  --bs-success: #28a745;
  --bs-info: #17a2b8;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;

  /* Dark mode colors */
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
}

[data-bs-theme="dark"] {
  --bs-body-bg: #212529;
  --bs-body-color: #dee2e6;
}
Method 2: SCSS Variables (NPM)

Create a custom.scss file:

// custom.scss

// 1. Override default variables
$primary: #6f42c1;
$secondary: #fd7e14;
$success: #28a745;
$info: #17a2b8;
$warning: #ffc107;
$danger: #dc3545;

// Typography
$font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 1rem;
$line-height-base: 1.6;

// Spacing
$spacer: 1rem;

// Border radius
$border-radius: 0.5rem;
$border-radius-sm: 0.25rem;
$border-radius-lg: 0.75rem;

// Shadows
$box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
$box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
$box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

// 2. Import Bootstrap
@import "bootstrap/scss/bootstrap";
Color Palette Example
Primary
#0d6efd
Secondary
#6c757d
Success
#198754
Danger
#dc3545
Learn More: Visit our Complete SCSS Customization Guide for advanced theming, creating custom components, and build configurations.

Foundations

Essential building blocks for your design system

Colors

All Bootstrap theme colors, background variants, and text colors with usage examples.

View Colors
Typography

Headings, display text, body styles, lists, blockquotes, and all text utilities.

View Typography
Icons

1,800+ Bootstrap Icons with examples, sizes, and integration patterns.

View Icons
Font Awesome Pro Icons

26,000+ Font Awesome 6 Pro icons with duotone, sharp variants, animations, and 7 style families.

View Icons

Components

Complete library of UI components with all variations

20+ Examples
Buttons

All button styles, sizes, states, and groups

View →
30+ Examples
Forms

Inputs, selects, checkboxes, validation, and layouts

View →
NEW
Wizards

Multi-step forms, progress indicators, and step navigation

View →
15+ Examples
Cards

Card variations, images, borders, and layouts

View →
8+ Examples
Modals

Dialog boxes in all sizes and configurations

View →
10+ Examples
Navigation

Navbars, tabs, pills, and breadcrumbs

View →
10+ Examples
Alerts & Toasts

Notification messages and toast alerts

View →
10+ Examples
Tables

Data tables with all styling options

View →
6+ Examples
Pagination

Page navigation components

View →
12+ Examples
List Groups

Flexible list components with badges

View →
8+ Examples
Badges

Labels and count indicators

View →
10+ Examples
Spinners & Progress

Loading indicators and progress bars

View →
8+ Examples
Tooltips & Popovers

Contextual overlays and hints

View →
5+ Examples
Accordions

Collapsible content panels

View →
5+ Examples
Collapse

Show/hide content toggle

View →
10+ Examples
Dropdowns

Contextual menus and options

View →
6+ Examples
Offcanvas

Hidden sidebars and drawers

View →

Layout

Grid systems and utility classes for responsive layouts

Grid System

12-column responsive grid with examples for all breakpoints and layouts.

View Grid
Utilities

Spacing, display, flexbox, borders, shadows, and more utility classes.

View Utilities
Footers

Multiple footer layouts with columns, social links, and newsletter forms.

View Footers

Page Templates

Production-ready, standalone page templates you can use immediately

Landing Page

Complete landing page with hero, features, pricing, testimonials, and CTA sections.

Open Template
Dashboard

Full-featured dashboard with sidebar, stats cards, charts, and data tables.

Open Template
Form Page

Comprehensive form page with validation, multi-step wizard, and all input types.

Open Template
Landing (SaaS)

Modern SaaS landing page with animated hero, features, pricing, testimonials, and FAQ.

Open Template
Portfolio

Portfolio showcase template with filterable projects, skills, about section, and contact form.

Open Template
Blog / Article

Article layout with sticky table of contents, code blocks, author bio, and comments section.

Open Template
Product Page

E-commerce product page with image gallery, variants, reviews, and related products.

Open Template
Startup Landing

Modern startup landing with gradient hero, stats, features, pricing, and testimonials.

Open Template
Agency Landing

Creative agency landing with bold design, portfolio showcase, process, and team section.

Open Template
Mobile App Landing

App showcase landing with screenshots, features, reviews, and app store badges.

Open Template
Course Landing

Online course landing with curriculum, instructor profile, reviews, and enrollment.

Open Template
Event Landing

Conference event landing with countdown timer, speakers, schedule, and ticket sales.

Open Template
Restaurant Landing

Fine dining restaurant landing with menu, chef profile, gallery, and reservation form.

Open Template
Fitness Landing

Gym and fitness center landing with classes, trainers, membership pricing, and schedules.

Open Template
Crypto Exchange Landing

Cryptocurrency exchange with trading pairs, tokenomics, roadmap, wallet integration, and security features.

Open Template
Real Estate Landing

Property listing landing with search widget, featured properties, mortgage calculator, and agent profiles.

Open Template
Travel Agency Landing

Travel and tourism landing with destinations, packages, experiences, testimonials, and booking system.

Open Template
ZPL Suite Landing

Software product landing featuring ZPL Designer, Renderer, and Printer Server with features, API docs, and pricing.

Open Template
Digital Menu QR Code

Restaurant QR menu service with menu management, QR code generation, multi-language support, and analytics.

Open Template
Rip Current Monitor

Real-time beach safety and rip current information with API access, alerts, and 1,500+ monitored beaches.

Open Template
Local Marketplace

Contact-seller marketplace for local buying and selling with verified profiles, messaging, and location-based search.

Open Template
SSO Authentication

Single Sign-On platform with multi-factor authentication, universal directory, and 5,000+ app integrations.

Open Template
Event Management

Complete event platform with ticketing, QR check-in, email marketing, and attendee management for all event types.

Open Template
Comedy Shows Platform

Comedy events platform with venue finder, ticketing, marketing tools, and analytics for comedians and organizers.

Open Template
Ticketing Platform

White-label ticketing software for event organizers with QR codes, analytics, and payment integrations.

Open Template
Elderly Home Care

Senior care services with personal care, medication management, companionship, and 24/7 live-in care options.

Open Template
Podcast Hosting

Podcast hosting platform with unlimited storage, distribution to all platforms, analytics, and monetization tools.

Open Template
PDF E-Signature

Electronic signature service with drag & drop signing, templates, mobile support, and audit trail compliance.

Open Template
Promo Deals Platform

Promotional deals marketplace connecting merchants with customers. Free for users, merchant pricing with commissions.

Open Template
Point of Sale System

Complete POS system with payment processing, inventory management, employee tracking, and multi-location support.

Open Template
Government Announcements

Official government announcements portal with real-time alerts, multilingual support, and emergency notification system.

Open Template
Voter Registration

Voter registration platform with status checker, polling place finder, registration requirements, and multilingual support.

Open Template
Understanding Government

Civic education portal with interactive lessons, quizzes, videos about government branches, Constitution, and elections.

Open Template