1

I am having a lot of difficulty controlling the placement of native Bootstrap 4 progress bars. It appears that Bootstrap's progress bars are are Flexbox based components which are really confusing me. I've included an image of my issue here

In my current code, I have a container, which inside of it has a row, which contains multiple progress bars. What I am trying to do is to create 2 separate stacks of progress bars. They should be centered horizontally and not touching as is also happening in the image.

I have tried many different ways of playing around with the CSS and my ordering in the HTML, including modifying the the .progressbar class with 'flex-direction: row' instead of column but still nothing. I also tried using two 2 columns within the row to see if that would work, idea being that I would create separate stacks of progress bars within each of the two columns and that the progress bars' widths would be constrained to the column they were in.

Unfortunately, these progress bars keep styling differently than I'd like.

At the moment, it appears that the progress bar component perhaps because of it's Flexbox nature, does not like to be constrained to a container? Also, with my current code, the progress bars from the "left" stack are touching the ones on the "right" stack (no space between them), and they are not inline. They are wanting to stack on top of each other, even though I've tried float-left and float-right. Picture of what I'd like to achieve (photoshopped)

Here's my current HTML: 

<section id= "about">
      <h5 class="text-center pb-3">Ready to tackle any challenge. Proven by performance.</h5>
      <div class= "container">
          <div class= "row justify-content-center">
             <div class= "col-sm-12">
               <div class="progress w-25" style="height: 20px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 50%">75%</div>
                </div>
                <div class="progress w-25" style="height: 20px">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 50%">75%</div>
                  </div>
                   <div class="progress w-25 float-right" style="height: 20px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 50%">75%</div>
                </div>
          </div>
Joseph Romo
  • 153
  • 3
  • 13

1 Answers1

0

It is true that progress bars in Bootstrap 4 are flexbox based. But they are normally well-behaved.

The individual progress bar components were a bit messed up in your code.

To add a bit of spacing between them you use the mb-* class which is the native Bootstrap 4 class for adding margin-bottom. I used mb-2 to add 2 units of margin to the bottom.

The main task then becomes to manipulate the Bootstrap grid to produce the desired look at various breakpoints. I decided to go with this in my example:

First column: col-12 col-md-6 col-lg-5 offset-lg-1

Second column: col-12 col-md-6 col-lg-5

Translation: On the smallest screens (col) both columns are gonna go full width. On medium screens (col-md-*) they are gonna split in half (6 units out of 12). On large screens (col-lg-*) they'll take up only 5 units each (5 units out of 12) AND on large screens, there's also gonna be an offset of 1 unit (offset-lg-1). In other words, one unit is gonna be left empty on large screens and the rest is gonna automatically center. That's it!

Here's the code: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<section id="about">
    <h5 class="text-center pb-3">Ready to tackle any challenge. Proven by performance.</h5>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-5 offset-lg-1">
                <div class="progress mb-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
                <div class="progress mb-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
                <div class="progress mb-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-5">
                <div class="progress mb-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
                <div class="progress mb-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
            </div>
        </div>
    </div>
</section>
WebDevBooster
  • 14,674
  • 9
  • 66
  • 70