Bootstrap 4 progress bar is not showing up

Question

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:

<div class="d-flex flex-row justify-content-between">
    <div class="d-flex flex-column justify-content-between" style="font-size: 0.8rem;">
        <span>Current</span>
        <span>3.2</span>
    </div>
    <div class="d-flex flex-column">
       <div class="progress">
           <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);">
           </div>
        </div>
    </div>
    <div class="d-flex flex-column  justify-content-between" style="font-size: 0.8rem;">
        <span>Day 120</span>
        <span>4.6</span>
    </div>
</div>

The progress bar does not render, either in my app or in Codepen.

Without all of the surrounding HTML, the progress component renders fine.

Here's a screenshot:

Here's the Codepen:

See the Pen Table cell with Bootstrap progress bar by Baruch Kogan (@BaruchKogan) on CodePen.

Does anyone understand what's going on and why?

Answer 1

This is a flexbox issue, not a problem with the progress bar.

In order for the flexbox children of the parent d-flex flex-row container to fill across, a width needs to be set on the children. You can use w-100 to set width:100%, or use flex-grow:1.

Problem fixed: https://www.codeply.com/go/kU7OwwmM2I

<div class="d-flex flex-row justify-content-between">
    <div class="d-flex flex-colum justify-content-between" style="font-size: 0.8rem;"><span>Current</span><span>3.4</span></div>
    <div class="d-block w-100">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100" style="width: 83%; background-color: rgb(52, 125, 241);"></div>
        </div>
    </div>
    <div class="d-flex flex-column  justify-content-between" style="font-size: 0.8rem;"><span>Day 120</span><span>4.1</span></div>
</div>

Note: if you want all 3 children to fill equally use w-100 on all of them, like on this fork of your codepen

---

A simpler Bootstrap 4 friendly approach is to use the grid, which requires far less markup. The row is display:flex, and the col are flex-grow:1...

<div class="row">
    <div class="col" style="font-size: 0.8rem;"><span>Current</span><span>3.4</span></div>
    <div class="col">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100" style="width: 83%; background-color: rgb(52, 125, 241);"></div>
        </div>
    </div>
    <div class="col" style="font-size: 0.8rem;"><span>Day 120</span><span>4.1</span></div>
</div>

Better approach: https://www.codeply.com/go/WFpkiDsJgW

Answer 2

It's because you've added lots of d-flex classes.

Remove d-flex and the progress bar will show up.

Use normal Bootstrap columns instead of d-flex divs.