Search code examples
htmlprogress-barbootstrap-5

Why doesn't a different entry (eg w-70) of progress in Bootstrap than w-25, w-50, w-75 and w100 work and how to achieve it?

I'm making progress (using <div>) in Bootstrap and I wanted to make progress with 70%. But when I set w-70, the value drops to about 5%. It doesn't even work for example w-45, etc. only w-25, w-50, w-75 and w-100.

My code:

<div class="progress">
     <div class="progress-bar w-70 bg-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
</div>

I also looked in the Bootstrap documentation and everywhere there are examples of only, for example, 75%. But I need to set w-70, how do I achieve this?

Solution

  • Bootstrap provides utilities for setting width: .w-25, .w-50, .w-75, .w-100 and .w-auto. There are no intermediate utilities like .w-70.

    But you can achieve it:

    • by using style="width: 70%" instead of a class.
    • by creating only the .w-70 class manually in CSS and setting it to width: 70%.
    • by creating a set of utilities thanks to the Utility API.