Counters

Counters animate a number from a starting value up to a target when they scroll into view, great for stats like customers served, projects done, or downloads. The .counter wrapper holds a <span> whose data-* attributes drive the animation, and an optional <h5> caption sits directly after it.

Structure

.counter : the wrapper element around the animated <span>.
.counter-small, .counter-large, .counter-xlarge : font-size modifiers for the number.
.counter-inherit : inherits the surrounding font size and weight.
.counter-lined : adds a short underline rule beneath the caption <h5>.
<h5> : an optional caption placed immediately after the .counter wrapper.

The <span> reads these data attributes (handled by the counter module):

data-from : starting number (defaults to 0).
data-to : target number to count up to.
data-speed : animation duration in milliseconds.
data-comma : set to true to group digits with a separator.
data-sep : the grouping/separator character (for example . or ,).
data-places : number of decimal places to show.
data-decimals : number of decimals in the value.

Markup

<div class="counter"><span data-from="100" data-to="8465" data-speed="2000"></span></div>

Variants

Counter with a caption

Place an <h5> right after the .counter wrapper. Append a symbol like + after the <span> if needed.

<div class="counter"><span data-from="100" data-to="4465" data-speed="2000"></span>+</div>
<h5 class="mb-0 text-smaller text-black-50">Happy Customers</h5>

Small counter

<div class="counter counter-small"><span data-from="100" data-to="2154" data-speed="3500"></span></div>

Formatted number with separator and decimals

<div class="counter"><span data-from="1" data-to="100" data-speed="1200" data-comma="true" data-sep="." data-places="2"></span></div>

Tips

The animation triggers automatically when the counter scrolls into view, so no extra script call is needed.
Use data-comma="true" with data-sep to format large numbers like 95/100 or 1.000.
Keep the caption <h5> as the immediate next sibling of .counter so the sizing and .counter-lined underline line up.

Was this page helpful?