Online Course Overview

Learn Bootstrap

Learn Bootstrap online through our comprehensive course. Build fast, responsive sites with the world's most popular front-end open source toolkit.

20 Lessons in 6 Sections

Beginner → Advanced

Start Learning Open Workspace

Curriculum

01Fundamentals

Getting Started with Bootstrap

Learn how to include Bootstrap in your HTML document and understand its core principles.

02Layout

The Grid System

Use Bootstrap's mobile-first flexbox grid to build layouts of all shapes and sizes.

Responsive Containers

Containers are the most basic layout element in Bootstrap and are required when using our default grid system.

03Content

Typography

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

Tables

Opt-in styling for tables with basic, striped, hoverable, and active styles.

04Components

Buttons

Use Bootstrap's custom button styles for actions in forms, dialogs, and more.

Button Groups

Group a series of buttons together on a single line.

Cards

Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.

Navbar

Documentation and examples for Bootstrap's powerful, responsive navigation header.

Alerts

Provide contextual feedback messages for typical user actions.

Badges

Documentation and examples for badges, our small count and labeling component.

Modals

Add dialogs to your site for lightboxes, user notifications, or completely custom content.

Accordion

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.

05Forms

Forms

Examples and usage guidelines for form control styles, layout options, and custom components.

Input Groups

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.

06Utilities

Spacing Utilities

Bootstrap includes a wide range of shorthand responsive margin and padding utility classes.

Flexbox Utilities

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more.

Colors and Backgrounds

Convey meaning through color with a handful of color utility classes.

Borders

Use border utilities to add or remove an element's borders.

Display Property

Quickly and responsively toggle the display value of components and more with our display utilities.