How can I change color of bootstrap progress bar with custom color

Question

How can I change the color of a Bootstrap progress bar without losing the text? I have seen this answer :

$('#pb').css({
    'background-image': 'none',
    'background-color': 'red'
});

It works, but I lose any text in the progress bar.

Answer 1

Using Bootstrap 3.2.0, you can do something like the following:

 $(function() { $("#one").addClass("progress-bar-purple"); $("#two").addClass("progress-bar-orange"); }); 

 .progress-bar-purple { background-color: purple !important; } .progress-bar-orange { background-color: orange !important; } 

 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <br/> <div class="progress"> <div id="one" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div> <div class="progress"> <div id="two" class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> 80% </div> </div> 

Answer 2

Simplest thing you can do is...

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:10%; background-color:red !important;">
    </div>
</div>

mention style="width:10%; background-color:red !important;" in progress-bar div

put any color instead of red...

Answer 3

These two lines are directly from the Bootstrap CSS

.progress-bar {
    background-color: #007bff;
}

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

Simply use these in your html, between <style></style> or in a css-file that you load after you load bootstrap.css

Answer 4

If you are using bootstrap sass, it has a mixin that you can include like this:

.progress {
  @include progress-bar-variant(#000);
}

Answer 5

It is possible that bootstrap in the year in which the question was asked was different, but now you have the possibility to add bootstrap classes that provide the color.

 .progress{ margin:10px; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <!-- Normal --> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <!-- Striped --> <div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <!-- Animated stripes --> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div> 

There are a variety of colors which you can find here , and you will find colors for the text and for the background.