How to set an button align-right with Bootstrap?

Question

I am learning Bootstrap. The structure is a container within some context. At the bottom of the container, I put a button next to an description.

Now, I want to set the button align to the right without break the bootstrap structure. What should I do? I had set the "float:right" to the button style, but it appeared bad. The button is outside the "alert-info" background and not vertical align. Any better method?

<div class="alert alert-info"> <a href="#" class="alert-link">Summary:Its some description.......testtesttest</a>   <button type="button" class="btn btn-primary btn-lg" style="float:right;">Large      button</button>  </div> 

Answer 1

Bootstrap 5 implementation:

The class name is now "float-end" instead of "pull-right"

<div class="alert alert-info clearfix">     <a href="#" class="alert-link">       Summary:Its some description.......testtesttest     </a>      <button type="button" class="btn btn-primary btn-lg float-end">       Large button     </button> </div> 

---

Bootstrap 4 (and under) implementation:

Just add a simple pull-right class to the button, and make sure the container div is clearfixed:

<div class="alert alert-info clearfix">     <a href="#" class="alert-link">       Summary:Its some description.......testtesttest     </a>      <button type="button" class="btn btn-primary btn-lg pull-right">       Large button     </button> </div> 

Answer 2

This worked for me:

<div class="text-right">     <button type="button">Button 1</button>     <button type="button">Button 2</button> </div>