Bootstrap Master Guide - Complete Web Development Framework
Complete Bootstrap Guide
The world's most popular front-end framework for building responsive, mobile-first websites. Learn everything from basics to advanced concepts.
🚀 Getting Started
Installation Methods
Choose from multiple installation options:
- CDN: Quickest way to get started
- NPM: For build tools and bundlers
- Download: Local installation
Basic Template
Start with this basic HTML5 template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Template</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, Bootstrap!</h1>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Try Bootstrap Online:
📐 Grid System & Layout
12-Column Grid
1
2
3
4
5
6
7
8
9
10
11
12
Responsive Breakpoints
-
.col-*- Extra small (<576px) -
.col-sm-*- Small (≥576px) -
.col-md-*- Medium (≥768px) -
.col-lg-*- Large (≥992px) -
.col-xl-*- Extra large (≥1200px) -
.col-xxl-*- Extra extra large (≥1400px)
Container Types
.container-sm - Responsive fixed width
.container-md - Medium breakpoint
.container-lg - Large breakpoint
.container-fluid - Full width
Grid System Example:
.col-md-4
.col-md-4
.col-md-4
.col-md-8
.col-md-4
// Responsive Grid Example
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
<div class="row">
<div class="col-md-8">Main Content</div>
<div class="col-md-4">Sidebar</div>
</div>
</div>
🧩 Components Gallery
Buttons
Cards
Featured
Dark Card
This is a dark card with white text.
Forms
Alerts
A simple primary alert—check it out!
Success! You can dismiss this alert.
Modal
Navs & Tabs
This is some placeholder content for the Home tab.
This is some placeholder content for the Profile tab.
This is some placeholder content for the Contact tab.
Tooltips & Popovers
Carousel
Accordion
Content for the first accordion item.
Content for the second accordion item.
Progress Bars
Badges
Example heading New
Example heading New
Success Warning Danger🔧 Utility Classes
Spacing Utilities
Margin:
m-1
m-2
m-3
m-4
m-5
Padding:
p-1
p-2
p-3
p-4
p-5
Display Utilities
d-inline
d-inline
d-block
d-block
Flex item
Flex item
Text & Background Utilities
.text-primary
.text-success
.text-danger
.text-center
.text-end
.bg-primary
.bg-success
.bg-gradient
Border Utilities
.border
.border-top
.border-end
.border-primary
.border-3
.rounded
.rounded-circle
Shadow Utilities
.shadow-none
.shadow-sm
.shadow
.shadow-lg
🎨 Customization & Theming
CSS Variables
Customize Bootstrap using CSS custom properties:
:root {
--bs-primary: #6f42c1;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-border-radius: 0.5rem;
--bs-font-sans-serif: 'Segoe UI', system-ui;
}
SASS Customization
Customize with SASS variables:
// Customize Bootstrap with SASS
$primary: #6f42c1;
$border-radius: 1rem;
$enable-gradients: true;
@import "bootstrap";
Theme Color Changer
Click a color to change the theme:
Dark Mode
Custom Components Example
Basic
$0/month
- 10 users included
- 2 GB of storage
- Email support
Popular
Pro
$15/month
- 20 users included
- 10 GB of storage
- Priority support
🚀 Advanced Topics
JavaScript Components
Bootstrap's JavaScript adds interactivity to components:
- Modal dialogs
- Dropdown menus
- Carousels
- Tooltips & Popovers
- Collapse/Accordion
Bootstrap Icons
Official icon library with 1,800+ icons:
<i class="bi bi-heart"></i>
Build Tools
Integrate Bootstrap with modern build tools:
- Webpack
- Parcel
- Vite
- Create React App
- Next.js