title: Bootstrap 4 progress bar is not showing up
body: <p>I'm building a table. A couple of the columns require a a progress bar, with a label column on each side. I'm generating this as a component with React, which results in the following HTML:</p>
  
  <pre><code>&lt;div class="d-flex flex-row justify-content-between"&gt;
      &lt;div class="d-flex flex-column justify-content-between" style="font-size: 0.8rem;"&gt;
          &lt;span&gt;Current&lt;/span&gt;
          &lt;span&gt;3.2&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="d-flex flex-column"&gt;
         &lt;div class="progress"&gt;
             &lt;div class="progress-bar w-75" role="progressbar" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100" style="width: 69%; background-color: rgb(52, 125, 241);"&gt;
             &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="d-flex flex-column  justify-content-between" style="font-size: 0.8rem;"&gt;
          &lt;span&gt;Day 120&lt;/span&gt;
          &lt;span&gt;4.6&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The progress bar does not render, either in my app or in Codepen.</p>
  
  <p>Without all of the surrounding HTML, the progress component renders fine. </p>
  
  <p>Here's a screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/1f7HX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1f7HX.png" alt="enter image description here"></a></p>
  
  <p>Here's the Codepen:</p>
  
  See the Pen <a href="https://codepen.io/BaruchKogan/pen/YeObdJ/" rel="nofollow noreferrer">Table cell with Bootstrap progress bar</a> by Baruch Kogan (<a href="https://codepen.io/BaruchKogan" rel="nofollow noreferrer">@BaruchKogan</a>) on <a href="https://codepen.io" rel="nofollow noreferrer">CodePen</a>.</p>
  
  
  
  <p>Does anyone understand what's going on and why?</p>