Bootstrap 4: Aligning Elements to the Right

Bootstrap 4 provides simple and easy-to-use classes to align elements to the right. This is useful when you want to align text, images, buttons, or any other element to the right edge of the container.

Using the .ml-auto Class

One of the most common ways of aligning elements to the right is by using the .ml-auto (margin-left auto) class. This class adds a left margin of auto, which means it pushes the element to the right edge.

<div class="container">
  <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6 text-right">
      <button class="btn btn-primary ml-auto">Align Right</button>
    </div>
  </div>
</div>

In the example above, we have a button inside a column of width 6. The text-right class aligns the column content to the right, and the .ml-auto class aligns the button to the right edge of the column.

Using the .justify-content-end Class

Another way of aligning elements to the right is by using the .justify-content-end class. This class is used to align the contents of a container to the end of the container (which is the right edge when using horizontal layout).

<div class="container">
  <div class="row justify-content-end">
    <div class="col-md-6"></div>
    <div class="col-md-6 text-right">
      <button class="btn btn-primary">Align Right</button>
    </div>
  </div>
</div>

In the example above, we have used the .justify-content-end class on the row element to align the content to the right edge of the container. This class affects all the columns in the row, so we don’t need the .text-right class on the second column.

Conclusion

Bootstrap 4 provides simple and effective ways of aligning elements to the right. You can use either the .ml-auto class or the .justify-content-end class depending on your requirements. Using these classes will save you time and effort and ensure your website looks great on all devices.