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.
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
- Browse components by category below
- Click on any component to see all variations
- Click the "Copy" button on any code example
- 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>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/core2. 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
npm install -D sass
// Then import in main.js
import './styles/custom.scss'npm install -D sass-loader sass
// Add to webpack.config.js
module: {
rules: [{
test: /\.scss$/,
use: ['style-loader',
'css-loader',
'sass-loader']
}]
}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
#0d6efd
#6c757d
#198754
#dc3545
Foundations
Essential building blocks for your design system
Colors
All Bootstrap theme colors, background variants, and text colors with usage examples.
View ColorsTypography
Headings, display text, body styles, lists, blockquotes, and all text utilities.
View TypographyFont Awesome Pro Icons
26,000+ Font Awesome 6 Pro icons with duotone, sharp variants, animations, and 7 style families.
View IconsComponents
Complete library of UI components with all variations
Layout
Grid systems and utility classes for responsive layouts
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 TemplateForm Page
Comprehensive form page with validation, multi-step wizard, and all input types.
Open TemplateLanding (SaaS)
Modern SaaS landing page with animated hero, features, pricing, testimonials, and FAQ.
Open TemplatePortfolio
Portfolio showcase template with filterable projects, skills, about section, and contact form.
Open TemplateBlog / Article
Article layout with sticky table of contents, code blocks, author bio, and comments section.
Open TemplateProduct Page
E-commerce product page with image gallery, variants, reviews, and related products.
Open TemplateStartup Landing
Modern startup landing with gradient hero, stats, features, pricing, and testimonials.
Open TemplateAgency Landing
Creative agency landing with bold design, portfolio showcase, process, and team section.
Open TemplateMobile App Landing
App showcase landing with screenshots, features, reviews, and app store badges.
Open TemplateCourse Landing
Online course landing with curriculum, instructor profile, reviews, and enrollment.
Open TemplateEvent Landing
Conference event landing with countdown timer, speakers, schedule, and ticket sales.
Open TemplateRestaurant Landing
Fine dining restaurant landing with menu, chef profile, gallery, and reservation form.
Open TemplateFitness Landing
Gym and fitness center landing with classes, trainers, membership pricing, and schedules.
Open TemplateCrypto Exchange Landing
Cryptocurrency exchange with trading pairs, tokenomics, roadmap, wallet integration, and security features.
Open TemplateReal Estate Landing
Property listing landing with search widget, featured properties, mortgage calculator, and agent profiles.
Open TemplateTravel Agency Landing
Travel and tourism landing with destinations, packages, experiences, testimonials, and booking system.
Open TemplateZPL Suite Landing
Software product landing featuring ZPL Designer, Renderer, and Printer Server with features, API docs, and pricing.
Open TemplateDigital Menu QR Code
Restaurant QR menu service with menu management, QR code generation, multi-language support, and analytics.
Open TemplateRip Current Monitor
Real-time beach safety and rip current information with API access, alerts, and 1,500+ monitored beaches.
Open TemplateLocal Marketplace
Contact-seller marketplace for local buying and selling with verified profiles, messaging, and location-based search.
Open TemplateSSO Authentication
Single Sign-On platform with multi-factor authentication, universal directory, and 5,000+ app integrations.
Open TemplateEvent Management
Complete event platform with ticketing, QR check-in, email marketing, and attendee management for all event types.
Open TemplateComedy Shows Platform
Comedy events platform with venue finder, ticketing, marketing tools, and analytics for comedians and organizers.
Open TemplateTicketing Platform
White-label ticketing software for event organizers with QR codes, analytics, and payment integrations.
Open TemplateElderly Home Care
Senior care services with personal care, medication management, companionship, and 24/7 live-in care options.
Open TemplatePodcast Hosting
Podcast hosting platform with unlimited storage, distribution to all platforms, analytics, and monetization tools.
Open TemplatePDF E-Signature
Electronic signature service with drag & drop signing, templates, mobile support, and audit trail compliance.
Open TemplatePromo Deals Platform
Promotional deals marketplace connecting merchants with customers. Free for users, merchant pricing with commissions.
Open TemplatePoint of Sale System
Complete POS system with payment processing, inventory management, employee tracking, and multi-location support.
Open TemplateGovernment Announcements
Official government announcements portal with real-time alerts, multilingual support, and emergency notification system.
Open TemplateVoter Registration
Voter registration platform with status checker, polling place finder, registration requirements, and multilingual support.
Open TemplateUnderstanding Government
Civic education portal with interactive lessons, quizzes, videos about government branches, Constitution, and elections.
Open Template