CODEWITHSUNDEEP
twitter-bootstrap
Dom
Dom

Reputation: 3444

How to put a spinner near a text

I have this situation :

enter image description here

And I would like to have this (the spinner near the text):

enter image description here

I am using bootstrap 5 (beginner). My code is :

    <template>
  <div>
    <h1 class="mt-3">Organizations</h1>

    <span v-if="isLoading" class="spinner-border text-primary" role="status">
      <span class="visually-hidden">Loading...</span>
    </span>

I tried a lot of things without success : the spinner is always on a new line.

How to do ?

Upvotes: 3

Views: 1282

Answers (2)

Raishav Hanspal
Raishav Hanspal

Reputation: 111

Best solution would be to override the default h1 display property in css i.e. block to inline-block.

Just add a style attribute your h1 tag as below:

 <h1 style="display: inline-block;" class="mt-3">Organizations</h1>

display: block takes 100% width of the parent element and that's your issue.

Upvotes: 0

gavgrif
gavgrif

Reputation: 15499

This is occurring because the h1 element is a block level element and so forces the next element to be on a new line.

There are a number of ways to alter this - but the simplest is to either set the h1 to display: inline-block ....

<h1 class="mt-3 d-inline-block">Organizations</h1>

or the div wrapping them to display: flex...

  <div class="d-flex">
    <h1 class="mt-3">Organizations</h1>

    <span v-if="isLoading" class="spinner-border text-primary" role="status">
      <span class="visually-hidden">Loading...</span>
    </span>
  </div>

You should apply margin on the icon to space it away from the heading.

Upvotes: 4

Related Questions