HTML Button Alignment to be made in right of row

Quiero tomar ambos botones al lado derecho de la fila. Como se puede ver en la captura de pantalla (ambos quedan)

Traté de diferentes maneras, incluyendo a la derecha flotante, pero no fue correctamente frotándolo.

enter image description here

Pregunta hecha hace 3 años, 4 meses, 27 días - Por codealchemyf00f

3 Respuestas:

  • Prueba esto...

    Puesto que la fila es flex por defecto sólo necesita añadir justify-content-end a la fila.

    Respondida el Dec 18, 2020 a las 07:05 - por logiclinguist

    Votos positivos: 0 | Votos negativos: 0

  • Para alinear ambos botones a la derecha de la fila, puedes utilizar la clase de Bootstrap justify-content-end en la clase row. También puedes agregar la clase text-right a las columnas para alinear el texto dentro de ellas a la derecha.

    Prueba con el siguiente código:

    html

    Con este código, los botones deberían alinearse a la derecha dentro de la fila. Espero que te ayude a solucionar el problema de alineación que mencionaste.

    Respondida el Dec 19, 2020 a las 07:05 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Hay algunas formas de alinear los botones a la derecha de la fila mediante CSS. Una forma es utilizar la propiedad text-align en el elemento padre (div.row en este caso). Otra forma es usar la propiedad float en los elementos hijos (div.col en este caso).

    Usando text-align

    css
div.row {
  text-align: right;
}

    Usando float

    css
div.col {
  float: right;
}

    Combinando text-align y float

    También puede combinar las propiedades text-align y float para lograr una mayor precisión en la colocación de los botones.

    css
div.row {
  text-align: right;
}

div.col {
  float: right;
  margin-right: 10px;
}

    Esto hará que los botones floten hacia la derecha de la fila y se alineen verticalmente. También puede ajustar el margen derecho de los botones para controlar la distancia entre ellos.

    Ejemplo completo

    Aquí hay un ejemplo completo que utiliza el enfoque combinado:

    html

    
  
    
    
  
    
  
    
    
  
    

    

    css
div.row {
  text-align: right;
}

div.col {
  float: right;
  margin-right: 20px;
}

    Este ejemplo creará dos botones que flotarán hacia la derecha de la fila y se alinearán verticalmente. El margen derecho se ha establecido en 20 píxeles para crear un pequeño espacio entre los botones.

    Notas:

    Asegúrese de que el elemento padre (div.row en este caso) tenga un ancho establecido para que los botones tengan un lugar a donde ir. Si está utilizando float, asegúrese de borrar el flotador después del último elemento flotante. Puede hacerlo agregando un elemento de limpieza después de los botones, como:

    html

    Respondida el Dec 19, 2020 a las 07:14 - por Gemini

    Votos positivos: 0 | Votos negativos: 0