<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <br> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="caja-Login"> <div class="titulo"> <h2>Inicio de sesión</h2> </div> <form class="form-signin" action="#"> <div class="form-group"> <input type="text" class="form-control" placeholder="Correo electrónico" autocomplete="off" spellcheck="false" required autofocus> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Contraseña" autocomplete="off" spellcheck="false" required > </div> <button class="btn btn-lg btn-block purple-bg" type="submit">Ingresar</button> </form> <a class="lnkOlvide" href="#">Olvidé mi contraseña</a> <div class="or-box"> <span class="or">Ingresar con</span> <div class="row"> <div class="col-md-6 row-block"> <a href="#" class="btn btn-facebook btn-block">Facebook</a> </div> <div class="col-md-6 row-block"> <a href="#" class="btn btn-google btn-block">Google</a> </div> </div> </div> <div class="or-box row-block"> <div class="row"> <div class="col-md-12 row-block"> <a href="#" class="btn btn-primary btn-block">Registrarme</a> </div> </div> </div> </div> </div> </div> </div> <br>

.caja-Login { border: 2px solid rgba(153, 153, 153, 0.75); border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -khtml-border-radius: 2px; -o-border-radius: 2px; z-index: 3; font-size: 13px !important; font-family: "Helvetica Neue" ,Helvetica,Arial,sans-serif; background-color: #ffffff; padding: 20px; } .caja-Login .titulo { width: 100%; height: 30px; text-align: center; margin 0 auto; position: relative; padding-bottom:50px; } .caja-Login .lnkOlvide { margin-top: 10px; display: block; } .caja-Login .purple-bg { background-color: #6E329D; color: #fff; } .caja-Login .or-box { position: relative; border-top: 1px solid #dfdfdf; padding-top: 20px; margin-top:20px; } .caja-Login .or { color: #666666; background-color: #ffffff; position: absolute; text-align: center; top: -8px; width: auto; left: 35%; padding-left:10px; padding-right:10px; } .caja-Login .btn:hover { color: #fff; } .caja-Login .btn-facebook { background-color: #3F639E; color: #fff; font-weight:bold; } .caja-Login .btn-google { background-color: #454545; color: #fff; font-weight:bold; }