Bootstrap Pocket Book — Uplatz
60 deep-dive flashcards • Single column • Grid & Layout • Components • Forms • Utilities • Theming & Sass • JS Plugins • A11y & Patterns
Cheat-friendly explanations • Readable HTML/JS snippets • Production-oriented tips
1) What is Bootstrap?
A CSS framework with responsive grid, prebuilt components, utilities, and JavaScript plugins. Great for fast, consistent UIs.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>2) Containers
Wrap page content. .container (fixed breakpoints), .container-fluid (100% width), or responsive variants.
<div class="container">...</div>3) Breakpoints
xs (<576), sm (≥576), md (≥768), lg (≥992), xl (≥1200), xxl (≥1400). Utilities and grid accept responsive suffixes (e.g., mt-md-3).
4) Mobile-first
Start with base styles for phones; add overrides at larger breakpoints.
5) Reboot & Normalize
Bootstrap “Reboot” provides sensible defaults for typography, forms, and elements for consistency across browsers.
6) Icons
Use Bootstrap Icons or any SVG set.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
<i class="bi bi-alarm"></i>7) Color System
Theme palette: primary, secondary, success, danger, warning, info, light, dark.
8) Spacing Scale
0–5 (or auto) for margins/padding: mt-3, px-4, mx-auto.
9) Color Modes
Toggle light/dark via CSS variables: data-bs-theme="dark" on <html> or containers.
10) Utility-first Augmentation
Utilities cover display, flex, grid, spacing, sizing, position, colors—compose layouts quickly without custom CSS.
11) Rows & Columns
Grid is flexbox-based; 12 columns; nest rows inside columns.
<div class="row">
<div class="col-12 col-md-6">A</div>
<div class="col-12 col-md-6">B</div>
</div>12) Column Sizes
.col auto-sizes; explicit sizes like .col-4; responsive variants: .col-lg-3.
13) Gutters
Control with g-0…g-5 or per-axis: gx-2 gy-4.
14) Offsetting & Ordering
.offset-md-2, .order-1, .order-md-0 to reorder columns responsively.
15) Alignment
Use flex utils: .align-items-center, .justify-content-between, .text-center.
16) Auto Layout
Without defined widths, columns share space equally; add one numeric size to control the rest.
17) Vertical Stacks
Use .vstack / .hstack helpers for simple stacked layouts with gaps.
18) Responsive Display
.d-none .d-md-block hides on small screens, shows on ≥md.
19) Containers by Breakpoint
.container-sm, .container-lg etc. Choose based on content width you want at each breakpoint.
20) CSS Grid Utilities
For advanced layouts, Bootstrap also exposes CSS Grid helpers (when included) alongside Flexbox grid.
21) Nav
Horizontal/vertical navs with pills/tabs styles.
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Docs</a></li>
</ul>22) Navbar
Responsive navbar with toggler and collapse.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav">
<span class="navbar-toggler-icon"></span>
</button>
<div id="nav" class="collapse navbar-collapse">...</div>
</div>
</nav>23) Breadcrumb
Show location within a hierarchy with .breadcrumb.
24) Dropdowns
Pop menus via JS; support alignment and dark mode.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Menu</button>
<ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li></ul>
</div>25) Pagination
Provide page navigation with .pagination.
26) Tabs
Tabbed content via data API.
<ul class="nav nav-tabs" id="t">...</ul>
<div class="tab-content">...</div>27) Offcanvas
Sidebar drawer that slides in.
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#oc">Open</button>
<div id="oc" class="offcanvas offcanvas-start">...</div>28) Collapse
Toggle visibility of content.
<a data-bs-toggle="collapse" href="#c">Toggle</a>
<div id="c" class="collapse">...</div>29) Scrollspy
Auto-highlight nav links based on scroll position.
30) Sticky
Use .sticky-top for headers/toolbars that stick when scrolled.
31) Modal
Dialog overlay with focus trap.
<button class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#m">Open</button>
<div id="m" class="modal fade"><div class="modal-dialog"><div class="modal-content">...</div></div></div>32) Toasts
Lightweight notifications; place with utilities.
33) Alerts
Contextual banners: .alert-primary, .alert-danger etc.
34) Progress
Determinate/indeterminate bars; stacked segments.
<div class="progress"><div class="progress-bar w-50">50%</div></div>35) Cards
Flexible content container with header, body, footer, and images.
36) List Group
Lists with active/disabled states and badges.
37) Carousel
Slideshow for images/content; swipe support on touch devices.
38) Accordion
Collapsible content with one-open-at-a-time behavior.
39) Form Controls
Inputs, selects, checks/radios, range sliders; use .form-control and .form-select.
<input class="form-control" placeholder="Email">40) Grid-based Forms
Use rows/cols for complex forms with aligned labels.
41) Floating Labels
Compact forms where labels float above inputs.
<div class="form-floating">
<input class="form-control" id="x" placeholder=" ">
<label for="x">Email</label>
</div>42) Input Group
Combine inputs with buttons or text add-ons.
<div class="input-group">
<span class="input-group-text">@</span>
<input class="form-control" placeholder="username">
</div>43) Validation Styles
Use .is-valid/.is-invalid and feedback elements; pair with custom JS or native constraint validation.
44) Disabled & Readonly
disabled blocks interaction; readonly prevents editing but allows focus/select.
45) File Inputs & Range
Styled with .form-control and .form-range.
46) Form Layout Patterns
Inline forms (.row row-cols-lg-auto), stacked on mobile; place actions right with .ms-auto.
47) Typography
Use display headings, .lead, .small, .fw-bold, .text-muted for emphasis.
48) Colors & Backgrounds
.text-primary, .bg-light, .border-danger, .link-info.
49) Spacing
Margin/padding utilities: m/p + side + size (e.g., mt-3, px-4).
50) Display & Visibility
.d-flex, .d-grid, .d-none, .visible/.invisible.
51) Flexbox
.justify-content-center, .align-items-end, .flex-wrap, .gap-3.
52) Position & Z-Index
.position-relative, .top-0, .start-50, .translate-middle, .z-3.
53) Images & Ratios
.img-fluid for responsive images; .ratio for videos (e.g., .ratio-16x9).
54) Shadows & Rounding
.shadow, .shadow-lg, .rounded, .rounded-4, .rounded-circle.
55) Customize with Sass
Override variables before importing Bootstrap.
// _custom.scss
$primary: #6d28d9;
$border-radius: 0.75rem;
@import "bootstrap/scss/bootstrap";56) CSS Variables & Color Modes
Many options exposed as CSS vars. Toggle dark mode via data-bs-theme.
<html data-bs-theme="dark">...</html>57) JavaScript: Bundle & Data API
Use the bundle (includes Popper) or import per-plugin; initialize with data attributes or JS.
import { Modal } from "bootstrap";
new Modal(document.getElementById("m")).show();58) Accessibility
Components include ARIA roles and keyboard support; ensure contrast, focus styles, and semantic HTML.
59) Performance Tips
Only import needed SCSS; purge unused CSS with your bundler; minify and defer non-critical JS; lazy-load images.
60) Production Checklist
Consistent spacing & typography, responsive checks at all breakpoints, nav keyboard support, color-mode test, forms validated, minified CSS/JS, and cache headers set.