DEV Community

Daphnie Ozioma
Daphnie Ozioma

Posted on • Originally published at educative.io

How to align-right in Bootstrap 4

Bootstrap is a CSS framework used to design and customize responsive, mobile-first sites.

In Bootstrap 4, aligning elements to the right can be achieved using any of the following classes:

Adding float-right class

The .float-right class in Bootstrap uses the CSS float property to place an element on the right. Note that the Bootstrap 4 container is a Flexbox that can prevent the float property from working.

 <p class="float-right">This text is on the right</p>
Enter fullscreen mode Exit fullscreen mode

Using justify-content-end class

The .justify-content-end class is used on Flexbox containers to align all items on the main axis to the right. Always remember that the container using this class must have its display property set to flex. This is the .d-flex class in Bootstrap 4.

<div class="justify-content-end">I am using justify-content-end</div>
Enter fullscreen mode Exit fullscreen mode

Adding an align-items-right class

The align-items-end class is used on Flexbox containers to align all items along its cross axis (i.e., vertically) to the right. The d-flex class is required here, and the flex direction of the parent container should be set to column.

<div class="align-items-end">
  <div>Item 1</div>
  <div>Item 2</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Using .align-self-end class

.align-self-end is used to align a single item in a Flexbox to the right.

<div class="d-flex">
  <div>Item 1</div>
  <div class="align-self-end">Item 2</div>
  <div>Item 3</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Using text-right class

.text-right aligns text to the right on all viewport sizes. This is mostly used on inline elements.

<p class="text-right">This text is aligned to the right.</p>
Enter fullscreen mode Exit fullscreen mode

Adding ml-auto class

The ml-auto class is mostly used on columns, navigation bars, and a few other Flexbox children.

Implementation

The result of applying the classes mentioned above is shown below:
Alt Text

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title></title>
</head>

<body>
  <div class="container">
    <h1>Bootstrap 4 Align Right</h1>
    <hr />
    <div>
      <p>Note that the <code>d-flex</code> class indicates <strong>display:flex</strong>, while the
        <code>flex-row</code> classes sets the flex-direction along its main axis while <code>flex-column</code>
        sets the flex-direction along its cross-axis.
      </p>
      <p>The <code>btn</code> class applies Bootstrap's default button looks and behaviour to an element.
        <br>
        The <code>p-x</code> (where <strong>x</strong> represents a number) class adds padding when applied.</p>
    </div>
    <hr/>
    <div class="p-2">
      <p class="btn btn-outline-primary float-start">Float left</p>
      <p class="btn btn-outline-primary float-right">Float right</p>
      <br />
    </div>
    <hr/>
    <div class="d-flex flex-row justify-content-end p-1">
      <p>I am using justify-content-end class</p>
    </div>
    <hr/>

    <h3> Align Items End</h3>
    <div class="d-flex flex-column align-items-end">
      <p>item 1</p>
      <p>Item 2</p>
    </div>
    <hr/>

    <div class="d-flex flex-column">
      <h3> Align Self End </h3>
      <div>Item 1</div>
      <div class="align-self-end">Item 2</div>
      <div>Item 3</div>
    </div>
    <hr/>
    <div class="d-flex">
      <p class="btn btn-outline-primary ml-auto">ml.auto</p>
    </div>
    <hr/>
    <p class="text-right">This text is aligned to the right.</p>
  </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Discussion (0)