0

estoy intentando separar los botones y no logro hacerlo. He intentado meterle
entre las 'div' y tambien darle margen a las div para que se separen entre ellas pero tampoco me funciono. Alguna sugerencia? TODO LO HAGO CON BOOTSTRAP, pero no pude agregarle los script aqui. El código es el siguiente:

<hr>
<div style="">
  <div class="col-md-6">
    <!-- <p>Don't have an account!</p>  -->
    <button class="btn btn-primary btn-block" style="font-size: 10px" type="button" id="btn-signup"><i class="fa fa-user-md" style="font-size: 20px"></i></br>Registro prestador/a</button>
  </div>
  <div class="col-md-6">
    <!-- <p>Don't have an account!</p>  -->
    <button class="btn btn-primary btn-block" style="font-size: 10px" type="button" id="btn-signup"><i style="font-size: 20px" class="fa fa-address-book"></i></br>Registro secretaria/o</button>
  </div>
</div>

<div style="">
  <div class="col-md-6">
    <!-- <p>Don't have an account!</p>  -->
    <button class="btn btn-danger btn-block" style="font-size: 10px" type="button" id="btn-signup"><i style="font-size: 20px" class="fa fa-user"></i></br>Registro afiliado/a</button>
  </div>
  <div class="col-md-6">
    <!-- <p>Don't have an account!</p>  -->
    <button class="btn btn-danger btn-block" style="font-size: 10px" type="button" id="btn-signup"><i style="font-size: 20px" class="fa fa-key"></i></br>¿Olvido su contraseña?</button>
  </div>
</div>

<div style="">
  <div class="col-md-6">
    <!-- <p>Don't have an account!</p>  -->
    <button class="btn btn-danger btn-block" style="font-size: 10px" type="button" id="btn-signup"><i style="font-size: 20px" class="fa fa-unlock-alt"></i></br>¿No ha recibido<br> instrucciones para<br> desbloquear?</button>
  </div>
  <div class="col-md-6">
    <!-- <p>Don't have an account!</p>  -->
    <button class="btn btn-danger btn-block" style="font-size: 10px" type="button" id="btn-signup"><i style="font-size: 20px" class="fa fa-check"></i></br>¿No ha recibido<br> instrucciones de<br> confirmacion?</button>
  </div>
</div>

introducir la descripción de la imagen aquí

3
  • A los div que contienen a los botones puedes probar dándoles un margin por ejemplo de .5em para que se separen entre ellos
    – user128299
    el 6 may. 2020 a las 18:50
  • He intentado con eso tambien y me queda igual. Ahi adjunte una foto a la publicación para que veas. el 6 may. 2020 a las 18:51
  • Es raro, entonces esperemos el aporte de alguien mas por que yo copiando tu código y aplicando el css que te menciono a la clase .col-md-6 me funcionó
    – user128299
    el 6 may. 2020 a las 19:00

3 respuestas 3

1

hice un ejemplo separando los botones con la clase CSS mb-2 de bootstrap, hace que al botón se le añada un margen en la parte inferior.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>

<body>
	<div class="container py-4">
		<div class="row">
			<hr>
			<div class="col-md-6">
				<!-- <p>Don't have an account!</p>  -->
				<button class="btn btn-primary btn-block mb-2" style="font-size: 10px" type="button" id="btn-signup"><i class="fa fa-user-md" style="font-size: 20px"></i></br>Registro prestador/a</button>
			</div>
			<div class="col-md-6">
				<!-- <p>Don't have an account!</p>  -->
				<button class="btn btn-primary btn-block mb-2" style="font-size: 10px" type="button" id="btn-signup"><i style="font-size: 20px" class="fa fa-address-book"></i></br>Registro secretaria/o</button>
			</div>

			<div class="col-md-6">
				<!-- <p>Don't have an account!</p>  -->
				<button class="btn btn-danger btn-block mb-2" style="font-size: 10px" type="button" id="btn-signup"><i style="font-size: 20px" class="fa fa-user"></i></br>Registro afiliado/a</button>
			</div>
			<div class="col-md-6">
				<!-- <p>Don't have an account!</p>  -->
				<button class="btn btn-danger btn-block mb-2" style="font-size: 10px" type="button" id="btn-signup"><i style="font-size: 20px" class="fa fa-key"></i></br>¿Olvido su contraseña?</button>
			</div>

			<div class="col-md-6">
				<!-- <p>Don't have an account!</p>  -->
				<button class="btn btn-danger btn-block mb-2" style="font-size: 10px" type="button" id="btn-signup"><i style="font-size: 20px" class="fa fa-unlock-alt"></i></br>¿No ha recibido<br> instrucciones para<br> desbloquear?</button>
			</div>
			<div class="col-md-6">
				<!-- <p>Don't have an account!</p>  -->
				<button class="btn btn-danger btn-block mb-2" style="font-size: 10px" type="button" id="btn-signup"><i style="font-size: 20px" class="fa fa-check"></i></br>¿No ha recibido<br> instrucciones de<br> confirmacion?</button>
			</div>
		</div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

