Поместите текст под загрузчик блесны

Question

Я использую вращатель bootstrap 4.3, все работает хорошо, но я хочу поместить дополнительный текст под счетчик.Вот мой HTML

<div class="d-flex justify-content-center">
       <div class="row">
           <div class="spinner-border" role="status">
               <span class="sr-only">Loading...</span>
            </div>
         </div>
        <div class="row">
            <strong>Collecting data</strong>
        </div>
                            
    </div>

Но текст "Сбор данных" добавляется на счетчик, как я могу это исправить?

Answer 1

Добавьте эти два класса в контейнер div:

flex-column align-items-center

flex-column делает стек flexbox вертикально, а align-items-center центрирует элементы на новой оси.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column align-items-center justify-content-center">
   <div class="row">
       <div class="spinner-border" role="status">
           <span class="sr-only">Loading...</span>
       </div>
    </div>
    <div class="row">
      <strong>Collecting data</strong>
    </div>
</div>

Answer 2

Проблема в том, что когда вы определяете свой класс div для обёртывания как display:flex, он складывает внутренние элементы в виде столбцов.

<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="spinner-border" role="status">
         <span class="sr-only">Loading...</span>
    </div>
  </div>
  <div class="row justify-content-center">
    <strong>Collecting data</strong>
  </div>
</div>

container класс удалит минус границы формы строки, а justify-content-center будет центрированэлементы в ряду

Демонстрационный код Pen