Невозможно отобразить степпер Bootstrap 5 в Django

У меня проблема с тем, чтобы функция Bootstrap степпера с ванильным вкусом отображалась правильно в Django, и я задался вопросом, может быть, я что-то упускаю. Другие элементы Bootstrap, такие как оповещения, работают нормально.

Ни одно из форматирований для шага не подхватывается, и я просто получаю текст, отображаемый вертикально, например, следующим образом, без буллитов

• 01 Основная информация
• 02 Персональные данные
• 03 Положения и условия
• 04 Завершение
• Шаг 1
• Этап 2
• Шаг 3
• Шаг 4

У меня есть Base html, где есть Bootstrap cdns.

e.g.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" 
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Я хочу отобразить степпер в index.html, который расширяет base.html.

Внутри div с class="container-fluid" у меня есть еще один div, в который я вставил стандартный код горизонтального степпера, т.е.

    <div class="row mt-4">
            <p>
                <div height="800px" class="stepper" id="stepper2">
                  <div class="steps-container">
                    <div class="steps">
                      <div class="step" icon="fa fa-pencil-alt" id="1">
                        <div class="step-title">
                          <span class="step-number">01</span>
                          <div class="step-text">Basic Information</div>
                        </div>
                      </div>
                      <div class="step" icon="fa fa-info-circle" id="2">
                        <div class="step-title">
                          <span class="step-number">02</span>
                          <div class="step-text">Personal Data</div>
                        </div>
                      </div>
                      <div class="step" icon="fa fa-book-reader" id="3">
                        <div class="step-title">
                          <span class="step-number">03</span>
                          <div class="step-text">Terms and Conditions</div>
                        </div>
                      </div>
                      <div class="step" icon="fa fa-check" id="4">
                        <div class="step-title">
                          <span class="step-number">04</span>
                          <div class="step-text">Finish</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="stepper-content-container">
                    <div class="stepper-content fade-in" stepper-label="1">
                      <div>Step 1</div>
                    </div>
                    <div class="stepper-content fade-in" stepper-label="2">
                      <div>Step 2</div>
                    </div>
                    <div class="stepper-content fade-in" stepper-label="3">
                      <div>Step 3</div>
                    </div>
                    <div class="stepper-content fade-in" stepper-label="4">
                      <div>Step 4</div>
                    </div>
                  </div>
                </div>

            </p>
        </div>

Внизу index.html у меня есть следующий код:

<script src="/build/constrast-bootstrap-pro/js/cdb.js"></script>
    <script>
      const stepper = document.querySelector('#stepper');
      new CDB.Stepper(stepper);
    </script>

Если кто-то может предложить какие-то предложения, я буду благодарен.

Вернуться на верх