CODEWITHSUNDEEP
twitter-bootstrapprogress
user2019594
user2019594

Reputation: 353

Thinner Bootstrap progress bars?

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.

Upvotes: 27

Views: 33515

Answers (4)

HDP
HDP

Reputation: 4221

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/[email protected]/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>

Upvotes: 5

Guimaraesmvf
Guimaraesmvf

Reputation: 1

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.

Upvotes: -3

Shina
Shina

Reputation: 2066

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

Upvotes: 47

JCO9
JCO9

Reputation: 990

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

Upvotes: 6

Related Questions