Kitchen Sink

The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Zitat von Herrn Müller

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.


Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1 Heading 1

Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Heading 2

Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Heading 3

Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Heading 4

Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Heading 5

Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Heading 6

Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.


List Types

Definition List

Definition List Title
This is a definition list division.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

UNORDERED LIST

  • List Item 1
  • List Item 2
  • List Item 3

Forms

Legend

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Form Element

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

Radio 1 Radio 2 Radio 3

Radio 1 Radio 2 Radio 3


Tables

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

Misc

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Lorem ipsum dolor sit amet,
 consectetuer adipiscing elit.
 Nullam dignissim convallis est.
 Quisque aliquam. Donec faucibus.
Nunc iaculis suscipit dui.
Nam sit amet sem.
Aliquam libero nisi, imperdiet at,
 tincidunt nec, gravida vehicula,
 nisl.
Praesent mattis, massa quis
luctus fermentum, turpis mi
volutpat justo, eu volutpat
enim diam eget metus.
Maecenas ornare tortor.
Donec sed tellus eget sapien
 fringilla nonummy.
NBA
Mauris a ante. Suspendisse
 quam sem, consequat at,
commodo vitae, feugiat in,
nunc. Morbi imperdiet augue
 quis tellus.
AVE

“This stylesheet is going to help so freaking much.” -Blockquote

Blockquote Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

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

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

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

Abonnieren Sie unseren E-Mail Newsletter

Wir informieren regelmäßig per E-Mail Newsletter über das Thema Ausbildung, Tipps und Tricks im Umgang mit Azubis sowie neue Angebote. Bei Interesse, tragen Sie sich einfach mit Ihrer E-Mail Adresse ein.