0

Tengo el siguiente código:

<!-- Esta linea simplemente es para tener bootstrap en el ejemplo -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Fin linea CDN bootstrap -->

<div class="container-fluid h-100 " style="margin-top: 40px">
    <div class="row w-100 align-items-center">
        <div class="col text-center">
            <button class="btn btn-secondary regular-button botones" id="guardarReceta" title="Confirma ....."> Guardar</button>
            <button class="btn btn-secondary regular-button botones disabled" x-id="cargarReceta" title="Carga los datos ....."> Cargar</button>
            <button class="btn btn-primary regular-button botones" id="cancelarCambios" title="Deshace todos los cambios no confirmados"> Cancelar </button>
            <button class="btn btn-danger regular-button botones" id="aplicarCambios" title="Confirma todos los cambios realizados ....."> Confirmar cambios </button>
            <button class="btn btn-danger regular-button botones" id="enviarCambios" title="...."> Enviar</button>
        </div>
    </div>
</div>

Estoy intentando que los botones de "guardar" y "cancelar" queden en el centro (como están actualmente) pero el botón de enviar esté a la derecha (unos 20px antes del borde final) y los botones de "cargar" y "guardar como" queden a la izquierda (unos 20px antes del borde inicial) pero me está resultando imposible.

Edición:

Adjunto captura de pantalla del resultado de haber intentando lo que me indicaron en la primera respuesta.

Captura de pantalla

Código de la respuesta modificado para que quede como quiero:

<div class="container-fluid h-100 " style="margin-top: 40px">
    <!-- Left -->
    <div class="row w-100 text-left">
        <div class="col">
            <button class="btn btn-secondary regular-button botones" id="guardarReceta" title="Confirma ....."> Guardar</button>
            <button class="btn btn-secondary regular-button botones disabled" x-id="cargarReceta" title="Carga los datos ....."> Cargar</button>
        </div>
    </div>
    
    <!-- Center -->
    <div class="row w-100 text-center" style="margin-top:10px;">
        <div class="col">
            <button class="btn btn-primary regular-button botones" id="cancelarCambios" title="Deshace todos los cambios no confirmados"> Cancelar </button>
            <button class="btn btn-danger regular-button botones" id="aplicarCambios" title="Confirma todos los cambios realizados ....."> Confirmar cambios </button>
        </div>
    </div>
    
    <!-- right -->
    <div class="row w-100 text-right" style="margin-top:10px;">
        <div class="col">
            <button class="btn btn-danger regular-button botones" id="enviarCambios" title="...."> Enviar</button>
        </div>
    </div>
</div>
1
  • ¿Tu última edición intenta responder a tu pregunta? De ser así, revierte esa edición, y ponla como respuesta. Recuerda que el formato de Stack Overflow en español es de preguntas y respuestas. Además, no olvides aceptar la respuesta que te fue más útil cuando transcurra el tiempo mínimo.
    – padaleiana
    Commented el 21 jun. 2022 a las 11:16

2 respuestas 2

2

Te dejo este ejemplo con flexbox, que he leído que estabas intentado con eso en un comentario:

<!-- Esta linea simplemente es para tener bootstrap en el ejemplo -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Fin linea CDN bootstrap -->

<div class="container-fluid h-100 " style="margin-top: 40px">
    <div class="d-flex flex-row w-100 justify-content-between">
        <div>
            <button class="btn btn-secondary regular-button botones disabled" x-id="cargarReceta" title="Carga los datos .....">Cargar</button>
            <button class="btn btn-danger regular-button botones" id="aplicarCambios" title="Confirma todos los cambios realizados .....">Confirmar cambios</button>
        </div>
        <div>
            <button class="btn btn-secondary regular-button botones" id="guardarReceta" title="Confirma .....">Guardar</button>
            <button class="btn btn-primary regular-button botones" id="cancelarCambios" title="Deshace todos los cambios no confirmados">Cancelar</button>
        </div>
        <div>
            <button class="btn btn-danger regular-button botones" id="enviarCambios" title="....">Enviar</button>
        </div>
    </div>
</div>

