Save up to $400 Off - Ends August 5
Contained Container: .container > .row > .col
Fluid Container: .container-fluid > .row > .col

HTML

Every html element in one place.

Site title

Headings & Copy

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Header h1 secondary text wrapped in small tertiary text wrapped in span

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos.

Header h2 secondary text wrapped in small tertiary text wrapped in span

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header h3 secondary text wrapped in small tertiary text wrapped in span

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Header h4 secondary text wrapped in small tertiary text wrapped in span

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

Header h5 secondary text wrapped in small tertiary text wrapped in span

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Header h6 secondary text wrapped in small tertiary text wrapped in span

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos.

Developer Added Section - *Developer Name*


Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Generic span wrapper

HTML ABBR tag

This is inline text with subscript and superscript elements.

f(x) = a0 + a1x + a2x2, where a2 ≠ 0

Developer Added Section - *Developer Name*


Links

Sample text link Sample button link

Links Styled Buttons - A elements

.btn Primary Secondary Success Danger Warning Info Light Dark Link

Links Styled Buttons - Button elements

Global Button tags

Link

Developer Added Section - *Developer Name*


Lists

Unordered list - Unstyled

  • Orange
  • Apple
  • Rhubarb
  • Rasberry
  • Blueberry
  • Cherry

Unordered list - Inline (.list-inline)

  • .list-inline-item
  • .list-inline-item
  • .list-inline-item

Ordered list

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth

Definition list

Kick
808
Snare
909
Maine
Augusta
California
Sacremento
Oregon
Salem
New York
Albany
Ascender
The part of certain lowercase letters that extends above the x-height of a font.
Font
Traditionally, a complete set of characters for one typeface at one particular type size. Often used more loosely as a synonym for "typeface".
Golden Section
The ideal proportion according to the ancient Greeks. It is visualized as the division of a line into two unequal segments in such a way that the ratio of the smaller segment to the larger segment is equal to the ratio of the larger to the whole. It is usually defined as 21:34, that is, 21/34 and 34/(21+34) both equal approximately 0.618. A rectangle whose sides are of this proportion is called a "golden rectangle". Golden rectangles can be found in the proportions of the Parthenon and many medieval manuscripts.

Developer Added Section - *Developer Name*

Forms

Legend Example

Helper text if necessary.

Error messages when appropriate.

Developer Added Section - *Developer Name*

Buttons


An Example Article

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a GREAT pull quote.

- Author

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Developer Added Section - *Developer Name*


Code examples

      sudo ipfw pipe 1 config bw 256KByte/s
      sudo ipfw add 1 pipe 1 src-port 3000
      

Developer Added Section - *Developer Name*


Footer

Developer Added Section - *Developer Name*

Progress Bars

80 %

We are this close to the goal: $824.

Figure Example
Photo of the sky at night. Original by @mrmrs
            /Sites/html master  ☠ ☢
            $  ls -gto

            total 104
            -rw-r--r--   1   10779 Jun  5 16:24 index.html
            -rw-r--r--   1    1255 Jun  5 16:00 _config.yml
            drwxr-xr-x  11     374 Jun  5 15:57 _site
            -rw-r--r--   1    1597 Jun  5 14:16 README.md
            drwxr-xr-x   5     170 Jun  5 14:15 _sass
            -rw-r--r--   1     564 Jun  4 15:59 Rakefile
            drwxr-xr-x   6     204 Jun  4 15:59 _includes
            drwxr-xr-x   4     136 Jun  4 15:59 _layouts
            drwxr-xr-x   3     102 Jun  4 15:59 _resources
            drwxr-xr-x   3     102 Jun  4 15:59 css
            -rw-r--r--   1    1977 Jun  4 15:59 favicon.icns
            -rw-r--r--   1    6518 Jun  4 15:59 favicon.ico
            -rw-r--r--   1    1250 Jun  4 15:59 touch-icon-ipad-precomposed.png
            -rw-r--r--   1    2203 Jun  4 15:59 touch-icon-ipad-retina-precomposed.png
            -rw-r--r--   1    1046 Jun  4 15:59 touch-icon-iphone-precomposed.png
            -rw-r--r--   1    1779 Jun  4 15:59 touch-icon-iphone-retina-precomposed.png
          

Tables

From the HTML spec (http://www.w3.org/TR/html401/struct/tables.html) TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data. The following summarizes which tags are required and which may be omitted: The TBODY start tag is always required except when the table contains only one table body and no table head or foot sections. The TBODY end tag may always be safely omitted. The start tags for THEAD and TFOOT are required when the table head and foot sections are present respectively, but the corresponding end tags may always be safely omitted. Conforming user agent parsers must obey these rules for reasons of backward compatibility.

This is a caption for a table
ID Name Date Address
Table footer info
#999-32ac First Name 13 May, 2013 999 Spruce Lane, Somewhere, CA 94101
#888-32dd Sample Name 17 May, 1984 999 Spruce Lane, Somewhere, CA 94101

Footer

Developer Added Section - *Developer Name*