es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Alinea la etiqueta de texto a la derecha en Bootstrap.

21 Jul, 2023 Programación

Quiero alinear la etiqueta de texto a la derecha utilizando Bootstrap 5, como cuando escribo este código:

<div class="form-floating text-dark text-end float-right">
  <input type="password" class="form-control text-dark" placeholder=" " id="password">
  <label for="floatingInput" class="float-right text-end">كلمة المرور</label>
</div>

El texto comienza desde la izquierda.
Quiero cambiarlo a la derecha.

Intenté usar .text-end y escribir código CSS:

.float-right {
    float: right;
}

Pero no funcionó para mí.

Imagen

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para alinear la etiqueta de texto a la derecha utilizando Bootstrap 5, puedes usar la clase text-end en el elemento de la etiqueta. Sin embargo, en tu ejemplo de código, parece que la etiqueta está flotando a la derecha utilizando la clase float-right, lo cual podría generar un conflicto con la alineación del texto. Aquí tienes un ejemplo de código actualizado que puedes probar:

    <div class="form-floating text-dark">
  <input type="password" class="form-control text-dark" id="password">
  <label for="password" class="text-end">كلمة المرور</label>
</div>

    En el ejemplo actualizado, eliminamos la clase float-right y solo utilizamos la clase text-end en la etiqueta para alinear el texto a la derecha.

    Si deseas mantener la etiqueta flotando a la derecha, puedes crear un div separado para la etiqueta y aplicar la clase text-end en él en su lugar:

    <div class="form-floating text-dark">
  <input type="password" class="form-control text-dark" id="password">
  <div class="float-end">
    <label for="password" class="text-end">كلمة المرور</label>
  </div>
</div>

    En este ejemplo, creamos un nuevo div con la clase float-end y colocamos la etiqueta dentro de él. Luego aplicamos la clase text-end en la etiqueta para alinear el texto a la derecha.

Comments are closed.