Нужна помощь с разметкой Uikit2

[Иван Кузьмич]

Здравствуйте
Подскажите пожалуйста,как мне вставить правильно перед каждым progress-bar текст?

<p><span style="color: #33cccc;"><strong>PHP</strong></span></p>
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 97%;">97%</div>
</div>
<p><strong><span style="color: #33cccc;">MySQL</span></strong></p>
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 83%;">83%</div>
</div>
<p><span style="color: #33cccc;"><strong>CSS</strong></span></p>
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 68%;">68%</div>
</div>

И надо бы каждый бар сделать разными цветами
Спасибо

 

[Иван Кузьмич]

Нашёл самостоятельно ответ на свой же вопрос

<div class="uk-grid">
<div class="uk-width-1-5"><span style="color: #33cccc;"><strong>Текст</strong></span></div>
<div class="uk-width-4-5">
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 97%;">97%</div>
</div>
</div>
<div class="uk-width-1-5"><span style="color: #ff6600;"><strong>Текст</strong></span></div>
<div class="uk-width-4-5">
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 83%;">83%</div>
</div>
</div>
<div class="uk-width-1-5"><span style="color: #3366ff;"><strong>Текст</strong></span></div>
<div class="uk-width-4-5">
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 68%;"><span style="color: #ffffff;">68%</span></div>
</div>
</div>
<div class="uk-width-1-5"><span style="color: #ff00ff;"><strong>Текст</strong></span></div>
<div class="uk-width-4-5">
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 82%;"><span style="color: #ffffff;">82%</span></div>
</div>
</div>
<div class="uk-width-1-5"><span style="color: #99cc00;"><strong>Текст</strong></span></div>
<div class="uk-width-4-5">
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 57%;"><span style="color: #ffffff;">57%</span></div>
</div>
</div>
</div>

А вот над цветом пока не решил вопрос

 

[Иван Кузьмич]

А вот над цветом пока не решил вопрос

Перед uk-progress ставим на выбор:
uk-progress-success
uk-progress-warning
uk-progress-danger

Результат