Bootstrap tutorial
Build responsive, good-looking pages fast with ready-made components
About this tutorial
Bootstrap is the world's most popular CSS framework. Instead of writing every style yourself, you add ready-made classes to your HTML and get a responsive grid, buttons, cards, menus, forms and pop-ups that work on every screen size.
This beginner class uses Bootstrap 5. You should know basic HTML and CSS first. Every lesson has examples you can open in the CodeLab Playground, an exercise and a quiz, and you finish by building a complete landing page.
Lessons
Getting started
Layout
- Responsive columnsChange the layout at each screen size with breakpoints such as col-md-6 and col-lg-4.
- Spacing and utility classesAdd margin and padding, colours, borders, shadows and flexbox layouts without writing CSS.
- Typography and imagesStyle headings and text, and make images responsive, rounded and nicely laid out.
Components
- Buttons, badges and alertsStyle buttons in every colour and size, label things with badges, and show messages with alerts.
- CardsBuild flexible content boxes with images, titles, text, buttons, headers and footers, in responsive grids.
- Navigation barsBuild a responsive navbar with a brand, links and a menu button that collapses on phones.
- FormsStyle inputs, selects, checkboxes and input groups, lay forms out in columns and show validation messages.
- Tables and list groupsStyle data tables with stripes, hover and borders, make them scroll on phones, and use list groups.
- Modals, accordions and carouselsAdd interactive components that work with data-bs attributes and no JavaScript of your own.
- Icons and customising BootstrapAdd Bootstrap Icons, switch on dark mode, and change Bootstrap's colours with your own CSS.