CODEWITHSUNDEEP
htmlcssprogress-bar
Mike
Mike

Reputation: 379

How to make bootstrap progress bar text independent to the colored part?

Using the bootstrap progressbar, as you can see in the images inside the link, the text inside the bar moves with the width of the colored part.

Is there a way to change this setting such that the text could be centered in regards to the whole horizontal bar (colored and white colored part altogether)?

Upvotes: 0

Views: 786

Answers (1)

masoudmanson
masoudmanson

Reputation: 748

You can do it like this 

var progressBarText = $('.progress-bar').html();

$('.progress-bar').html('');

$('.progress').append('<div class="progress-bar-text">' + progressBarText + '</div>');
.progress {
  position: relative;
}

.progress-bar-text {
  position: absolute;
  width: 100%;
  text-align: center;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Progress Bar With Label</h2>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">
      30%
    </div>
  </div>
</div>

Upvotes: 4

Related Questions