Base styles

Inspired on http://semantic-ui.com/views/statistic.html

Single item

<div class="stat"> <div class="stat-value">123</div> </div>

Label above

<div class="stat"> <div class="stat-label">Starting from</div> <div class="stat-value">12<small>€</small></div> </div>

Label below

<div class="stat"> <div class="stat-value">42</div> <div class="stat-label">Crazy monkeys</div> </div>

Label above and below

<div class="stat"> <div class="stat-label">Starting from</div> <div class="stat-value">12</div> <div class="stat-label">Crazy monkeys</div> </div>

Horizontal

Label Right

<div class="stat stat-horizontal"> <div class="stat-label">Starting from</div> <div class="stat-value">12<small>€</small></div> </div>

Label Left

<div class="stat stat-horizontal"> <div class="stat-value">42</div> <div class="stat-label">Crazy monkeys</div> </div>

Label left and right

<div class="stat stat-horizontal"> <div class="stat-label">Starting from</div> <div class="stat-value">12</div> <div class="stat-label">Crazy monkeys</div> </div>

Sizes

Note: this can be used together with the sizes

Extra small

<div class="stat stat-xs"> <div class="stat-label">Starting from</div> <div class="stat-value">12</div> <div class="stat-label">Crazy monkeys</div> </div>

Small

<div class="stat stat-sm"> <div class="stat-label">Starting from</div> <div class="stat-value">12</div> <div class="stat-label">Crazy monkeys</div> </div>

Default

<div class="stat"> <div class="stat-label">Starting from</div> <div class="stat-value">12</div> <div class="stat-label">Crazy monkeys</div> </div>

Large

<div class="stat stat-lg"> <div class="stat-label">Starting from</div> <div class="stat-value">12</div> <div class="stat-label">Crazy monkeys</div> </div>

Contextual color variations

<div class="stat stat-primary"> <div class="stat-label">Starting from</div> <div class="stat-value">12</div> <div class="stat-label">Crazy monkeys</div> </div> <div class="stat stat-success"> <div class="stat-label">Starting from</div> <div class="stat-value">12</div> <div class="stat-label">Crazy monkeys</div> </div> <div class="stat stat-info"> <div class="stat-label">Starting from</div> <div class="stat-value">12</div> <div class="stat-label">Crazy monkeys</div> </div> <div class="stat stat-warning"> <div class="stat-label">Starting from</div> <div class="stat-value">12</div> <div class="stat-label">Crazy monkeys</div> </div> <div class="stat stat-danger"> <div class="stat-label">Starting from</div> <div class="stat-value">12</div> <div class="stat-label">Crazy monkeys</div> </div>

Inside a button

<a class="stat btn btn-default" href="#"> <span class="stat-value">12</span> <span class="stat-label">Crazy monkeys</span> </a> <a class="stat btn btn-primary" href="#"> <span class="stat-value">12</span> <span class="stat-label">Crazy monkeys</span> </a> <a class="stat btn btn-success" href="#"> <span class="stat-value">12</span> <span class="stat-label">Crazy monkeys</span> </a> <a class="stat btn btn-warning" href="#"> <span class="stat-value">12</span> <span class="stat-label">Crazy monkeys</span> </a> <a class="stat btn btn-danger" href="#"> <span class="stat-value">12</span> <span class="stat-label">Crazy monkeys</span> </a>