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

Muted Text Class

Heading Text With muted secondary text

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

Collapse - Accordian

Accordian Group Heading

Accordian content description text.

Accordian Group Heading

Accordian content description text.

Accordian Group Heading

Accordian content description text.

Input group


List group with Custom Content

Don't Make Me Think
20 Comments

Description text gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Category: Design
Thinking with Type
3 Comments

Description text gravida at eget metus. Maecenas sed diam eget risus varius blandit

Category: Design
Design of Everyday Things
3 Comments

Description text gravida at eget metus. Maecenas sed diam eget risus varius blandit

Category: Design

Pills Nav

Fill and Justify Pills Nav

Progress

75%

Buttons

Button Group

Dropdown link Dropdown link

Dropdown link Dropdown link

Dropdown link Dropdown link

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
Forgot Password? / Sign Up
Help message

Scrollspy

Description

The ScrollSpy plugin auto updates nav targets as you scroll the area below the navbar. Also works in dropdowns as well.

Use Cases

  • For long pages of documentation
  • One page website with sticky top navbar
  • A grid of images for a portfolio that identifies categories as you scroll down the page. For example: print, web, photography, etc.

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