flati | responsive html5 template | themeforest | josweb

# Style

# Shortcodes & Illustrations

# Handy shortcodes and a set of scalable vector illustrations kindly provided by DesignModo.

# Buttons

| `btn btn-primary`
| `btn btn-info`
| `btn btn-success`
| `btn btn-warning`
| `btn btn-danger`
| `btn btn-inverse`

### button sizes

Button styles can be applied to anything with the `.btn` class applied. However, typically you'll want to apply these to only `<a>` and `<button>` elements.

Add `.btn-large`, `.btn-small`, or `.btn-mini`.

### inline labels

Labels | Markup
--- | ---
Success | `<span class="label label-success">Success</span>`
Warning | `<span class="label label-warning">Warning</span>`
Important | `<span class="label label-important">Important</span>`
Info | `<span class="label label-info">Info</span>`
Inverse | `<span class="label label-inverse">Inverse</span>`

### badges

Name | Example | Markup
--- | --- | ---
Success | 2 | `<span class="badge badge-success">2</span>`
Warning | 4 | `<span class="badge badge-warning">4</span>`
Error | 6 | `<span class="badge badge-important">6</span>`
Info | 8 | `<span class="badge badge-info">8</span>`
Inverse | 10 | `<span class="badge badge-inverse">10</span>`

## Scalable Vector Icons - Provided by DesignModo

### alerts

× Warning! Best check yo self, you're not looking too good.
× 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.

### image styles

    <img src="..." class="img-rounded">
    <img src="..." class="img-circle">
    <img src="..." class="img-polaroid">

### progress bar

    <div class="progress">
    <div class="bar"
    style="width: 60%;"></div>
    </div>

### pagination

- «
- 1
- 2
- 3
- 4
- »

### pagers

The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.

Pager links also use the general `.disabled` class from the pagination.

- Previous
- Next

    <ul class="pager">
      <li>
        <a href="#">Previous</a>
      </li>
      <li>
        <a href="#">Next</a>
      </li>
    </ul>

- ← Older
- Newer →

    <ul class="pager">
      <li class="previous">
        <a href="#">&larr; Older</a>
      </li>
      <li class="next">
        <a href="#">Newer &rarr;</a>
      </li>
    </ul>

### table

Get a little fancy with your tables by adding zebra-striping—just add the `.table-striped` class.

    <table class="table table-striped">
    </table>

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

FLATI ©
- All Rights Reserved : Template by Spiral Pixel