Layout

Media Object

Generic placeholder image
Media heading
Media object description text
Generic placeholder image
Media heading
Media object description text

Grid System


<div class="container">
   <div class="row">
     <div class="col">.col</div>
     <div class="col">.col</div>
   </div>
   <div class="row">
     <div class="col">.col</div>
     <div class="col">.col</div>
     <div class="col">.col</div>
   </div>
 </div>

Tip! CRC = .container > .row > .col

Content

Display Headings

Display 1

Display 2

Display 3

Display 4

Blockquote

Typography is to literature as musical performance is to composition: an essential act of interpretation, full of endless opportunities for insight or obtuseness.

Robert Bringhurst in The Elements of Typographic Style

Table

# thead-default
1 Nina
2 Penta
3 Santa Maria
# thead-inverse
1 Nina
2 Penta
3 Santa Maria

Lead

A lead paragraph is used to draw a reader into the body copy. In a badly designed book, the letters mill and stand like starving horses in a field. In a book designed by rote, they sit like stale bread and mutton on the page.

In a well-made book, where designer, compositor and printer have all done their jobs, no matter how many thousands of lines and pages, the letters are alive. They dance in their seats. Sometimes they rise and dance in the margins and aisles.

Unstyled List

  • Unstyled list item text
  • Unstyled list item text
    • Nested list items need the .list-unstyled class as well or they will have bullets
  • Unstyled list item text
  • Unstyled list item text

Inline List

  • List item one
  • List item two
  • List item three

Description List

Long title that is not truncated or shortened
Definition list description etiam porta sem malesuada magna mollis euismod.
Long title that is truncated or shortened
Definition list description etiam porta sem malesuada magna mollis euismod.
Nesting
Nested definition list
Definition list description etiam porta sem malesuada magna mollis euismod.

Image Thumbnails

Figure

Figure caption description text

Components

Alert

Badge

Example heading badge

Example heading .badge-primary

Popover

Popover on click


Card

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Input group



List group with Custom Content


Pills Nav


Fill and Justify Pills Nav


Progress

75%

Buttons


Button Group

Collapse

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Tooltips

Tooltip on top

Breadcrumb

Carousel


Dropdowns


Modal

Navbar

Jumbotron

Jumbotron

A component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

List group

  • List group item #1 14
  • List group item #2 2
  • List group item #3 1

Base Nav

Tabs Nav


Tab #1 Content

Tab main content.

Tab #2 content
Tab #3 content
Tab #4 content

Pagination

Forms

No Spam.
Radio buttons
Help message

Utilities

Border-radius

.rounded .rounded-top .rounded-right .rounded-bottom .rounded-left .rounded-circle .rounded-0

Border

.border-0 .border-top-0 .border-right-0 .border-bottom-0 .border-left-0

Close icon

Colors

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark


.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white