@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
body{
background-image: url(../img/login.png);
background-size: cover;
margin: 0px;
padding: 0px;
}
.caja-login {
margin: 0px;
vertical-align: center;
height: auto;
min-height: 100px;
min-height: 100vh;
display: flex;
align-items: center;
background: rgba(191, 233, 252, 0.5);
}
.container, .row{
flex-wrap: unset;
padding-left: -30px;
}
#login{
text-align: center;
width: 300px;
margin: auto;
}
#texto-login{
padding-top: 15%;
vertical-align: center;
background: rgba(191, 233, 252, 0.5);
}
input#user,input#pass,input#Enviar{
margin: 5px auto;
padding: 5px 10px;
border-radius: 7px;
box-shadow: 5px 5px 0 #333;
-webkit-box-shadow: 5px 5px 0 #333;
-moz-box-shadow: 5px 5px 0 #333;
}
.caja {
margin: 10px;
box-shadow: 5px 5px 0 #333;
-webkit-box-shadow: 5px 5px 0 #333;
-moz-box-shadow: 5px 5px 0 #333;
background-color: #7b7c7a;
}
.login-logo{
border-radius: 7px;
border: 2px solid blue;
display: block;
margin: 15px auto;
width: 35%;
box-shadow: 5px 5px 0 #333;
-webkit-box-shadow: 5px 5px 0 #333;
-moz-box-shadow: 5px 5px 0 #333;
}
.caja #logo{
border-radius: 7px;
display: block;
margin: auto;
width: 40%;
box-shadow: 5px 5px 0 #333;
-webkit-box-shadow: 5px 5px 0 #333;
-moz-box-shadow: 5px 5px 0 #333;
}
.icono-sector{
color: white;
font-weight: bold;
text-align: right;
size: 24px;
align-items: right;
}
.caja-superior{
font-family: 'Montserrat', sans-serif;
margin-top: 15px;
padding: 10px 0;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-radius: 7px 7px 0 0;
text-align: center;
background-color: #FFA200;
color: white;
font-weight: bold;
}
.caja-medio{
font-family: 'Montserrat', sans-serif;
padding: 10px;
border-right: 1px solid black;
border-left: 1px solid black;
text-align: center;
background-color: #FFA200;
color: white;
font-weight: bold;
}
.caja-inferior{
font-family: 'Montserrat', sans-serif;
padding: 10px;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-radius: 0 0 7px 7px;
text-align: center;
background-color: #FFA200;
color: white;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/all.css">
<link rel="stylesheet" href="./css/styles.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/all.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/scripts.js"></script>
</head>
<body>
<div class="col-lg-12 enunciados"><h1>RED DE EMPRESAS COLABORADORAS</h1></div>
<div class="container">
<div class="row">
<div class="col-sm-3 jumbotron caja">
<div>
<img src="./img/logo.png" alt="Logo Corporativo" id="logo">
</div>
<div>
<div class="col-sm-12 caja-superior">EMPRESA</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SECTOR</div>
</div>
<div>
<div class="col-sm-12 caja-medio">WEB</div>
</div>
<div>
<div class="col-sm-12 caja-medio">E-MAIL</div>
</div>
<div>
<div class="col-sm-12 caja-medio">TELÉFONO</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SERVICIOS</div>
</div>
<div>
<div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
</div>
</div>
<div class="col-sm-3 jumbotron caja">
<div>
<img src="./img/logo.png" alt="Logo Corporativo" id="logo">
</div>
<div>
<div class="col-sm-12 caja-superior">EMPRESA</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SECTOR</div>
</div>
<div>
<div class="col-sm-12 caja-medio">WEB</div>
</div>
<div>
<div class="col-sm-12 caja-medio">E-MAIL</div>
</div>
<div>
<div class="col-sm-12 caja-medio">TELÉFONO</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SERVICIOS</div>
</div>
<div>
<div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
</div>
</div>
<div class="col-sm-3 jumbotron caja">
<div>
<img src="./img/logo.png" alt="Logo Corporativo" id="logo">
</div>
<div>
<div class="col-sm-12 caja-superior">EMPRESA</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SECTOR</div>
</div>
<div>
<div class="col-sm-12 caja-medio">WEB</div>
</div>
<div>
<div class="col-sm-12 caja-medio">E-MAIL</div>
</div>
<div>
<div class="col-sm-12 caja-medio">TELÉFONO</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SERVICIOS</div>
</div>
<div>
<div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
</div>
</div>
<div class="col-sm-3 jumbotron caja">
<div>
<img src="./img/logo.png" alt="Logo Corporativo" id="logo">
</div>
<div>
<div class="col-sm-12 caja-superior">EMPRESA</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SECTOR</div>
</div>
<div>
<div class="col-sm-12 caja-medio">WEB</div>
</div>
<div>
<div class="col-sm-12 caja-medio">E-MAIL</div>
</div>
<div>
<div class="col-sm-12 caja-medio">TELÉFONO</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SERVICIOS</div>
</div>
<div>
<div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3 jumbotron caja">
<div>
<img src="./img/logo.png" alt="Logo Corporativo" id="logo">
</div>
<div>
<div class="col-sm-12 caja-superior">EMPRESA</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SECTOR</div>
</div>
<div>
<div class="col-sm-12 caja-medio">WEB</div>
</div>
<div>
<div class="col-sm-12 caja-medio">E-MAIL</div>
</div>
<div>
<div class="col-sm-12 caja-medio">TELÉFONO</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SERVICIOS</div>
</div>
<div>
<div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
</div>
</div>
<div class="col-sm-3 jumbotron caja">
<div>
<img src="./img/logo.png" alt="Logo Corporativo" id="logo">
</div>
<div>
<div class="col-sm-12 caja-superior">EMPRESA</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SECTOR</div>
</div>
<div>
<div class="col-sm-12 caja-medio">WEB</div>
</div>
<div>
<div class="col-sm-12 caja-medio">E-MAIL</div>
</div>
<div>
<div class="col-sm-12 caja-medio">TELÉFONO</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SERVICIOS</div>
</div>
<div>
<div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
</div>
</div>
<div class="col-sm-3 jumbotron caja">
<div>
<img src="./img/logo.png" alt="Logo Corporativo" id="logo">
</div>
<div>
<div class="col-sm-12 caja-superior">EMPRESA</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SECTOR</div>
</div>
<div>
<div class="col-sm-12 caja-medio">WEB</div>
</div>
<div>
<div class="col-sm-12 caja-medio">E-MAIL</div>
</div>
<div>
<div class="col-sm-12 caja-medio">TELÉFONO</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SERVICIOS</div>
</div>
<div>
<div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
</div>
</div>
<div class="col-sm-3 jumbotron caja">
<div>
<img src="./img/logo.png" alt="Logo Corporativo" id="logo">
</div>
<div>
<div class="col-sm-12 caja-superior">EMPRESA</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SECTOR</div>
</div>
<div>
<div class="col-sm-12 caja-medio">WEB</div>
</div>
<div>
<div class="col-sm-12 caja-medio">E-MAIL</div>
</div>
<div>
<div class="col-sm-12 caja-medio">TELÉFONO</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SERVICIOS</div>
</div>
<div>
<div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3 jumbotron caja">
<div>
<img src="./img/logo.png" alt="Logo Corporativo" id="logo">
</div>
<div>
<div class="col-sm-12 caja-superior">EMPRESA</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SECTOR</div>
</div>
<div>
<div class="col-sm-12 caja-medio">WEB</div>
</div>
<div>
<div class="col-sm-12 caja-medio">E-MAIL</div>
</div>
<div>
<div class="col-sm-12 caja-medio">TELÉFONO</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SERVICIOS</div>
</div>
<div>
<div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
</div>
</div>
<div class="col-sm-3 jumbotron caja">
<div>
<img src="./img/logo.png" alt="Logo Corporativo" id="logo">
</div>
<div>
<div class="col-sm-12 caja-superior">EMPRESA</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SECTOR</div>
</div>
<div>
<div class="col-sm-12 caja-medio">WEB</div>
</div>
<div>
<div class="col-sm-12 caja-medio">E-MAIL</div>
</div>
<div>
<div class="col-sm-12 caja-medio">TELÉFONO</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SERVICIOS</div>
</div>
<div>
<div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
</div>
</div>
<div class="col-sm-3 jumbotron caja">
<div>
<img src="./img/logo.png" alt="Logo Corporativo" id="logo">
</div>
<div>
<div class="col-sm-12 caja-superior">EMPRESA</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SECTOR</div>
</div>
<div>
<div class="col-sm-12 caja-medio">WEB</div>
</div>
<div>
<div class="col-sm-12 caja-medio">E-MAIL</div>
</div>
<div>
<div class="col-sm-12 caja-medio">TELÉFONO</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SERVICIOS</div>
</div>
<div>
<div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
</div>
</div>
<div class="col-sm-3 jumbotron caja">
<div>
<img src="./img/logo.png" alt="Logo Corporativo" id="logo">
</div>
<div>
<div class="col-sm-12 caja-superior">EMPRESA</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SECTOR</div>
</div>
<div>
<div class="col-sm-12 caja-medio">WEB</div>
</div>
<div>
<div class="col-sm-12 caja-medio">E-MAIL</div>
</div>
<div>
<div class="col-sm-12 caja-medio">TELÉFONO</div>
</div>
<div>
<div class="col-sm-12 caja-medio">SERVICIOS</div>
</div>
<div>
<div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am going crazy because I am not able to center the boxes that you can see in the attached photo on a web. What you see in red is the ROW that, as in each col-sm-3 box, I add a margin-left: 10px, the 4 boxes exceed the ROW and it doesn't let me center it. It eats the 30+10 (the last 10 are not noticeable) px from the right.
I have flex-wrap disabled because otherwise I would skip to the line below, I know what I need to do is eat up the 30px on the left. But as I say, I don't know very well how to do it, since when putting a margin-left: -30px. Everything goes to hell. I have even tried putting a padding-left: -30px. but it doesn't focus on me.
El problema que tiene es que cierra demasiado rápido la fila, además de que genera varios
div
sin cierre. Recomiendo que use la documentación de bootstrap, es muy sencilla y perfecta para buenas prácticas.Cuando creas paginas web no debería utilizar el mismo ID en varios componentes.
Así quedaría el código:
El problema que veo es que no usas Bootstrap correctamente.
Te dejo un ejemplo básico, que cual yo creo que estás buscando: