Home
Web Apps
Web Apps Overview Design Toolkits

Documentation
Version 3 stable Version 4 stable
iOS
Android

Contact Us
Collaborate on Teams
Contribute on GitHub

Version 3 stable

Version 4 stable

Web Apps Overview Setup

CDN / Preferred NPM / Managed Dependencies Pre-built React

Design Toolkits Component Samples Themes

Overview Gray / Light

Gray / Dark

Blue / Light

Blue / Dark

Grid System

Overview

Container Fluid Container Columns Offsets

Foundations

Typography

Roboto Headings Text Weights Text Alignment Body Text Contextual Alternatives Lists Blockquotes Monospace Keyboard Shortcuts Code Snippets

Iconography

Font Awesome Color Meaning

Colors

Brand Contextual Alternatives Backgrounds Palette

Material / Shadows

Basic Whiteframe / Card Depth

Raised Buttons

Styles Usage Sizes Dropdowns / Dropups Block Buttons Groups Radio / Checkbox Groups Toolbars

Flat Buttons

Styles Sizes Dropdowns / Dropups Block Buttons Groups Radio / Checkbox Groups Toolbars

Icon Buttons

Basic Styled Segmented

Floating Action Buttons

Basic Mini Speed Dial

Overview Input Types

Text Inputs Plain Text Checkboxes Switches Radios Select / Multi-select File Browser Date / Time Pickers Form Buttons

Input Sizes Input Groups

Text Addons Checkbox / Radio Addons Button Addons Dropdown Addons

Help Text Validation States Required and Optional Inputs Horizontal Forms

Text Inputs Plain Text Checkboxes Switches Radios Select / Multi-select File Browser Date / Time Pickers Form Buttons

Inline Forms

Basic Borderless Forms Search Forms

Sliders

Navbar

Dark Light Depth Contextual Buttons

Banner Bar

Internal External Brand Logo

Bottom Nav Drawer / Sidebar

Default Inverse Backdrop Overflow Collapsible Groups

Dropdowns Toolbars

Basic Primary Action Inputs Sizes Flat Variant

Tabs

Basic Inverse Variant Pill Variant Stacked Pills

Steppers

Vertical Variant Horizontal Variant

Breadcrumbs Pagination

Default Round Variant Pager

Panels / Cards

Basic Flat Panels Hoverable Panels Sections Contextual Alternatives Expandable Groups

List Groups

Basic Separators Custom Content

Jumbotron Splash Screen

Static Active

Wells

Progress Indicators

Progress Bar Spinner

Alerts Badges / Labels

Tables

Basic Striped Rows Condensed Rows Mixed Content

Images Media Objects Chips

Tooltips Popovers Dialogs / Modals Toasts

Toast Container Block Toast Pill Toast

Borders

Additive Subtractive Color

Display

Notation Examples

Flex

Enable Flex Layout Direction Justify Content Align Items Align Self Auto Margins Wrap Order Align Content

Sizing

Width Height

Spacing

How It Works Notation

Charts and Graphs

Color Palettes

Categorical Data Semantic Data Sequential Data

Typography

Font Families Font Weights

Chart Types

Bar Chart (Horizontal) Bar Chart (Vertical) Line Chart

External Website

Login Page

Web App

Website

Table

Splash Screen

Built with Bootstrap 4 B

Help Text

Block-level help text for form controls.

Learn more

To learn more about help text visit the Bootstrap documentation.

Input A block of help text to provide the user with additional information about an input.

Third-party Content Disclaimer