<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 ----------> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://getbootstrap.com/examples/dashboard/#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="http://getbootstrap.com/examples/dashboard/#">Dashboard</a></li> <li><a href="http://getbootstrap.com/examples/dashboard/#">Settings</a></li> <li><a href="http://getbootstrap.com/examples/dashboard/#">Profile</a></li> <li><a href="http://getbootstrap.com/examples/dashboard/#">Help</a></li> </ul> </div> </div> </nav> <div class="container-fluid container-full-height"> <div class="row row-full-height"> <div class="hidden-xs col-sm-6 col-md-8 col-full-height login-main-content"> <h3>Test1</h3> <h3>Test2</h3> <h3>Test3</h3> </div> <div class="col-sm-6 col-md-4 col-full-height login-form"> <div> <form class="form-horizontal" role="form"> <div class="form-group"> <div class="col-sm-10 col-sm-offset-1"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email" required> </div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-1"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password" required> </div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-1"> <div class="checkbox"> <label> <input type="checkbox"/> Remember me </label> </div> </div> </div> <div class="form-group last"> <div class="col-sm-10 col-sm-offset-1"> <button type="submit" class="btn btn-success btn-sm"> Sign in</button> <button type="reset" class="btn btn-default btn-sm"> Reset</button> </div> </div> </form> <div class="row"> <div class="col-sm-10 col-sm-offset-1"> Not Registred? <a href="http://www.jquery2dotnet.com">Register here</a> </div> </div> </div> </div> </div> </div>

/* * Base structure */ /* Move down content because we have a fixed navbar that is 50px tall */ body { padding-top: 50px; } html, body { height: 100%; } /* * Top navigation * Hide default border to remove 1px line. */ .navbar-fixed-top { border: 0; } .container-full-height { height: 100%; } .container-full-height, .row-full-height, .col-full-height { height: 100%; } .navbar-nav li button { margin-top: 8px; } .navbar-brand { padding-top: 5px; } .navbar-brand img { height: 40px } .navbar-header { padding-left: 50px; } .navbar-right { padding-right: 50px; } .login-form { padding-top: 20px; } .login-main-content { background-color: #f5f5f5; border-right: 1px solid #eee; }