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

Relacionado

Zona de pruebas y prácticas de Tailwind CSS

Un campo de juego en línea avanzado para Tailwind CSS, que incluye soporte para cosas como: Personalización de tu archivo tailwind.config.js Extraer clases con @apply Finalización de código con vista previa instantánea Perfecto para aprender cómo funciona el framework de Tailwind CSS y crear un prototipo ¡SEGUIR LEYENDO!

The best Udemy courses in August, only for 9.99 $

Los mejores cursos en inglés y en oferta, hasta el día 27. Los cursos incluidos aquí son todos en inglés. Revisa por aquí, entre los mejores cursos en oferta de Udemy de Agosto en español, si lo que deseas son cursos en español. Si por desgracia, ¡SEGUIR LEYENDO!

Pequeño truco para alinear a la izquierda los elementos de la última fila con Flexbox

Si adoras trabajar con Flexbox, probablemente hayan encontrado en el pasado el problema de los elementos en la última fila que no se comportan del todo bien. Lo que significa que no tienen una alineación a la izquierda. Bueno, hay una manera muy simple de tener ¡SEGUIR LEYENDO!

Nunca ha existido un mejor momento para crear sitios web

Este artículo es una traducción completa de There’s never been a better time to build websites del blog de SimeonGriggs Mi historia del origen del desarrollo web se remonta a hace unos 25 años. En ese entonces pasé mis semanas jugando Red Alert, hasta el fin ¡SEGUIR LEYENDO!

Lanzado Bootstrap 5.2.1

Bootstrap v5.2.1 está aquí con correcciones de nuestra última versión menor, v5.2. Como lanzamiento de parche, estos cambios se limitan a correcciones de errores, actualizaciones de documentación y algunas actualizaciones de dependencias. ¿Cómo actualizar a Bootstrap 5.2.1? Dirígete a https://getbootstrap.com para obtener la última versión, también se ha enviado ¡SEGUIR LEYENDO!