bs-stepper-line above label when inside div

[medeiroshudson]

I had to put some headers inside a DIV element to dynamically show/hide them. But when done, the bs-stepper-line element climbs over the label, as the picture below... Someone can help me with this CSS?

<div class="bs-stepper-header" role="tablist">

                    <div class="step" data-target="#escopoAnomalia">
                        <button type="button" class="step-trigger" role="tab" id="trigger1" aria-controls="test-nlf-1">
                            <span class="bs-stepper-circle">
                                <span class="fas fa-align-center" aria-hidden="true"></span>
                            </span>
                            <span class="bs-stepper-label">Escopo da Anomalia</span>
                        </button>
                    </div>

                    <div class="bs-stepper-line"></div>

                    <div class="step" data-target="#dadosAnomalia">
                        <button type="button" class="step-trigger" role="tab" id="trigger2" aria-controls="test-nlf-2">
                            <span class="bs-stepper-circle">
                                <span class="fas fa-book" aria-hidden="true"></span>
                            </span>
                            <span class="bs-stepper-label">Dados da Anomalia</span>
                        </button>
                    </div>

                    <div class="dadosAmbientais">
                        <div class="bs-stepper-line"></div>

                        <div class="step" data-target="#dadosAmbientais">
                            <button type="button" class="step-trigger" role="tab" id="trigger3" aria-controls="test-nlf-3">
                                <span class="bs-stepper-circle">
                                    <span class="fas fa-tree" aria-hidden="true"></span>
                                </span>
                                <span class="bs-stepper-label">Dados Ambientais</span>
                            </button>
                        </div>
                    </div>

                </div>

[Johann-S]

Hi @medeiroshudson,

Can you create a live demo of your problem?
You can do that via CodePen/JS Bin or Stackblitz and report back with your link.

[medeiroshudson]

Here is the CodePen:
https://codepen.io/medeiroshudson/pen/NWWNEKZ

In the example, bs-stepper-line dont event show when inside DIV Element... When its outside, shows like usually