Bootstrap Demo Page

Resize this responsive page to see the effect!

Typography

Bootstrap defines many classes that set CSS styles

  • h1, h2, h3
  • display-1, ... display-6
  • text-center
  • <pre> element 
    Show some preformatted text with style.
Classes for colors
Background colors

.bg-primary

.bg-success

.bg-info

.bg-warning

.bg-danger

.bg-secondary

.bg-dark

.bg-light

Text colors

.text-primary

.text-success

.text-info

.text-warning

.text-danger

.text-secondary

.text-dark

.text-light

Typography Demo Page

Components

Buttons

Blue

Green

Red

Orange

Card

(card-header bg-primary text-light)

Content

(card-body)

Cards can be created with or without card-header and card-body classes.

Cards can be created with a colored background and colored text. All components within the card will also get this text.

Components Demo Page

Grid System

Three equal columns

.col
.col
.col
.col
.col
.col

Three variable sized columns

.col-3
.col-3
.col-6
.col-4
.col-3
.col-5

Responsive columns

.col-lg-3
.col-lg-3
.col-lg-6
.col-lg-4
.col-lg-4
.col-lg-4

Grid Demo Page