Layout
Media Object
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-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
- Nested list items need the
- 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
Components
Alert
Badge
Example heading badge
Example heading .badge-primary
Popover
Popover on clickCard
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCollapse - 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 CommentsDescription text gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Category: DesignThinking with Type
3 CommentsDescription text gravida at eget metus. Maecenas sed diam eget risus varius blandit
Category: DesignDesign of Everyday Things
3 CommentsDescription text gravida at eget metus. Maecenas sed diam eget risus varius blandit
Category: DesignPills Nav
Fill and Justify Pills Nav
Progress
Buttons
Button Group
Collapse
Tooltips
Tooltip on topBreadcrumb
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.
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.
Pagination
Forms
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-0Border
.border-0 .border-top-0 .border-right-0 .border-bottom-0 .border-left-0Close 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