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>