how to put text in front and back in bootstrap progress bar?
I wants to add text in front and back in the bootstrap progress bar like this
5 star ———————————————– 70%
I am trying to achieve this like
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <div class="progress-1 d-flex flex-row align-items-center"> <div class="stars"> <span>5 <i class="fa fa-star"></i></span> </div> <div class="progress" style="height: 3px;"> <div class="progress-bar bg-success" role="progressbar" style="width: 5%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="percent"> <span>70%</span> </div> </div>
I hope this is what u r expecting.
Just wrap the progress div
inside col div
. change .stars div
and .percent
element to span elements
.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://use.fontawesome.com/027b364b90.js"></script> <div class="d-flex align-items-center"> <span class="stars"> <span>5 <i class="fa fa-star"></i></span> </span> <div class="col"> <div class="progress" style="height: 3px;"> <div class="progress-bar bg-success" role="progressbar" style="width: 5%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <span class="percent"> <span>70%</span> </span> </div>