Thinner Bootstrap progress bars?

Question

How can I make the progress bars thinner with Bootstrap 3.0? I'm thinking how the YouTube like/dislike meter looks (the blue bar). I've tried searching for any CSS tricks but could not find anything.

Answer 1

As easy as doing this:

.progress {height: 10px;} 

See: Reduce the height of progress bar

Extra, if you want to show the text inside the progress bar:

.progress {height: 20px;} // we increased it so the text is visible or change font size .progress .sr-only { position: relative; } 

See: Show text inside progress bar

Answer 2

Shina is right, I just would like to add, it may be in some cases necessary to add the !important command to make the change apply over the already set parameter of the "progress" class, like this:

.progress {height: 10px !important;}