¿Cómo alinear a la derecha en Bootstrap 4?

Bootstrap es un framework CSS que se utiliza para diseñar y personalizar sitios adaptables para dispositivos móviles.

En Bootstrap 4, la alineación de elementos a la derecha se puede lograr usando cualquiera de las siguientes clases:

Agregando la clase float-right

La clase .float-right en Bootstrap usa la propiedad float CSS para colocar un elemento a la derecha.

Debes tener en cuenta que el contenedor Bootstrap 4 es un Flexbox que puede evitar que la propiedad float funcione.

 <p class="float-right">This text is on the right</p>

Usando la clase de justify-content-end

La clase .justify-content-end se usa en contenedores Flexbox para alinear todos los elementos en el eje principal a la derecha.

Recuerda siempre que el contenedor que use esta clase debe tener su propiedad display establecida en flex. Esta es la clase .d-flex en Bootstrap 4.

<div class="justify-content-end">I am using justify-content-end</div>

Agregar la clase align-items-right

La clase align-items-end se usa en contenedores Flexbox para alinear todos los elementos a lo largo de su eje transversal (es decir, verticalmente) a la derecha. Aquí se requiere la clase d-flex y el flex direction del contenedor principal debe establecerse en column.

<div class="align-items-end">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Usando la clase .align-self-end

.align-self-end se utiliza para alinear un solo elemento en un Flexbox a la derecha.

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

Usando la clase text-right

.text-right alinea el texto a la derecha en todos los tamaños de ventana gráfica. Esto se usa principalmente en elementos en línea.

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

Agregando la clase ml-auto

La clase ml-auto se usa principalmente en columnas, barras de navegación y algunos otros children de Flexbox.

Implementación

El resultado de aplicar las clases anteriores sería:

  <title></title>



  <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>