1

Estoy intentando justificar el contenido de un <div> a la derecha con Bootstrap, pero no se por qué no funciona.

El código es una simplificación de lo que yo estoy haciendo:

<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="cssBootstrap/bootstrap.min.css">
      <script src="jsBootstrap/jquery-3.4.1.min.js"></script>
      <script src="jsBootstrap/popper.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="jquery-latest.js"></script>            
   </head>
   <body>
      <div class="container my-1">
         <div class="row">
            <div class="col-6 bg-danger justify-content-start">             
               <input type="checkbox" id="terminos" name="terminos"><label for="terminos">He leido los terminos</label>                
            </div>
            <div class="col-6 bg-warning justify-content-end">
               <input type="submit" id="pagar" name="pagar" value="Confirmar pedido">
            </div>
         </div>
      </div>
   </body>
</html>
3
  • 3
    Solo añade la clase d-flex al elemento div de la columna: <div class="col-6 bg-warning d-flex justify-content-end">. De hecho la primera columna también deberías añadirle esa clase. Saludos Commented el 23 feb. 2021 a las 16:04
  • 1
    Esas utilidades deben ir en contenedores con el módulo flexbox, Bootstrap tiene la clase .d-flex. Puedes ver más info acá: getbootstrap.com/docs/4.6/utilities/flex/#justify-content Commented el 23 feb. 2021 a las 16:05
  • genial, gracias. Commented el 23 feb. 2021 a las 16:59

1 respuesta 1

0

Tenes que modificar el justify del div y el equivalente del item. Te paso un fiddle para con el ejemplo

<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
      <script src="jquery-latest.js"></script>            
   </head>
   <body>
      
      <div class=" my-1">
         <div class="d-flex justify-content-end">
            <div class="bg-danger align-content-end">             
               <input type="checkbox" id="terminos" name="terminos"><label for="terminos">He leido los terminos</label>                
            </div>
            <div class="bg-warning  align-content-end">
               <input type="submit" id="pagar" name="pagar" value="Confirmar pedido">
            </div>
         </div>
      </div>
      
   </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.