Kitchen Sink

Kitchen Sink

Heavily inspired by White Plumb by Divshot.

Learn more »

Headings

Page Header With Small Text

This is an h1 heading

This is an h2 heading

This is an h3 heading

This is an h4 heading

This is an h5 heading
This is an h6 heading
Tables

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Cross-browser compatibility

Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Add .table-bordered for borders on all sides of the table and cells.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Add .table-hover to enable a hover state on table rows within a <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Add .table-condensed to make tables more compact by cutting cell padding in half.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Use contextual classes to color table rows or individual cells.

Class Description
.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.info Indicates a neutral informative change or action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
Content Formatting

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

"Whenever you feel like criticizing any one," he told me, "just remember that all the people in this world haven't had the advantages that you've had."

He didn't say any more but we've always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence I'm inclined to reserve all judgements, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality when it appears in a normal person, and so it came about that in college I was unjustly accused of being a politician, because I was privy to the secret griefs of wild, unknown men. Most of the confidences were unsought--frequently I have feigned sleep, preoccupation, or a hostile levity when I realized by some unmistakable sign that an intimate revelation was quivering on the horizon--for the intimate revelations of young men or at least the terms in which they express them are usually plagiaristic and marred by obvious suppressions. Reserving judgements is a matter of infinite hope. I am still a little afraid of missing something if I forget that, as my father snobbishly suggested, and I snobbishly repeat a sense of the fundamental decencies is parcelled out unequally at birth.

And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes but after a certain point I don't care what it's founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction--Gatsby who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the "creative temperament"--it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No--Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and short-winded elations of men.

Muted color paragraph.

Warning color paragraph.

Danger color paragraph.

Info color paragraph.

Success color paragraph.

This is text in a small wrapper. NBD, right?


Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com

Here's what a blockquote looks like in Bootstrap. Wrap the quote in paragraph tags.

Use footer to identify the source.

The blockquote can also start from the right side of the container.

Use footer to identify the source.

Transform text in components with text capitalization classes.

Lowercased text.

Uppercased text.

Capitalized text.


  • Normal Unordered List
  • Can Also Work
    • With Nested Children
  • Adds Bullets to Page
  1. Normal Ordered List
  2. Can Also Work
    1. With Nested Children
  3. Adds Bullets to Page

  • Unstyled Unordered List
  • Can Also Work
    • With Nested Children
  • Adds Bullets to Page

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

function preFormatting() {  // looks like this;  var something = somethingElse;  return true;}
Forms
Legend

Example block-level help text here.



Buttons

Images

Input Groups

.00

$ .00
Labels and Badges

Default Success Warning Danger Info

Inbox 42

Alerts
Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Heads up! This alert needs your attention, but it's not super important.

Warning!

This is a block style alert.

Progress Bars
60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
0%
2%
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Media Object

Media heading

This is the content for your media.

Media heading

This is the content for your media.

This is a header

This is a panel

This is a header
This is a panel
This is a header
This is a panel
This is a header
This is a panel
This is a header

This is a panel

This is a header
This is a panel
  • First Item
  • Second Item
  • Third Item
Default Well
Small Well
Large Padding Well