<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 ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"> <div class="container"> <div class="row"> <div clas="col-md-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title" id="myModalLabel">Вход</a> </div> <div class="panel-body"> <div class="row"> <div class="col-xs-6"> <div class="well"> <form role="form"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label for="username" class="control-label">Электронная почта</label> <input type="text" class="form-control" name="email" value="" required title="Электронная почта" placeholder="электронная почта"> <span class="help-block"></span> </div> <div class="form-group"> <label for="password" class="control-label">Пароль <a href="/sessions/forgot_password">(Забыли пароль?)</a></label> <input type="password" class="form-control" name="password" placeholder="пароль" value="" required="" title="Введите пароль"> <span class="help-block"></span> </div> </div> </div> <div class="row"> <div class="col-md-12"> <h5>Неправильно введены данные</h5> </div> </div> <div class="row"> <div class="col-md-6"> <button type="submit" value="login" name="submit" class="btn btn-success btn-block">Вход</button> </div> <div class="col-md-6"> <a href="">Регистрация</a> </div> </div> </form> </div> </div> <div class="col-xs-6"> <h5>Войдите с помощью социальных сетей</h5> <ul class="list-unstyled list-social"> <li> <a href="#" class="btn btn-lg btn-primary btn-block"> <i class="fa fa-google-plus"></i> <span class="">Google</span> </a> </li> <li> <a href="#" class="btn btn-lg btn-default btn-block"> <i class="fa fa-facebook"></i> <span class="">Facebook</span> </a> </li> <li> <a href="#" class="btn btn-lg btn-default btn-block"> <i class="fa fa-vk"></i> <span class="">ВКонтакте</span> </a> </li> <li> <a href="#" class="btn btn-lg btn-default btn-block"> <i class="fa fa-odnoklassniki"></i> <span class="">Одноклассники</span> </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div>

body { background-color:#cacaca; } ul.list-social > li { padding-bottom: 5px; }