3
  • Con este ejemplo me funciono, pero la libreria css de boostrap 4 me cambia los estilos el 7 may. 2020 a las 14:58
  • Estoy usando boostrap 3 por eso. Muchas gacisas de todas maneras. Utilice estilo css margin-top. el 7 may. 2020 a las 17:11
  • 1
    A vale, claro, es que en bootstrap 3 no existen esas clases para márgenes. Si, te creas tu propia clase CSS y listo. el 7 may. 2020 a las 18:29
1

Si estas usando bootstrap, en el CSS por defecto de bootstrap se incluyen las clases mt (margin top) por ejemplo yo le añadí a cada botón un mt-2 y los separa, no sé si eso es lo que necesitas

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<hr>
<div style="">
  <div class="col-md-6">
    <!-- <p>Don't have an account!</p>  -->
    <button class="btn btn-primary btn-block mt-2" style="font-size: 10px" type="button" id="btn-signup"><i class="fa fa-user-md" style="font-size: 20px"></i></br>Registro prestador/a</button>
  </div>
  <div class="col-md-6">
    <!-- <p>Don't have an account!</p>  -->
    <button class="btn btn-primary btn-block mt-2" style="font-size: 10px" type="button" id="btn-signup"><i style="font-size: 20px" class="fa fa-address-book"></i></br>Registro secretaria/o</button>
  </div>
</div>

<div style="">
  <div class="col-md-6">
    <!-- <p>Don't have an account!</p>  -->
    <button class="btn btn-danger btn-block mt-2" style="font-size: 10px" type="button" id="btn-signup"><i style="font-size: 20px" class="fa fa-user"></i></br>Registro afiliado/a</button>
  </div>
  <div class="col-md-6">
    <!-- <p>Don't have an account!</p>  -->
    <button class="btn btn-danger btn-block mt-2" style="font-size: 10px" type="button" id="btn-signup"><i style="font-size: 20px" class="fa fa-key"></i></br>¿Olvido su contraseña?</button>
  </div>
</div>

<div style="">
  <div class="col-md-6">
    <!-- <p>Don't have an account!</p>  -->
    <button class="btn btn-danger btn-block mt-2" style="font-size: 10px" type="button" id="btn-signup"><i style="font-size: 20px" class="fa fa-unlock-alt"></i></br>¿No ha recibido<br> instrucciones para<br> desbloquear?</button>
  </div>
  <div class="col-md-6">
    <!-- <p>Don't have an account!</p>  -->
    <button class="btn btn-danger btn-block mt-2" style="font-size: 10px" type="button" id="btn-signup"><i style="font-size: 20px" class="fa fa-check"></i></br>¿No ha recibido<br> instrucciones de<br> confirmacion?</button>
  </div>
</div>

1
  • Muchas gracias por la guia, lo hice con css ya que estoy utilizando bootstrap 3 y esas clases no estan todavia en esta version. Muchas gracias. el 8 may. 2020 a las 12:35
0

si quieres hacerlo con una etiqueta de html yo diría que usaras <br> para hacer un salto de linea (br no tiene etiqueta de cierre) .

si quieres hacerlo con css hay muchísimas formas y propiedades de hacerlo todo depende del contexto de tu proyecto y de la metodológica que uses (Usar metodologías es una buena practica). Es muy común que cuando se usa BOOTSTRAP los estilos se enciman unos a otros y es muy difícil de comprender porque suelen entrarse en un conflicto de autoridad entre etiquetas padre hijo etc. Te sugiero buscar una buena metodología para evitar esto y tener un buen orden en tu código o etiquetas html.

También es fundamental entender el modelo de caja para cualquier desarrollador FrontEnd(margin,border,padding,width). Si estas buscando una propiedad css lo repito hay muchísimas checa una documentación incluso puedes superponer el boton en un plano donde defines X y Y pero yo recomiendo el modelo de caja.

Algunos temas a Comprender :

Metodologias css

Modelo de caja

Uso de display en css

Una solución mas avanzada :

css grid

2
  • 1
    br no es una buena idea de maquetación pues estás usando el HTML para disposicion
    – user128299
    el 6 may. 2020 a las 20:00
  • Totalmente deacuerdo usar Html de esa forma no es una buena practica.Buen detalle a aclarar gracias. el 6 may. 2020 a las 20:01

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.