I'm creating a form within a footer and that's how it looks in different resolutions:
col-lg-4 :
col-md-4 and col-sm-4 :
col-xs-12 :
As you can see, the label that contains the word "New:" remains aligned with the input that contains the "Ruth" in all the resolutions, except in col-xs-12 . I tried to align it with CSS but I'm not nailed.
I do not put the snipet because curiously it does not look the same as in my browser, but here's the code:
html :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>LosTurnos</title>
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Bootstrap Tema opcional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="footer">
<div class="navbar navbar-inner navbar-fixed-bottom navbar-inverse mifooter">
<p class="muted credit">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<form id="miform" action="trae_nuevo_empaque.php" class="form-inline">
<div class="form-group"><label id="nuevito"><span>Nuevo:</span></label>
<div class="input-group">
<div class="input-group-addon">Rut</div>
<input type="text" maxlength="8" class="form-control rut" placeholder="8 dígitos" required>
</div>
<div class="input-group">
<div class="input-group-addon">Nombre</div>
<input type="text" class="form-control nombre" placeholder="El primer nombre" required>
</div>
<div class="input-group">
<div class="input-group-addon">Apellido</div>
<input type="text" class="form-control" placeholder="Un apellido" required>
</div>
<div class="input-group emailpe">
<div class="input-group-addon">E-Mail</div>
<input type="email" class="form-control" placeholder="[email protected]" required>
</div>
<div class="input-group divenviareg">
<div class="input-group-addon">Enviar correo de registro</div>
<button type="submit" class="btn btn-info enviareg"><i class="glyphicon glyphicon-ok"></i></button>
</div>
</div>
</form>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ullam earum assumend</p>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae quos ipsa distinctio asp.</p>
</div>
</div>
</div>
</p>
</div>
</div>
</body>
</html>
css :
.form-group > #nuevito{
color: white;
display: inline-block !important;
}
.form-group #nuevito span{
padding-right: 10px !important;
display: inline-block !important;
}
.input-group{
max-width: 230px;
}
.rut{
max-width: 134px;
}
.emailpe{
min-width: 230px;
}
.input-group-addon, .form-control, .enviareg{
padding-top: 1px;
padding-bottom: 1px;
padding-left: 4px;
padding-right: 6px;
height: 25px;
}
.enviareg{
width: 56px;
border-bottom-left-radius:0px;
border-top-left-radius:0px;
}
.divenviareg{
margin-top: 3px;
min-width: 231px;
}
Any ideas on how to align the word "New:" with the Rut input in the resolution col-xs-12?
Any suggestions to improve this form is welcome.