title: How can I have Bootstrap 4 progress bars side by side within two separate columns in the same container?
body: <p>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. <a href="https://i.stack.imgur.com/Ab6H6.jpg" rel="nofollow noreferrer">I've included an image of my issue here</a></p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>Unfortunately, these progress bars keep styling differently than I'd like.   </p>
  
  <p>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. <a href="https://i.stack.imgur.com/Wnow9.jpg" rel="nofollow noreferrer">Picture of what I'd like to achieve (photoshopped)</a></p>
  
  <p>Here's my current HTML: </p>
  
  <pre><code>&lt;section id= "about"&gt;
        &lt;h5 class="text-center pb-3"&gt;Ready to tackle any challenge. Proven by performance.&lt;/h5&gt;
        &lt;div class= "container"&gt;
            &lt;div class= "row justify-content-center"&gt;
               &lt;div class= "col-sm-12"&gt;
                 &lt;div class="progress w-25" style="height: 20px"&gt;
                    &lt;div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 50%"&gt;75%&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="progress w-25" style="height: 20px"&gt;
                      &lt;div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 50%"&gt;75%&lt;/div&gt;
                    &lt;/div&gt;
                     &lt;div class="progress w-25 float-right" style="height: 20px"&gt;
                    &lt;div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 50%"&gt;75%&lt;/div&gt;
                  &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>