5
  • Si lo prefieres sin flebox dimelo y te adjunto un ejemplo son ello, te dejare los dos de todas formas
    – adrigo
    Commented el 21 jun. 2022 a las 10:33
  • Funciona perfecto, no termino de entender el código, pero va perfecto. Viendo la documentación oficial, interpreto que si utilizo únicamente "between" va a coger todos los elementos y los va a separar en distancias iguales.
    – Carlos
    Commented el 21 jun. 2022 a las 10:40
  • 1
    Eso es, lo que pasa es que si te fijas, he creado tres div creando los bloques que querias, y estos son los que se separan, luego dentro de cada uno meto los botones. Tambien tienes la opcion de usar around en vez de between, esto los separa de diferente manera, mira cual te gusta mas y juega con ello.
    – adrigo
    Commented el 21 jun. 2022 a las 10:43
  • 1
    Para dar por finalizada la pregunta vota la respuesta como respuesta correcta y agradeceria si le das un upvote :) Lo dicho, si quieres que te añada un ejemplo sin usar Flexbox estare encantado de hacerlo.
    – adrigo
    Commented el 21 jun. 2022 a las 10:44
  • 1
    Lo menos que puedo hacer por ti. Gracias.
    – Carlos
    Commented el 21 jun. 2022 a las 12:25
1

con las clases text-left, text-center y text-right puedes alinear los botones en tu row. Te dejo un ejemplo aquí abajo.

<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
<div class="container-fluid h-100 " style="margin-top: 40px">
    <!-- Left -->
    <div class="row w-100 text-left">
        <div class="col">
            <button class="btn btn-secondary regular-button botones" id="guardarReceta" title="Confirma ....."> Guardar</button>
            <button class="btn btn-secondary regular-button botones disabled" x-id="cargarReceta" title="Carga los datos ....."> Cargar</button>
            <button class="btn btn-primary regular-button botones" id="cancelarCambios" title="Deshace todos los cambios no confirmados"> Cancelar </button>
            <button class="btn btn-danger regular-button botones" id="aplicarCambios" title="Confirma todos los cambios realizados ....."> Confirmar cambios </button>
            <button class="btn btn-danger regular-button botones" id="enviarCambios" title="...."> Enviar</button>
        </div>
    </div>
    
    <!-- Center -->
    <div class="row w-100 text-center" style="margin-top:10px;">
        <div class="col">
            <button class="btn btn-secondary regular-button botones" id="guardarReceta" title="Confirma ....."> Guardar</button>
            <button class="btn btn-secondary regular-button botones disabled" x-id="cargarReceta" title="Carga los datos ....."> Cargar</button>
            <button class="btn btn-primary regular-button botones" id="cancelarCambios" title="Deshace todos los cambios no confirmados"> Cancelar </button>
            <button class="btn btn-danger regular-button botones" id="aplicarCambios" title="Confirma todos los cambios realizados ....."> Confirmar cambios </button>
            <button class="btn btn-danger regular-button botones" id="enviarCambios" title="...."> Enviar</button>
        </div>
    </div>
    
    <!-- right -->
    <div class="row w-100 text-right" style="margin-top:10px;">
        <div class="col">
            <button class="btn btn-secondary regular-button botones" id="guardarReceta" title="Confirma ....."> Guardar</button>
            <button class="btn btn-secondary regular-button botones disabled" x-id="cargarReceta" title="Carga los datos ....."> Cargar</button>
            <button class="btn btn-primary regular-button botones" id="cancelarCambios" title="Deshace todos los cambios no confirmados"> Cancelar </button>
            <button class="btn btn-danger regular-button botones" id="aplicarCambios" title="Confirma todos los cambios realizados ....."> Confirmar cambios </button>
            <button class="btn btn-danger regular-button botones" id="enviarCambios" title="...."> Enviar</button>
        </div>
    </div>
</div>
<body/>
<html/>

4
  • yo estaba intentando con "d-flex justify-content-start", "d-flex justify-content-center", etc. Link: getbootstrap.com/docs/4.0/utilities/flex
    – Carlos
    Commented el 21 jun. 2022 a las 10:12
  • El único problema que veo es que utilizo tu código y elimino algunos botones del "centro", algunos de la izquierda y algunos de la derecha, no me quedan en la misma fila. Voy a subir una captura de pantalla (editaré la pregunta).
    – Carlos
    Commented el 21 jun. 2022 a las 10:13
  • si te das cuenta he echo una row por cada tipo de alineacion hazlo en columnas i te saldra si lo quieres todo en una misma fila Commented el 21 jun. 2022 a las 10:25
  • He probado pero no me ha quedado bien: codepen.io/i7strelok/pen/poamZzQ. También he probado quitar los "div=col" pero el resultado es el mismo
    – Carlos
    Commented el 21 jun. 2022 a las 10:41

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.