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

Artículos Relacionados
8 Mejores web GRATIS de conversión de color RGB a HEX

Aquí hay una lista de los mejores sitios web gratuitos de conversión de color RGB a HEX. RGB (Rojo, Verde y Azul) es un tipo de fórmula de color que representa los valores de los colores primarios (RGB) en una imagen. Este formato de ¡SEGUIR LEYENDO!

11 Mejores sitios web para Descargar Fuentes Tipográficas 2023

La tipografía juega un papel importante en el diseño web y las combinaciones de fuentes correctas pueden mejorar enormemente su trabajo. Sin embargo, encontrar fuentes óptimas para sus proyectos puede ser un desafío. Puedes tropezar con los tipos de letra que te gustan al ¡SEGUIR LEYENDO!

10 Herramientas de productividad para desarrolladores de React 2020

Hoy vamos a descubrir algunas herramientas excelentes y prometedoras para mejorar la productividad de los desarrolladores de React y que van a ayudarte en el flujo de trabajo del desarrollo de aplicaciones. Por lo general, cuando necesitas comenzar a trabajar en nuevos proyectos (directamente ¡SEGUIR LEYENDO!