CODEWITHSUNDEEP
cssbootstrap-4
Matius Nugroho Aryanto
Matius Nugroho Aryanto

Reputation: 901

Put text under a spinner bootstrap

I am using bootstrap 4.3 spinner, all working well but i want to put additional text under the spinner. Here is my 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>

But the text "collecting data" is appending on the spinner, how can i fix this?

Upvotes: 4

Views: 11256

Answers (2)

Tharaka Arachchige
Tharaka Arachchige

Reputation: 807

Problem is when you define your wrapping div class as display:flex it stack the inside elements as a columns.

<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 class will remove minus borders form row and justify-content-center will centered the items inside row

Demo Code Pen

Upvotes: 3

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

Add these two classes to the container div:

flex-column align-items-center

flex-column makes the flexbox stack vertically and align-items-center centers the items on the new axis.

<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>

Upvotes: 14

Related Questions