Boilerplate

# This is H1 on Featured LG

# 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 Hidden XS

## Visible SM Hidden SM

## Visible MD Hidden MD

## Visible LG Hidden 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 the`table-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

#### Collapsible Group Item #1

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

#### Collapsible Group Item #2

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

#### Collapsible Group Item #3

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

Label for full width input
Field with button on the right

This is just input-group, not large
Video Example

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

Video Example (disabled)

Warn about warnings!!!

Image Upload
Select the fastest render engine ever
Banana

Long stuff go in textareas

This is a checkbox with input-group
This one has input-group and input-group-lg
Bunch of inputs on top of each other

- Sorry, this field looks too awesome

City

- Can't hear you over the beauty of this field

# 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`