Bootstrap Tutorial

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.

This is some text.

This is another text.

Bootstrap Tutorial

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.

This is some text.

This is another text.

Alerts

Alerts are created with the .alert class, followed by a contextual color classes:

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Primary! Indicates an important action.
Secondary! Indicates a slightly less important action.
Dark! Dark grey alert.
Light! Light grey alert.

Alerts

The button with class="close" and data-dismiss="alert" is used to close the alert box.

The alert-dismissible class adds some extra padding to the close button.

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Primary! Indicates an important action.
Secondary! Indicates a slightly less important action.
Dark! Dark grey alert.
Light! Light grey alert.

Button Styles

Button Elements

Link Button

Button Outline

Button Sizes

Block Level Buttons


Large Block Level Buttons


Small Block Level Buttons

Button Group

The .btn-group class creates a button group:

Vertical Button Group

Use the .btn-group-vertical class to create a vertical button group:

Nesting Button Groups

Nest button groups to create dropdown menus:

Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Contextual Badges

Primary Secondary Success Danger Warning Info Light Dark

Pill Badges

Primary Secondary Success Danger Warning Info Light Dark