Contents
Bootstrap
The best-known CSS framework: a grid, ready-made components and utilities for fast layouts.
1.Getting started
2.Grid
- Container, rows and columnsThe basis of the Bootstrap grid: the container, the row and col classes, and splitting a row into 12 parts.
- Responsive breakpointsHow the Bootstrap grid changes the number of columns on different screens: the sm, md, lg, xl, xxl breakpoints and classes like col-md-6.
- Aligning, offsetting and ordering columnsHow to align columns vertically and horizontally, shift them with offset classes and reorder them with order classes.
- Gutters between columnsWhat gutters are in the Bootstrap grid and how to change the space between columns with the g, gx and gy classes.
3.Utilities
- Spacing: the m and p classesBootstrap spacing utilities: how to read classes like mt-3, px-4, mx-auto, responsive spacing and gap.
- Display and flexboxThe d-none, d-flex, d-md-block utilities and Bootstrap flexbox classes: direction, alignment, wrapping, growing.
- Typography and textHow Bootstrap styles text: display headings, the lead class, size, weight, alignment, wrapping and lists.
- Colors and backgroundsThe Bootstrap color palette: the text-*, bg-*, text-bg-* classes, subtle shades and opacity.
- Borders, shadows, sizing and positionThe border, rounded, shadow, w-50, vh-100 and position-absolute utilities: styling and placing a block with Bootstrap classes.
4.Components
- Buttons and button groupsThe btn class and its variants: colors, outline buttons, sizes, the disabled state, link buttons and button groups.
- NavbarThe navbar component: a logo, links, collapsing into a hamburger button on phones and a dark navbar.
- CardsThe card component: the body, title, image, header and footer of a card, and a row of equal-height cards.
- TablesThe table class and its variants: stripes, row hover, borders, compact tables, colored rows and horizontal scrolling.
- Alerts, badges and progressThe alert, badge and progress components: messages about the result of an action, labels and counters, progress bars.
- Images and figuresResponsive img-fluid images, the img-thumbnail frame, rounding, alignment, figure captions and ratio blocks.
- Bootstrap IconsHow to add the Bootstrap Icons set from a CDN or npm, insert an icon, and change its size and color.
5.Forms
- Form controlsThe form-control, form-select, form-check and input-group classes: text fields, selects, checkboxes, switches and fields with add-ons.
- Form layout and floating labelsHow to arrange form fields in columns with the Bootstrap grid, build a horizontal form and use form-floating labels inside fields.
- Form validation stylesHow Bootstrap shows form errors: the is-valid and is-invalid classes, invalid-feedback messages and the was-validated class with the browser's built-in validation.
6.Interactive components
- ModalThe modal component: a window over the page, opening it with data-bs-toggle attributes and from JavaScript, sizes and events.
- DropdownsThe dropdown component: a button with a menu, items, dividers and headers, menu direction and alignment, a dropdown in the navbar.
- Collapse and accordionThe collapse component: a hidden block that opens with a button, and the accordion — a group of such blocks where only one is open.
- Tabs and pillsThe nav component as nav-tabs and nav-pills, switching tab-content panels without reloading the page.
- CarouselThe carousel component: slides, arrows, indicators, captions, autoplay and the slide transition effect.
- OffcanvasThe offcanvas component: a panel that slides in from the edge of the screen, its sides, settings and a responsive variant for the admin sidebar.
- Toasts and tooltipsPop-up toast notifications and tooltips: markup, the required JavaScript initialization and settings.
7.Customization
- Dark modeBootstrap 5.3 color modes: the data-bs-theme attribute, dark mode for the page and for a single block, a theme switch and following the system setting.
- Customizing with CSS variablesHow to change the font, colors, rounding and component look of Bootstrap with --bs-* CSS variables, without rebuilding.
- Customizing with SassHow to build Bootstrap from its Sass sources in a Vite project: override $primary and $border-radius, extend the spacing scale and include only the parts you need.
8.Practice
- Building a landing pagePractice: a one-page site for the Tasko service built from Bootstrap components — header, hero, features, pricing and footer.
- When not to use Bootstrap and production tipsWhich projects Bootstrap gets in the way of, what the alternatives are and how to prepare a Bootstrap site for release: version, size, accessibility.