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.

 
This text is on the right

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.

I am using justify-content-end

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.

  
Item 1
  
Item 2

Usando la clase .align-self-end

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

  
Item 1
  
Item 2
  
Item 3

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.

This text is aligned to the right.

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:

  



  

    
Bootstrap 4 Align Right
    

    

      
Note that the d-flex class indicates display:flex, while the
        flex-row classes sets the flex-direction along its main axis while flex-column
        sets the flex-direction along its cross-axis.
      
      
The btn class applies Bootstrap's default button looks and behaviour to an element.
        

        The p-x (where x represents a number) class adds padding when applied.
    
    

    

      
Float left
      
Float right
      

    
    

    

      
I am using justify-content-end class
    
    


    
 Align Items End
    

      
item 1
      
Item 2
    
    


    

      
 Align Self End 
      
Item 1
      
Item 2
      
Item 3
    
    

    

      
ml.auto
    
    

    
This text is aligned to the right.