CODEWITHSUNDEEP
htmltwitter-bootstrapcssbootstrap-4
Belial
Belial

Reputation: 668

How to show percentage of the progress bar on the left side of bar and outside of it? Bootstrap Progress Bar

I need to show percentage of the Bootstrap progress bar on the left side like this: enter image description here

Now I have this: enter image description here

My HTML:

            <span>76%</span>
            <div class="progress bar-wrapper">
                <div class="progress-bar skill-bar" role="progressbar" style="width: 76%"
                     aria-valuenow="76"
                     aria-valuemin="0" aria-valuemax="100">Photoshop
                </div>
            </div>

Any way I can put in on the left side outside the bar? Using Bootstrap 4

Upvotes: 0

Views: 2005

Answers (1)

Temani Afif
Temani Afif

Reputation: 272797

Simply create a flex container since you are using V4 of Bootstrap:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="d-flex align-items-center p-2">
  <span class="p-1">76%</span>
  <div class="progress bar-wrapper w-100 ">
    <div class="progress-bar skill-bar" role="progressbar" style="width: 76%" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100">Photoshop
    </div>
  </div>
</div>

Upvotes: 2

Related Questions