Bootstrap Tutorial

Build responsive pages fast – the grid, utilities, components, forms and customising Bootstrap 5.

Start lesson 1 Take the quiz Cheat sheet

12 lessons

Bootstrap is a free CSS framework that gives you a responsive grid, ready-made components and hundreds of utility classes. In this track you learn Bootstrap 5 step by step – adding it to a page, the grid system, spacing and colour utilities, typography, buttons, cards, navbars, forms, modals and how to customise it.

Every lesson has examples you can edit and run in your browser, a short quiz and a practice exercise. You only need to know basic HTML and CSS.

1 Bootstrap IntroductionWhat Bootstrap 5 is, why so many sites use it, and how to add it to a page with one…
2 Bootstrap Grid SystemBuild responsive page layouts with Bootstrap containers, rows and 12 columns, plus breakpoints, gutters, offsets and row-cols.
3 Bootstrap Typography and ColorsStyle text with Bootstrap headings, display and lead classes, font utilities, and theme colours for text and backgrounds.
4 Bootstrap Spacing and UtilitiesUse Bootstrap margin and padding classes, plus utilities for display, sizing, borders, shadows and position, to style elements quickly.
5 Bootstrap Buttons and BadgesCreate Bootstrap buttons in every colour, size and state, group them, build toggle buttons, and add small badges for counts…
6 Bootstrap CardsBuild flexible content boxes with Bootstrap cards: images, headers, footers, card grids with equal heights, horizontal cards and clickable cards.
7 Bootstrap NavbarBuild a responsive Bootstrap navbar with a brand, links, a dropdown and a toggler that collapses into a menu button…
8 Bootstrap FormsStyle inputs, selects, checkboxes and switches with Bootstrap, lay forms out with the grid, use floating labels and input groups,…
9 Bootstrap Tables and List GroupsStyle data tables with Bootstrap (striped, hover, bordered, responsive) and build list groups for menus, settings and lists with badges.
10 Bootstrap Modals and AlertsShow messages with Bootstrap alerts, make them dismissible, and open modal dialogs with data attributes or JavaScript, the accessible way.
11 Bootstrap Flex and AlignmentUse Bootstrap flex utilities to align, space, wrap and reorder items, plus the hstack and vstack helpers for quick layouts.
12 Customize Bootstrap and Dark ModeMake Bootstrap match your brand with CSS variables and Sass, and add light, dark and automatic colour modes with data-bs-theme.