Complete Bootstrap Guide - Basic To Advanced
Uploaded by
nandithap.24cseComplete Bootstrap Guide - Basic To Advanced
Uploaded by
nandithap.24cseComplete Bootstrap Guide - Basic to Advanced
Table of Contents
1. Introduction
2. Installation & Setup
3. Grid System
4. Typography
5. Colors
6. Spacing
7. Buttons
8. Forms
9. Components
10. Navigation
11. Cards
12. Modals
13. Alerts & Badges
14. Tables
15. Images
16. Utilities
17. Flexbox
18. Positioning
19. JavaScript Components
20. Customization
21. Best Practices
22. Complete Examples
Introduction
What is Bootstrap?
Bootstrap is the world's most popular front-end open-source CSS framework for developing responsive, mobile-first
websites. Created by Twitter developers Mark Otto and Jacob Thornton, it provides pre-built components, a grid system,
and JavaScript plugins.
Why Bootstrap?
Advantages:
Rapid Development: Pre-built components save time
Responsive Design: Mobile-first approach built-in
Consistency: Uniform design across browsers
Customizable: Extensive customization options
Community: Large community and extensive documentation
Browser Support: Works on all modern browsers
Key Features:
12-column responsive grid system
Extensive pre-designed components
JavaScript plugins (modals, carousels, tooltips)
Utility classes for quick styling
Sass variables and mixins for customization
Bootstrap Versions
Bootstrap 3: Legacy (supports older browsers)
Bootstrap 4: Major rewrite (Flexbox-based)
Bootstrap 5: Latest (no jQuery dependency)
Installation & Setup
1. CDN (Quickest Method)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Page</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-center text-primary">Hello Bootstrap!</h1>
<!-- Bootstrap Bundle JS (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2. Download Files
html
<!-- Download from getbootstrap.com and include locally -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
3. Package Manager
bash
# npm
npm install bootstrap
# yarn
yarn add bootstrap
# pnpm
pnpm add bootstrap
Import in your project:
javascript
// JavaScript
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
// Or in CSS/SCSS
@import "~bootstrap/scss/bootstrap";
4. Starter Template
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Grid System
Container
html
<!-- Fixed-width container (responsive breakpoints) -->
<div class="container">
Content
</div>
<!-- Fluid container (100% width) -->
<div class="container-fluid">
Full-width content
</div>
<!-- Responsive containers -->
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Breakpoints
xs: <576px (Extra small - phones)
sm: ≥576px (Small - landscape phones)
md: ≥768px (Medium - tablets)
lg: ≥992px (Large - desktops)
xl: ≥1200px (Extra large - large desktops)
xxl: ≥1400px (Extra extra large - larger desktops)
Basic Grid
html
<div class="container">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
</div>
Specified Column Widths
html
<!-- 12-column grid system -->
<div class="container">
<div class="row">
<div class="col-4">4 columns wide</div>
<div class="col-8">8 columns wide</div>
</div>
<div class="row">
<div class="col-3">3 columns</div>
<div class="col-6">6 columns</div>
<div class="col-3">3 columns</div>
</div>
<div class="row">
<div class="col-12">Full width (12 columns)</div>
</div>
</div>
Responsive Grid
html
<div class="container">
<div class="row">
<!-- Stack on mobile, 2 columns on tablet, 3 columns on desktop -->
<div class="col-12 col-md-6 col-lg-4">Column 1</div>
<div class="col-12 col-md-6 col-lg-4">Column 2</div>
<div class="col-12 col-md-6 col-lg-4">Column 3</div>
</div>
</div>
Auto-Layout Columns
html
<!-- Equal width columns -->
<div class="row">
<div class="col">Auto</div>
<div class="col">Auto</div>
<div class="col">Auto</div>
</div>
<!-- Mixed: specified and auto width -->
<div class="row">
<div class="col">Auto</div>
<div class="col-6">6 columns</div>
<div class="col">Auto</div>
</div>
Vertical Alignment
html
<!-- Align items in row -->
<div class="row align-items-start">Top aligned</div>
<div class="row align-items-center">Center aligned</div>
<div class="row align-items-end">Bottom aligned</div>
<!-- Align individual columns -->
<div class="row">
<div class="col align-self-start">Top</div>
<div class="col align-self-center">Middle</div>
<div class="col align-self-end">Bottom</div>
</div>
Horizontal Alignment
html
<div class="row justify-content-start">Left aligned</div>
<div class="row justify-content-center">Center aligned</div>
<div class="row justify-content-end">Right aligned</div>
<div class="row justify-content-between">Space between</div>
<div class="row justify-content-around">Space around</div>
<div class="row justify-content-evenly">Space evenly</div>
Column Wrapping
html
<div class="row">
<div class="col-9">9 columns</div>
<div class="col-4">4 columns (wraps to next line)</div>
<div class="col-6">6 columns</div>
</div>
Gutters (Spacing)
html
<!-- Horizontal gutters -->
<div class="row gx-5">
<div class="col">Column</div>
<div class="col">Column</div>
</div>
<!-- Vertical gutters -->
<div class="row gy-5">
<div class="col-12">Column</div>
<div class="col-12">Column</div>
</div>
<!-- Both horizontal and vertical gutters -->
<div class="row g-3">
<div class="col-6">Column</div>
<div class="col-6">Column</div>
</div>
<!-- No gutters -->
<div class="row g-0">
<div class="col">No gutter</div>
<div class="col">No gutter</div>
</div>
Offsetting Columns
html
<div class="row">
<div class="col-md-4">Column</div>
<div class="col-md-4 offset-md-4">Offset by 4 columns</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">Offset</div>
<div class="col-md-3 offset-md-3">Offset</div>
</div>
Nesting
html
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: Column
<div class="row">
<div class="col-8 col-sm-6">
Level 2: Nested column
</div>
<div class="col-4 col-sm-6">
Level 2: Nested column
</div>
</div>
</div>
</div>
</div>
Typography
Headings
html
<!-- Standard headings -->
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<!-- Heading classes (when you need heading style on different element) -->
<p class="h1">h1 style</p>
<p class="h2">h2 style</p>
<!-- Display headings (larger, more impactful) -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
Lead Paragraph
html
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Text Alignment
html
<p class="text-start">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">Right aligned text</p>
<!-- Responsive alignment -->
<p class="text-sm-start">Left aligned on small and up</p>
<p class="text-md-center">Center aligned on medium and up</p>
<p class="text-lg-end">Right aligned on large and up</p>
Text Transformation
html
<p class="text-lowercase">LOWERCASED TEXT</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>
Font Weight and Italics
html
<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder weight text</p>
<p class="fw-semibold">Semibold weight text</p>
<p class="fw-medium">Medium weight text</p>
<p class="fw-normal">Normal weight text</p>
<p class="fw-light">Light weight text</p>
<p class="fw-lighter">Lighter weight text</p>
<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal text (not italic)</p>
Font Size
html
<p class="fs-1">Font size 1 (largest)</p>
<p class="fs-2">Font size 2</p>
<p class="fs-3">Font size 3</p>
<p class="fs-4">Font size 4</p>
<p class="fs-5">Font size 5</p>
<p class="fs-6">Font size 6 (smallest)</p>
Line Height
html
<p class="lh-1">Line height 1</p>
<p class="lh-sm">Line height small</p>
<p class="lh-base">Line height base</p>
<p class="lh-lg">Line height large</p>
Text Decoration
html
<p class="text-decoration-underline">Underlined text</p>
<p class="text-decoration-line-through">Line through text</p>
<p class="text-decoration-none">Remove decoration</p>
Lists
html
<!-- Unstyled list -->
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Inline list -->
<ul class="list-inline">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
<li class="list-inline-item">Item 3</li>
</ul>
Colors
Text Colors
html
<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
<p class="text-info">Info text</p>
<p class="text-light bg-dark">Light text</p>
<p class="text-dark">Dark text</p>
<p class="text-muted">Muted text</p>
<p class="text-white bg-dark">White text</p>
<p class="text-black-50">Black with 50% opacity</p>
<p class="text-white-50 bg-dark">White with 50% opacity</p>
Background Colors
html
<div class="bg-primary text-white">Primary background</div>
<div class="bg-secondary text-white">Secondary background</div>
<div class="bg-success text-white">Success background</div>
<div class="bg-danger text-white">Danger background</div>
<div class="bg-warning">Warning background</div>
<div class="bg-info text-white">Info background</div>
<div class="bg-light">Light background</div>
<div class="bg-dark text-white">Dark background</div>
<div class="bg-white">White background</div>
<div class="bg-transparent">Transparent background</div>
Background Opacity
html
<div class="bg-primary bg-opacity-75">75% opacity</div>
<div class="bg-primary bg-opacity-50">50% opacity</div>
<div class="bg-primary bg-opacity-25">25% opacity</div>
<div class="bg-primary bg-opacity-10">10% opacity</div>
Gradient
html
<div class="bg-primary bg-gradient">Primary gradient</div>
<div class="bg-success bg-gradient">Success gradient</div>
Spacing
Margin
html
<!-- Margin on all sides -->
<div class="m-0">Margin 0</div>
<div class="m-1">Margin 0.25rem</div>
<div class="m-2">Margin 0.5rem</div>
<div class="m-3">Margin 1rem</div>
<div class="m-4">Margin 1.5rem</div>
<div class="m-5">Margin 3rem</div>
<!-- Margin on specific sides -->
<div class="mt-3">Margin top</div>
<div class="mb-3">Margin bottom</div>
<div class="ms-3">Margin start (left in LTR)</div>
<div class="me-3">Margin end (right in LTR)</div>
<!-- Horizontal margin -->
<div class="mx-3">Margin left and right</div>
<!-- Vertical margin -->
<div class="my-3">Margin top and bottom</div>
<!-- Auto margin (centering) -->
<div class="mx-auto" style="width: 200px;">Centered</div>
<!-- Negative margin -->
<div class="mt-n3">Negative margin top</div>
Padding
html
<!-- Padding on all sides -->
<div class="p-0">Padding 0</div>
<div class="p-1">Padding 0.25rem</div>
<div class="p-2">Padding 0.5rem</div>
<div class="p-3">Padding 1rem</div>
<div class="p-4">Padding 1.5rem</div>
<div class="p-5">Padding 3rem</div>
<!-- Padding on specific sides -->
<div class="pt-3">Padding top</div>
<div class="pb-3">Padding bottom</div>
<div class="ps-3">Padding start</div>
<div class="pe-3">Padding end</div>
<!-- Horizontal padding -->
<div class="px-3">Padding left and right</div>
<!-- Vertical padding -->
<div class="py-3">Padding top and bottom</div>
Responsive Spacing
html
<!-- Different spacing at different breakpoints -->
<div class="mt-3 mt-md-5">
Margin top 1rem on small, 3rem on medium and up
</div>
<div class="p-2 p-sm-3 p-md-4 p-lg-5">
Responsive padding
</div>
Buttons
Button Styles
html
<!-- Standard buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Outline Buttons
html
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Button Sizes
html
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
Block Buttons
html
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Block button</button>
<button class="btn btn-secondary" type="button">Block button</button>
</div>
<!-- Responsive block button -->
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Button States
html
<!-- Active state -->
<button type="button" class="btn btn-primary active">Active</button>
<!-- Disabled state -->
<button type="button" class="btn btn-primary" disabled>Disabled</button>
<!-- Loading state -->
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
Button Groups
html
<!-- Basic button group -->
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<!-- Button toolbar -->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group me-2" role="group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
</div>
<div class="btn-group me-2" role="group">
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
</div>
<!-- Vertical button group -->
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
</div>
Forms
Basic Form
html
<form>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password">
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Form Sizing
html
<input class="form-control form-control-lg" type="text" placeholder="Large input">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder="Small input">
Form Controls
html
<!-- Text input -->
<input type="text" class="form-control" placeholder="Text input">
<!-- Email input -->
<input type="email" class="form-control" placeholder="Email">
<!-- Password -->
<input type="password" class="form-control" placeholder="Password">
<!-- Number -->
<input type="number" class="form-control" placeholder="Number">
<!-- Textarea -->
<textarea class="form-control" rows="3"></textarea>
<!-- Select -->
<select class="form-select">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<!-- Multiple select -->
<select class="form-select" multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<!-- File input -->
<input class="form-control" type="file">
<!-- Color picker -->
<input type="color" class="form-control form-control-color" value="#563d7c">
<!-- Date -->
<input type="date" class="form-control">
<!-- Readonly -->
<input class="form-control" type="text" value="Readonly input" readonly>
<!-- Disabled -->
<input class="form-control" type="text" placeholder="Disabled input" disabled>
Checkboxes and Radios
html
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="check1">
<label class="form-check-label" for="check1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="check2" checked>
<label class="form-check-label" for="check2">
Checked checkbox
</label>
</div>
<!-- Radios -->
<div class="form-check">
<input class="form-check-input" type="radio" name="radio" id="radio1" checked>
<label class="form-check-label" for="radio1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio" id="radio2">
<label class="form-check-label" for="radio2">
Second radio
</label>
</div>
<!-- Inline checkboxes -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inline1" value="option1">
<label class="form-check-label" for="inline1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inline2" value="option2">
<label class="form-check-label" for="inline2">2</label>
</div>
<!-- Switches -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="switch1">
<label class="form-check-label" for="switch1">Switch</label>
</div>
Input Groups
html
<!-- Prepend text -->
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<!-- Append text -->
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username">
<span class="input-group-text">@example.com</span>
</div>
<!-- Both prepend and append -->
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control">
<span class="input-group-text">.00</span>
</div>
<!-- With button -->
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
<!-- With dropdown -->
<div class="input-group mb-3">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
<input type="text" class="form-control">
</div>
Floating Labels
html
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
Validation
html
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Please provide a valid name.
</div>
</div>
<div class="mb-3">
<label for="validationCustom02" class="form-label">Email</label>
<input type="email" class="form-control" id="validationCustom02" required>
<div class="invalid-feedback">
Please provide a valid email.
</div>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Form validation
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>
Form Layout
html
<!-- Horizontal form -->
<form>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<!-- Inline form -->
<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Components
Accordion
html
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
This is the first item's accordion body.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
This is the second item's accordion body.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThre
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
This is the third item's accordion body.
</div>
</div>
</div>
</div>
Breadcrumb
html
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<!-- With different divider -->
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
Pagination
html
<!-- Basic pagination -->
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<!-- With icons -->
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<!-- Sizing -->
<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>
<!-- Alignment -->
<nav aria-label="...">
<ul class="pagination justify-content-center">...</ul>
</nav>
<nav aria-label="...">
<ul class="pagination justify-content-end">...</ul>
</nav>
Progress Bars
html
<!-- Basic progress bar -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%">25%</div>
</div>
<!-- Without label -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%"></div>
</div>
<!-- Heights -->
<div class="progress" style="height: 1px;">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" style="width: 50%"></div>
</div>
<!-- Colors -->
<div class="progress">
<div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width: 100%"></div>
</div>
<!-- Striped -->
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 50%"></div>
</div>
<!-- Animated -->
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>
<!-- Multiple bars -->
<div class="progress">
<div class="progress-bar" style="width: 15%"></div>
<div class="progress-bar bg-success" style="width: 30%"></div>
<div class="progress-bar bg-info" style="width: 20%"></div>
</div>
Spinners
html
<!-- Border spinner -->
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<!-- Colors -->
<div class="spinner-border text-primary" role="status"></div>
<div class="spinner-border text-secondary" role="status"></div>
<div class="spinner-border text-success" role="status"></div>
<div class="spinner-border text-danger" role="status"></div>
<div class="spinner-border text-warning" role="status"></div>
<div class="spinner-border text-info" role="status"></div>
<!-- Growing spinner -->
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<!-- Sizes -->
<div class="spinner-border spinner-border-sm" role="status"></div>
<div class="spinner-grow spinner-grow-sm" role="status"></div>
<!-- In buttons -->
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status"></span>
Loading...
</button>
Tooltips
html
<!-- Tooltips require JavaScript initialization -->
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on to
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip o
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on le
Tooltip on left
</button>
<script>
// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
Popovers
html
<!-- Popovers require JavaScript initialization -->
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="A
Click to toggle popover
</button>
<!-- Four directions -->
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placeme
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placeme
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placeme
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placeme
Popover on left
</button>
<script>
// Initialize popovers
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
Navigation
Navbar
html
<!-- Basic navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Dark navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDark">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarDark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- With search form -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSearch">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Fixed navbar -->
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
</nav>
Nav and Tabs
html
<!-- Base nav -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<!-- Horizontal alignment -->
<ul class="nav justify-content-center">...</ul>
<ul class="nav justify-content-end">...</ul>
<!-- Vertical -->
<ul class="nav flex-column">...</ul>
<!-- Tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<!-- Pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<!-- Fill and justify -->
<ul class="nav nav-pills nav-fill">...</ul>
<ul class="nav nav-pills nav-justified">...</ul>
Dropdowns
html
<!-- Basic dropdown -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<!-- Split button dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Dropdown directions -->
<!-- Dropup -->
<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropup
</button>
<ul class="dropdown-menu">...</ul>
</div>
<!-- Dropend -->
<div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropend
</button>
<ul class="dropdown-menu">...</ul>
</div>
<!-- Dropstart -->
<div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropstart
</button>
<ul class="dropdown-menu">...</ul>
</div>
<!-- Dropdown with headers -->
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">Another header</h6></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
<!-- Active and disabled items -->
<ul class="dropdown-menu">
<li><a class="dropdown-item active" href="#">Active item</a></li>
<li><a class="dropdown-item" href="#">Regular item</a></li>
<li><a class="dropdown-item disabled" href="#">Disabled item</a></li>
</ul>
Cards
Basic Card
html
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Card Content Types
html
<!-- Card with list -->
<div class="card" style="width: 18rem;">
<div class="card-header">Featured</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
<!-- Card with header and footer -->
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
<!-- Card with navigation -->
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Card Sizing
html
<!-- Using grid -->
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<!-- Using utilities -->
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">75% width card.</p>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">50% width card.</p>
</div>
</div>
Card Styles
html
<!-- Text alignment -->
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Centered card</h5>
<p class="card-text">Center aligned text.</p>
</div>
</div>
<div class="card text-end">
<div class="card-body">
<h5 class="card-title">Right aligned</h5>
<p class="card-text">Right aligned text.</p>
</div>
</div>
<!-- Colored cards -->
<div class="card text-white bg-primary mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
<div class="card text-white bg-success mb-3">
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3">
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
<!-- Border cards -->
<div class="card border-primary mb-3">
<div class="card-body text-primary">
<h5 class="card-title">Primary border</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
Card Groups
html
<!-- Card group -->
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card.</p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text.</p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card.</p>
</div>
</div>
</div>
Card Grid
html
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card.</p>
</div>
</div>
</div>
</div>
Modals
Basic Modal
html
<!-- Button trigger -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
Modal body text goes here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Modal Sizes
html
<!-- Small modal -->
<div class="modal-dialog modal-sm">...</div>
<!-- Default modal -->
<div class="modal-dialog">...</div>
<!-- Large modal -->
<div class="modal-dialog modal-lg">...</div>
<!-- Extra large modal -->
<div class="modal-dialog modal-xl">...</div>
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen">...</div>
<!-- Responsive fullscreen -->
<div class="modal-dialog modal-fullscreen-sm-down">...</div>
<div class="modal-dialog modal-fullscreen-md-down">...</div>
<div class="modal-dialog modal-fullscreen-lg-down">...</div>
Modal Variations
html
<!-- Vertically centered -->
<div class="modal-dialog modal-dialog-centered">...</div>
<!-- Scrollable -->
<div class="modal-dialog modal-dialog-scrollable">...</div>
<!-- Static backdrop (doesn't close on click outside) -->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false">...</div>
JavaScript Control
javascript
// Show modal
var myModal = new bootstrap.Modal(document.getElementById('myModal'))
myModal.show()
// Hide modal
myModal.hide()
// Toggle modal
myModal.toggle()
// Event listeners
var modalEl = document.getElementById('myModal')
modalEl.addEventListener('show.bs.modal', function (event) {
console.log('Modal is about to be shown')
})
modalEl.addEventListener('shown.bs.modal', function (event) {
console.log('Modal is now visible')
})
modalEl.addEventListener('hide.bs.modal', function (event) {
console.log('Modal is about to be hidden')
})
modalEl.addEventListener('hidden.bs.modal', function (event) {
console.log('Modal is now hidden')
})
