Practical, no-nonsense guides to customizing Bootstrap 5.
Bootstrap is a free, open-source CSS framework for responsive, mobile-first sites. Learn what it does, what is new in 5.3, and how to get started.
ComparisonsA practical comparison of Bootstrap and Tailwind CSS: component framework versus utility-first, speed, design control, CSS size, and when to choose each.
AI themingUse AI to explore Bootstrap theme ideas, then turn the best direction into real Bootstrap 5 Sass variables for colors, type, spacing, radius, and dark mode.
CustomizationThe complete guide to customizing Bootstrap 5: the two ways to do it, what to change first, the Sass variable system, and exporting your theme.
CustomizationRecolor your Bootstrap theme in the browser or with Sass: override $primary and $theme-colors, add a brand color, and export the result.
CustomizationHow Bootstrap 5 Sass variables work: the !default system, the tiers and maps, Sass vs CSS variables, and the import order to override them correctly.
CustomizationSwap the Bootstrap font, load a Google Font, and tune the type scale: $font-family-base, $font-size-base, headings, and line height, visually or with Sass.
Color modesEnable Bootstrap 5.3 dark mode with data-bs-theme, add a light and dark toggle, customize the dark palette, and even build your own color mode.
AI UIBuild an AI chat interface with Bootstrap 5 using cards, forms, badges, spinners, offcanvas settings, accessible loading states, and themeable chat bubbles.
CustomizationShip your custom Bootstrap theme as Sass source for a build pipeline, or as compiled CSS you link with no build step, and where each file goes.
CustomizationBootstrap's full CSS is about 28 KB gzipped. Cut it down by importing only the partials you use, purging unused classes, and trimming utilities.
LayoutBuild flexible layouts with Bootstrap flexbox utilities: d-flex, justify-content, align-items, how to center a div, responsive variants, and gap spacing.
LayoutMaster Bootstrap spacing utilities: the m and p notation, sides, the 0 to 5 scale based on $spacer, responsive spacing, auto-centering, and how to customize it.
LayoutCenter a div in Bootstrap horizontally, vertically, or both with mx-auto, text-center, and d-flex utilities, plus a decision table and common gotchas.
LayoutHow the Bootstrap 5 grid works: the 12-column flexbox model, containers, rows and columns, breakpoints, offsets, gutters, and nesting.
HostingWhere to host a static HTML website the easy way: what static hosting is, what to look for, and how to publish your files in about a minute.