Bootstrap BEGINNERBootstrap 5
Complete Bootstrap 5 CSS framework reference with utilities, components, layout system, and JavaScript plugins
15 min read
bootstrapcssframeworkresponsivecomponentsutilitiesgrid
Table of Contents
Getting Started
Installation and setup for Bootstrap 5
Installation Methods
Different ways to include Bootstrap in your project
html
💡 Use bundle.min.js to include Popper.js for dropdowns and tooltips
⚡ CDN is fastest for prototyping, NPM for production apps
📌 Always include viewport meta tag for responsive design
🔥 Import only needed SCSS modules to reduce bundle size
Basic HTML Template
Starter template with Bootstrap 5
html
💡 Use data-bs-theme="dark" on html tag for dark mode
⚡ Container class provides responsive fixed-width container
📌 Always include viewport meta tag for mobile responsiveness
🔥 Place scripts at end of body for better performance
Layout & Grid
Bootstrap grid system and layout utilities
Grid System
12-column responsive grid layout
html
💡 Bootstrap uses a 12-column grid system
⚡ Use container for fixed-width, container-fluid for full-width
📌 Columns automatically wrap to new line when exceeding 12
🔥 Responsive classes stack vertically on smaller screens
Flexbox Utilities
Flexbox layout utilities
html
💡 Flexbox utilities work with d-flex or d-inline-flex
⚡ All flexbox utilities have responsive variants
📌 Use gap utilities for consistent spacing
🔥 Combine with margin utilities for fine control
Typography
Text utilities and typography classes
Headings & Display
Typography heading styles
html
💡 Display headings are larger and more impactful than regular headings
⚡ Use heading classes to apply heading styles without changing semantics
📌 Lead class makes paragraph text stand out
🔥 Blockquotes with figure/figcaption for semantic HTML5
Text Utilities
Text alignment, transformation, and styling
html
💡 All text utilities have responsive variants (text-sm-start, etc.)
⚡ Use fs-* classes for font sizes instead of custom CSS
📌 fw-* classes provide consistent font weights
🔥 Text color classes automatically adjust for dark mode
Colors & Backgrounds
Color system and background utilities
Color System
Bootstrap color palette and utilities
html
💡 Use -subtle variants for softer background colors
⚡ Combine bg-gradient with bg-* for gradient backgrounds
📌 -emphasis variants provide stronger color contrast
🔥 Opacity utilities work with both text and backgrounds
Spacing
Margin and padding utilities
Spacing Utilities
Margin and padding classes
html
💡 Use mx-auto to center block elements horizontally
⚡ Gap utilities are better than margins for flex/grid layouts
📌 Negative margins (n1, n2, etc.) pull elements closer
🔥 All spacing utilities have responsive variants
Components
Core Bootstrap components
Buttons
Button styles and variations
html
💡 Use btn-outline-* for ghost/outline button styles
⚡ d-grid with gap-2 creates full-width block buttons
📌 Button groups combine multiple buttons into single component
🔥 Add disabled attribute or class for disabled state
Cards
Card component for content containers
html
💡 Use h-100 class to make cards equal height in grid
⚡ Card groups make cards equal height automatically
📌 text-bg-* combines text and background colors
🔥 Use card-img-overlay for text over images
Forms
Form controls and layouts
html
💡 Use form-floating for modern floating label inputs
⚡ Input groups combine inputs with text/buttons
📌 Add needs-validation class and novalidate for custom validation
🔥 Form-check-inline for horizontal checkboxes/radios
Navigation
Navigation components
html
💡 Use navbar-expand-* to control when navbar collapses
⚡ ms-auto pushes nav items to the right
📌 Offcanvas provides mobile-friendly slide-out navigation
🔥 Fixed-top requires padding-top on body element
Utilities
Utility classes for common patterns
Display & Position
Display and position utilities
html
💡 Use translate-middle with position utilities to center
⚡ d-none d-md-block pattern for responsive visibility
📌 z-* utilities only work with positioned elements
🔥 overflow-auto adds scrollbars only when needed
Borders & Shadows
Border and shadow utilities
html
💡 rounded-circle requires equal width/height for perfect circle
⚡ Combine border utilities for custom styles
📌 shadow-* utilities add depth to elements
🔥 border-0 removes default borders from elements
JavaScript Components
Interactive Bootstrap components
Modal
Modal dialogs
html
💡 Use data-bs-backdrop="static" to prevent closing on outside click
⚡ modal-dialog-centered for vertical centering
📌 Multiple modals shouldn't be opened simultaneously
🔥 Use modal events to trigger actions on show/hide
Tooltips & Popovers
Tooltips and popover components
html
💡 Tooltips and popovers must be manually initialized via JavaScript
⚡ Use data-bs-trigger="focus" for dismiss on outside click
📌 Set data-bs-html="true" to use HTML in content
🔥 Popovers require tooltip plugin to be included
Alerts & Toasts
Alert messages and toast notifications
html
💡 Toasts are opt-in, must be initialized with JavaScript
⚡ Use toast-container for proper positioning and stacking
📌 alert-dismissible adds close functionality to alerts
🔥 Toasts autohide by default after 5 seconds
Responsive Utilities
Responsive design utilities
Breakpoints
Responsive breakpoint system
html
💡 Mobile-first approach: styles apply to xs and up by default
⚡ Use responsive utility variants for all screen sizes
📌 Combine multiple responsive classes for complex layouts
🔥 Test on actual devices, not just browser resize
Helpers & Misc
Helper classes and miscellaneous utilities
Helper Classes
Utility helper classes
html
💡 Stretched-link makes entire container clickable
⚡ Ratio classes maintain aspect ratios for embeds
📌 visually-hidden hides visually but not from screen readers
🔥 Placeholder classes create loading skeleton screens