How to align-right in bootstrap 4?

Bootstrap is an open-source CSS-based framework. It is designed in a way to make web development easier for the developers. That is why it is the preferred framework of many users. You can have responsive websites by using this remarkable platform. This framework offers built-in classes for web front-end development. Thus, it is quite an effective framework for web developers.

We can utilize built-in classes of Bootstrap 4 for text alignment. These classes help to align the text to right, left, or center. We are going to explain the ways or classes that are helpful to align the text to the right. There are multiple ways in Bootstrap for aligning the elements to the right. Let us discuss these ways in detail.

1. Align right using float-right class

This class of Bootstrap utilizes the float property of the CSS for aligning the text in the h2 tag to the right side of the page. Consider the point that the container in Bootstrap 4 is flexbox. It can stop the float property to work accordingly.

Code

<h2 class="float-right">Align text to the right</h2>

Output

2. Align right using the text-right class

It also assists in aligning the text to the right side on every viewport size. We usually implement it on inline elements.

Code

<h2 class="text-right">Here is the right aligned text.</h2>

Output

3. Align right by using justify-content-end class

It is used to align all the items in flexbox container to the right side on the main axis. Keeping a point in mind that the display property must be set to flex while using this class. In bootstrap 4 it is the .d-flex class.

Code

<div class="d-flex flex-column align-items-end">
      <p>product 1</p>
      <p>product 2</p>
</div>

Output

4. Align right using ml-auto class:

It is commonly used on Flexbox children like nav-bars, columns, and some others.

Code

<div class="d-flex">
     <p class="btn btn-outline-primary ml-auto">button</p>
</div>

Output

5. Align right using .align-self-end class

It helps to align the Flexbox’s single item to the right side.

Code

<div class="d-flex flex-column">
   <div>product 1</div>
   <div class="align-self-end">product 2</div>
   <div>product 3</div>
</div>

output