This is H1 on Featured LG

Using the vertical-align class for align awesomeness

  1. Breadcrumbs Root
  2. Branch
  3. Leaf

Heading H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis sem a turpis suscipit, pharetra fringilla neque porta. Sed auctor tristique sapien.

Wide Buttons

You can make anything wide by using the class width-full, here I'm using it on the button tag, after btn and btn-default.

Heading H2

The transparent icon on the right of the title is added by using the class title-icon, next to the icon class itself. Something like.

Squishy Buttons

Make any button tag look like you can press it by adding the btn-squishy class to it (after btn and btn-default).

Heading H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis sem a turpis suscipit, pharetra fringilla neque porta. Sed auctor tristique sapien.

This Box has 'Backicon'

That thingie on the bottom-right, is a class applied to the i tag called 'backicon'. You can also use it on the featured box on top.

Visibility Stuff

Visible and Hidden are awesome classes on Bootstrap. visible-*size* is only shown for a specific size. While hidden-*size* is shown always except the specific size.

This text should change colors on every size too.

Visible XS

Visible SM

Visible MD Hidden MD

Visible LG

Labels

The label class applied to a span will look like below. Additionally you can have label-*status* and label-2x for labels with text 100% size (regular labels are 90%)

label-info

label-info label-2x

label-danger

label-danger label-2x

label-warning

label-warning label-2x

label-success

label-success label-2x

Game of Buttons

You can have different kinds of buttons by adding btn btn-default and one of the following classes.

Success

Just add btn-success.
Go for it Sure Disabled

Danger

Same here, add btn-danger.
Nope Nopity nope Disabled

Warning

This time, btn-warning.
I've got an info icon I've got an info-circle icon Disabled

Info

You guess right, btn-info now.
I've got an info icon I've got an info-circle icon Disabled

Here be Lists

Defaults

This ul below doesn't have any special class.

  • The
  • Defaultest
  • List
  • Ever

Nothing special really.

Special Classes

This ul has the list-bullets-check class.

  • Super Clean
  • Defaultest

This one instead has list-bullets-none and list-margin-none so is nice aligned.

  • Super Clean
  • Defaultest

Listception

Lists can be nested, ul's inside li's.

  • This is alright, just a li
  • This one here too.
  • But this one instead, has a ul inside.
    • Hey there
    • I'm nested
    • My icon changed and got offset a bit.
  • Back to normal.

Special

This is a blockquote. Nothing interesting to add.

Here be Tables

The table below has a class called table-striped for odd-even colors, table-hover for mouse over effects, and box for the nice white background and overall box effect we already use elsewhere. They can also have status classes on their "tr" such as success, or danger.

Here Will be A whole bunch Of pretty awesome Stuff
This row doesn't have any class
This row doesn't have any class
This row doesn't have any class
This row has thetable-row-link class So it looks like a link
This row has the info class
This row has the danger class

Tabs!

The tabs below are inside a box class.

First Tab

Tab Twee

Solapa Tres

Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.

Formity Forms

You can also add a disabled class to the input-group.

Warn about warnings!!!

  • Sorry, this field looks too awesome
  • Can't hear you over the beauty of this field

Interactives

Just include the interactive JS file. <script src="js/interactive.js"></script>

Card Flip Effect

Just add the class flip-it to anything

It's alright to have an empty background too

Business in the front

Animations

Some simple CSS3 animations are included as well.

Blink

Simply by adding the class blink, it will make the content fade in and out in a lapse of 2 seconds. Additionally, to blink you can attach the classes slow (6s), fast (1s), slowest (12s) and fastest (0.5s).
blink slowest
blink slow
blink fast
blink fastest