Search code examples
htmlbuttonbootstrap-4alignment

HTML with Bootstrap: button right aligned and a div centered in a new line

In my web page (using Bootstrap) I need to display a button right aligned and a spinner centered IN A NEW LINE.

But I get the spinner in the same line, centered in the rest of the line...

My code:

<div>
  <button type="button" class="btn btn-primary mt-4 float-right">Text</button>
</div>  

<div class="text-center mt-4">
  <div class="spinner-border" role="status"></div>
</div>

What am I doing wrong?

Thanks,

Diego

Solution

  • You can make use of Bootstrap's grid system and define two rows with a full-width column. I moved the margin-top mt-4 to the second .row in order to give that margin to the full row.

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      <button type="button" class="btn btn-primary mt-4 float-right">Text</button>
    </div>
  </div>
  <div class="row mt-4">
    <div class="col text-center">
      <div class="spinner-border" role="status"></div>
    </div>
  </div>  
</div>

    In order to place your <button> to the full right, just remove the <div class="container">. Please read this for more information.

    Of course, there are several other options to receive the desired result, e.g., using equal-width multi-lines:

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      <button type="button" class="btn btn-primary mt-4 float-right">Text</button>
    </div>
    <div class="w-100"></div>
    <div class="col mt-4 text-center">
      <div class="spinner-border" role="status"></div>
    </div>
  </div>  
</div>

    Good luck!