Search code examples
htmlcssbootstrap-4progress-barstyling

Questions about customizing bootstrap progress bar

First question: In my Bootstrap progress bar, I added a label to show the status of the bar. However, bootstrap centers the text by default, but I want it to float right, and be right next to the end of the progress bar. I've tried putting the text in an h6 tag, then styling it with float: right, however that didn't seem to change anything. So, how can I float the text right?

Second question: I also want to be able to change the color of the bar, but have it still have the stripe and animation that Bootstrap does. Is there some way to do this or no? So ideally, the bar could be like purple or something, but still be striped and show the animation.

Below is the picture of what I'm currently working with, if it helps at all: Here

Here's the code I'm using to make the above:

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 76%">
        <h6 style="font-weight: thin; font-size: 13px;">Complete!</h6>
    </div>
</div>

Thanks in advance!

Solution

  • float: right; is not working because the progress-bar uses flexbox property.

    Try align-self: flex-end; on your <h6> tag.

    .progress-bar {
  background-color: purple !important;
}
    <html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  </head>
  <body>
    <div class="progress">
           <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 76%">
               <h6 style="font-weight: thin; font-size: 13px; align-self: flex-end;">Complete!</h6>
            </div>
    </div>
  </body>
</html>