<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="navbar navbar-inverse navbar-fixed-top"> <a class="navbar-brand" href="#">Brand</a> <ul class="nav navbar-nav"> <li><a href="#">Link1</a></li> </ul> </div> <div id="main-content" class="container" style="margin-top: 80px"> <h1>Login</h1> <form> <div class='field'> <label for="user_name">Name</label> <input autofocus="autofocus" id="user_name" name="user[name]" type="text" value="" /> </div> <div class='field'> <label for="user_password">Password</label> <input autocomplete="off" id="user_password" name="user[password]" type="password" /> </div> <div class='field'> <input name="user[remember_me]" type="hidden" value="0" /><input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1" /> <label for="user_remember_me">Remember me</label> </div> <div class='actions'> <input class="btn btn-primary btn-large" name="commit" type="submit" value="Log in" /> <a class="btn btn-success" href="/users/sign_up">Sign up</a> <a class="btn btn btn-warning" href="/users/password/new">Forgot your password?</a> </div> </form> <h2>Second</h2> </div> </div>

body { background-color: #d3d4d0; font-size: 14px; line-height: 140%; } h1, h2, h3 { margin: 2px -2px 20px; } h1 { font-size: 360%; } h1.sub { font-size: 230%; color: #545454; } h2 { font-size: 220%; padding: 6px 0px; color: #7c7c7c; border-bottom: solid 1px #d9d9d9; } .radius { border-radius: 20px; } .field { padding-bottom: 5px; } input[type="text"], input[type="password"], input[type="email"], select { border-radius: 4px; border: 1px solid #777; height: 34px; padding: 6px 9px; margin: 6px; vertical-align: 25%; width: 214px; background-color: #fff; } select { border-color: #48a; } input.top { vertical-align: top; } input[type="text"] { //width: 214px; } form { background-color: #fafafa; border-radius: 6px; padding: 10px; } .field_with_errors input { border: 1px solid #e66; } ul { margin-top: 16px; padding-left: 20px; .btn { margin-bottom: 9px; } } .radius-gray { background-color: #f3f3f3; padding: 25px; border-radius: 10px; } #main-content { background-color: #f6f6f6; padding: 25px; border-radius: 10px; } table { border-collapse: separate; border-radius: 6px; thead { background-color: #fff; } } .table-striped tbody tr { background-color: #fefefe; } .table-striped tbody tr:nth-child(odd) { background-color: #f9f9f9; } .form-horizontal label { width: 150px; } label em { font-weight: normal; }