CODEWITHSUNDEEP
texttwitter-bootstrapprogress-baralignmentvertical-alignment
Haradzieniec
Haradzieniec

Reputation: 9340

Twitter Bootstrap progress bar with text in hero-unit is not displayed properly

I have a problem with a standard Twitter Bootstrap progress bar with some text if it is within <div class="hero-unit">, also standard Twitter Bootstrap class:

<div class="hero-unit">
<div class="container">
    <div class="progress progress-striped active">
        <div class="bar" style="width: 80%;">80%</div>
    </div>
</div>
</div>
​

Here is a jsFiddle code, that shows the text is not aligned properly. Why this is happening and how to fix? I've tried to fix it but had no luck.

Thank you.

Upvotes: 0

Views: 1302

Answers (1)

asgoth
asgoth

Reputation: 35829

It is the line-height: 30px on hero-unit which causes the problem.

I've change the code like this:

<div class="hero-unit" style="line-height: inherit">

Of course it is better to assign a class to it, instead of using the style attribute.

Upvotes: 1

Related Questions