Bootstrap 5 — Complete Guide

What Is Bootstrap? — Framework Overview

Bootstrap is a free CSS framework for building responsive mobile-first websites with a grid system, pre-built components, and utility classes.

Bootstrap Installation & Setup — CDN, npm, Build Tools

Set up Bootstrap 5 using CDN, npm, or build tools. Learn the file structure, required meta tags, and how to verify your setup.

Bootstrap Grid System — Containers, Rows, and Columns

Bootstrap's grid system uses containers, rows, and columns to create responsive layouts with up to 12 columns per row across breakpoints.

Bootstrap Grid Options — Breakpoints, Alignment, Offsets, Ordering

Bootstrap's grid options include responsive breakpoints, column alignment, offsets for spacing, and ordering classes to rearrange columns.

Bootstrap Columns & Gutters — Sizing, Wrapping, Spacing

Bootstrap columns can have explicit widths, auto widths, or equal distribution. Gutters control spacing between columns with responsive options.

Bootstrap Typography — Headings, Text Utilities, Lists

Bootstrap typography provides styled headings, display headings, lead text, text alignment, text transform, font weight, and list styling.

Bootstrap Colors & Backgrounds — Contextual and Utility Classes

Bootstrap provides contextual color classes for text, backgrounds, and borders using semantic names like primary, success, danger, and warning.

Bootstrap Margins & Padding — Spacing Utilities

Bootstrap spacing utilities use a t-r-b-l pattern with sizes 0-5 and auto to control margin and padding on any element.

Bootstrap Borders & Shadows — Border Utilities and Box Shadows

Bootstrap borders add, remove, and color borders on elements. Shadows provide box-shadow with five depth levels from subtle to prominent.

Bootstrap Display & Position — Display Property and Positioning

Bootstrap display utilities control visibility and layout behavior. Position utilities handle static, relative, absolute, fixed, and sticky positioning.

Bootstrap Flex Utilities — Flexbox Layout Helpers

Bootstrap flex utilities provide flexbox layout control with direction, justify-content, align-items, wrap, grow, shrink, and order classes.

Bootstrap Images & Figures — Responsive Media Utilities

Bootstrap image utilities make images responsive with img-fluid, add thumbnail styles, align images, and create figure captions.

Bootstrap Tables — Styled and Responsive Data Tables

Bootstrap table classes add stripes, borders, hover effects, dark variants, and responsive scrolling to HTML tables with minimal markup.

Bootstrap Forms & Inputs — Form Controls and Layout

Bootstrap form classes style inputs, textareas, selects, checkboxes, radios, and ranges with consistent theming and grid-based layout.

Bootstrap Form Validation — Client-Side Validation Feedback

Bootstrap form validation provides visual feedback states for valid, invalid, and warning inputs using CSS classes and JavaScript interaction.

Bootstrap Buttons — Button Styles, Sizes, and States

Bootstrap buttons provide contextual color classes, outline styles, size variants, active/disabled states, and block-level button options.

Bootstrap Button Groups — Grouped and Toolbar Buttons

Bootstrap button groups join buttons together in a single visual unit with support for toolbars, nesting, sizing, and vertical orientation.

Bootstrap Navbar — Responsive Navigation Bar

Bootstrap navbar creates responsive navigation bars with branding, links, dropdowns, forms, and toggler for mobile collapse behavior.

Bootstrap Navs & Tabs — Tabbed and Pill Navigation

Bootstrap navs create horizontal and vertical navigation with tabs, pills, fill, justify, and dropdown support for tabbed content interfaces.

Bootstrap Cards — Flexible Content Containers

Bootstrap cards are flexible content containers with optional header, footer, images, and body sections for displaying content in a structured layout.

Bootstrap Modals — Dialog and Overlay Components

Bootstrap modals are dialog boxes overlaid on the page with header, body, footer sections, size variants, and JavaScript-driven show/hide behavior.

Bootstrap Carousel — Image Sliders and Slideshows

Bootstrap carousel creates image sliders with previous/next controls, indicators, captions, crossfade transitions, and autoplay cycling.

Bootstrap Accordion — Collapsible Content Panels

Bootstrap accordion creates vertically stacked collapsible panels with show/hide toggling, supporting single or multiple open panels.

Bootstrap Tooltips & Popovers — Hover Information Components

Bootstrap tooltips display small informational text on hover. Popovers provide richer content with header and body in a larger overlay.

Bootstrap Toasts & Alerts — Notification Components

Bootstrap alerts show feedback messages with dismiss buttons. Toasts display lightweight push notifications that can auto-hide after a timeout.

Bootstrap Badges & Progress — Status Labels and Progress Bars

Bootstrap badges create count labels on buttons and text. Progress bars display completion status with animated, striped, and labeled variants.

Customizing Bootstrap with Sass — Variables and Theme Customization

Customize Bootstrap with Sass by overriding variables, importing only needed components, and building a custom theme for your project.

Customizing Bootstrap with CSS Variables — Runtime Theme Changes

Bootstrap's CSS custom properties allow runtime theme customization by overriding --bs-* variables without recompiling Sass.

Bootstrap JavaScript — Programmatic Component Control

Bootstrap's JavaScript API provides programmatic control over components with constructor options, methods, events, and data attribute integration.

Bootstrap Project — Build a Complete Responsive Dashboard

Build a complete responsive admin dashboard using Bootstrap 5 with navbar, sidebar, cards, tables, modals, forms, and data visualization components.