1

Quisiera saber cómo puedo hacer para centrar un botón en el contenedor usando Bootstrap, es decir, en el centro de la pantalla tanto vertical como horizontalmente. Lo intenté de varias maneras pero no puedo. Mi código es el siguiente:

html,
body {
  background-image: url("fondo.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
}

.container-fluid {
  background-color: cyan;
  border: 2px solid black;
  display: flex;
  justify-content: center;
}

.col {
  background-color: pink;
  border: 2px solid black;
}
<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <div class="container-fluid h-100">
    <div class="row w-100">
      <div class="col">
        <button class="btn btn-danger center-block"> A regular button </button>
      </div>
    </div>

  </div>

</body>

</html>

3 respuestas 3

3

Puedes hacerlo de la siguiente forma:

html, body {
    	background-image: url("fondo.jpeg");
    	background-size: cover;
    	background-repeat: no-repeat;
    	height: 100%;
    }
    
    
    .container-fluid {
    	background-color: cyan;
    	border: 2px solid black;
    	display: flex;
      	justify-content: center;	
    }
    
    
    .col {
    	background-color: pink;
    	border: 2px solid black;
    
    }
<!DOCTYPE html>
        <html>
        <head>
    	<title>Bootstrap</title>
    	<link rel="stylesheet" 
        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    	<link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
    	 
    
    	<div class="container-fluid h-100"> 
    		<div class="row w-100 align-items-center">
    			<div class="col text-center">
    				<button class="btn btn-danger regular-button"> A regular button </button>
    			</div>	
    		</div>
    
    
    	</div>
    
        </body>
        </html>

3
  • En realidad lo que quiero es centrar el botón en la pantalla, tanto horizontal como verticalmente
    – Martín
    Commented el 19 ene. 2018 a las 14:10
  • Si, disculpa, leí por arriba. Ahí edite, mira si es lo que deseas. También puedes agregar justify-content-center en la row Commented el 19 ene. 2018 a las 14:11
  • Genial, funcionó. Muchas gracias!
    – Martín
    Commented el 19 ene. 2018 a las 14:15
2

html, body {
    background-image: url("fondo.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
}


.container-fluid {
    background-color: cyan;
    border: 2px solid black;
    display: flex;
    justify-content: center;    
}


.col {
    background-color: pink;
    border: 2px solid black;

}
.v-center{
  display: flex;
  align-items: center;
}
<html>
    <head>
    <title>Bootstrap</title>
    <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>


    <div class="container-fluid h-100"> 
        <div class="row w-100">
            <div class="col v-center">
                <button class="btn btn-danger d-block mx-auto"> A regular button </button>
            </div>  
        </div>


    </div>

    </body>
    </html>

0

Prueba este código:

<div class="col text-center">
   <button class="btn btn-danger"> A regular button </button>
</div> 

El text-center no funciona si tienes la clase center-block. Por lo que si le quitas esa clase y le añades la otra te debe de funcionar.

1
  • En realidad lo que quiero es centrar el botón en la pantalla, tanto horizontal como verticalmente
    – Martín
    Commented el 19 ene. 2018 a las 14:10

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.