Pulling a Close Button to the Right in Bootstrap 5

I was wanting to pull a close button to the right in Bootstrap 5 recently. After some research and experimentation, I ended up finding that the text-end class is a lifesaver for this! You can even include it in the same class as the col class!

Bootstrap 5 provides a variety of utility classes that make aligning elements straightforward. The text-end class is particularly useful for aligning text and inline elements to the right. Here’s how you can use it to pull a close button to the right within a column.

Example

Let’s say you have a modal header with a close button that you want to align to the right. Here’s how you can do it:

<div class="row">
    <div class="col">
        <a class="btn btn-info" href="/report/ClinicalNotesReport/@ViewBag.EID" target="_blank" title="Open printable clinical notes page">📃</a>
        <button class="btn btn-info " id="CreateNote" data-eid="@ViewBag.EID" data-div="@ClinicalNotesTableID">Create Clinical Note</button>


    </div>
    <div class="col">

    </div>
    <div class="col text-end">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
</div>

Here, the text-end class is applied to the column containing the close button, aligning it to the right.

And here is the result!

Conclusion

Using Bootstrap 5’s utility classes like text-end makes it easy to align elements as needed. Whether you’re working with buttons, text, or other inline elements, these classes provide a simple and effective solution.

I hope this helps you with your Bootstrap 5 projects! If you have any questions or need further assistance, feel free to leave a comment below.