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;}

Answer 3

You can create .progress-sm(Small progress) and .progress-lg (Large progress) css custom class in your stylesheet according to following and then use it's easily.

.progress-sm{
  height: 0.5rem !important;
}
.progress-lg{
  height: 1.5rem !important;
}

For Small

<div class="progress progress-sm">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

For Default

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

For Large

<div class="progress progress-lg">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

.progress-sm {
  height: 0.5rem!important;
}

.progress-lg {
  height: 1.5rem!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<h5>For Small</h5>
<div class="progress progress-sm">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<h5>For Default</h5>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<h5>For Large</h5>
<div class="progress progress-lg">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Answer 4

You could just also use:

<div class='.progress-sm'> ...your code ... </div>

I believe it is the best solution, since you'll use a bootstrap class.