CSS

Есть 8 блоков:

<div class="three columns">

            <h4>Title</h4>

            <p>Text.</p>

            </div>

Задача в тег <h4><h4/> добавить цифры. Т.е. вот так. Всего нужно сделать 8 таких блоков, как это реализовать?

Вот тут так реализовали

CSS

.ol-type1{  counter-reset: li; margin-left: 5px; padding-left: 0; margin-top:20px;}

.ol-type1 > li { color: #999999; list-style: none outside none;  margin: 0 0 20px 20px; padding: 4px 8px 4px 30px;  position: relative;}

.ol-type1 > li:before{   -moz-box-sizing: border-box; color: #FFFFFF; content: counter(li, decimal);  counter-increment: li;  font-size: 24px; left: -1em;  margin-right: 8px;   position: absolute; text-align: center; width: 36px;}

HTML

<ol class="ol-type1">

<li>Regural label can be achived by adding the class <em><strong>.label</strong></em> to any element.</li>

<li>Secondary label it***8217;s done by adding the class <em><strong>.label</strong></em> and <em><strong>.secondary</strong></em>.</li>

<li>Alert label can be achived by adding the class <em><strong>.label</strong></em> and <em><strong>.alert</strong></em> to any element.</li>

<li>Success label like the others above. Use <em><strong>.label</strong></em> and <em><strong>.success</strong></em> to achive this.</li>

<li>Morbi gravida volutpat suscipit. Ut ultrices ullamcorper elementum.</li>

</ol>

Но это получается нумерованный список, а мне нужно эти цифры добавить в тег B]<h4><h4/>

Как это реализовать?