CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Hitesh Chauhan
Hitesh Chauhan

Reputation: 1064

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>

Upvotes: 0

Views: 707

Answers (1)

Amaresh S M
Amaresh S M

Reputation: 3010

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>

Upvotes: 2

Related Questions