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>

Asked on July 16, 2020 in CSS.
Add Comment
1 Answer(s)

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>

Answered on July 16, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.