<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class='container'> <div class='row'> <form class='form-signin mg-btm'> <h3 class='heading-desc'> <button aria-hidden='true' class='close pull-right' type='button'>×</button> Login to Karpuz </h3> <div class='social-box'> <div class='row mg-btm'> <div class='col-md-12'> <a class='btn btn-primary btn-block' href='#'> <i class='icon-facebook'></i> Login with Instagram </a> </div> </div> </div> <div class='main'> <input autofocus='' class='form-control' placeholder='Email' type='text'> <input class='form-control' placeholder='Password' type='password'> Are you a business? <a href=''>Get started here</a> <span class='clearfix'></span> </div> <div class='login-footer'> <div class='row'> <div class='col-xs-6 col-md-6'> <div class='left-section'> <a href=''>Forgot your password?</a> <a href=''>Sign up now</a> </div> </div> <div class='col-xs-6 col-md-6 pull-right'> <button class='btn btn-large btn-danger pull-right' type='submit'>Login</button> </div> </div> </div> </form> </div> </div>

.form-signin { max-width: 400px; display:block; background-color: #f7f7f7; -moz-box-shadow: 0 0 3px 3px #888; -webkit-box-shadow: 0 0 3px 3px #888; box-shadow: 0 0 3px 3px #888; border-radius:2px; } .main{ padding: 38px; } .social-box{ margin: 0 auto; padding: 38px; border-bottom:1px #ccc solid; } .social-box a{ font-weight:bold; font-size:18px; padding:8px; } .social-box a i{ font-weight:bold; font-size:20px; } .heading-desc{ font-size:20px; font-weight:bold; padding:38px 38px 0px 38px; } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin .checkbox { font-weight: normal; } .form-signin .form-control { position: relative; font-size: 16px; height: 20px; padding: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="text"] { margin-bottom: 10px; border-radius: 5px; } .form-signin input[type="password"] { margin-bottom: 10px; border-radius: 5px; } .login-footer{ background:#f0f0f0; margin: 0 auto; border-top: 1px solid #dadada; padding:20px; } .login-footer .left-section a{ font-weight:bold; color:#8a8a8a; line-height:19px; } .mg-btm{ margin-bottom:0px; }