## Layout

### Media Object

##### Media heading

Media object description text

##### 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.

### Table

# | thead-dark
--- | ---
1 | Nina
2 | Penta
3 | Santa Maria

# | thead-light
--- | ---
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

This is a primary alert
This is a secondary alert
This is a success alert
This is a danger alert
This is a warning alert
This is a info alert
This is a light alert
This is a dark alert

### Badge

Example heading .badge-primary

Example heading badge-secondary

### Popover

Popover on click

### Card

#### 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 Item #1

## Accordian Group Heading

Accordian content description text.

##### Accordian Group Item #2

## Accordian Group Heading

Accordian content description text.

##### Accordian Group Item #3

## 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

### Collapse

Link with href

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

### Carousel Slider Title

Description text to further describe the content of the slide image

Call to Action

### Carousel Slider Title

Description text to further describe the content of the slide image

Call to Action

### Carousel Slider Title

Description text to further describe the content of the slide image

Call to Action
Previous Next

### Dropdowns

### Modal

##### Modal title

## Modal body heading

Modal body text description

### Navbar

### 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

### Vertical Nav

### Tabs Nav

##### Tab #1 Content

Tab main content.

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

### Pagination

### Forms

Email address No Spam.
Example select
Radio buttons
Option one
Option two - disabled
Password Forgot Password? / Sign Up
Multiple select
Checkbox
Checkbox - disabled
Textarea
File input 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