<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"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="content-box"> <img src="http://demo.wpcrunchy.com/simplybiz/wp-content/uploads/sites/8/2012/12/48_account.png" class="content-box-icon" alt="Icon"> <h3 class="content-box-title">Identity nunc turpis</h3> <span class="content-box-tagline">Add short tagline here</span> <div class="content-box-text"> <p>Sanctus sea sed takimata ut vero voluptua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui...</p> </div> </div> </div> <div class="col-md-10 col-md-offset-1"> <div class="content-box"> <img src="http://demo.wpcrunchy.com/simplybiz/wp-content/uploads/sites/8/2012/12/48_settings.png" class="content-box-icon" alt="Icon"> <h3 class="content-box-title">Development quis</h3> <span class="content-box-tagline">Add short tagline here</span> <div class="content-box-text"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam...</p> </div> </div> </div> <div class="col-md-10 col-md-offset-1"> <div class="content-box"> <img src="http://demo.wpcrunchy.com/simplybiz/wp-content/uploads/sites/8/2012/12/48_structure.png" class="content-box-icon" alt="Icon"> <h3 class="content-box-title">Planning nunc ultrices</h3> <span class="content-box-tagline">Add short tagline here</span> <div class="content-box-text"> <p>Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis</p> </div> </div> </div> </div> </div> <div class="col-sm-6 col-md-4 col-full-height col-vertical-height login-form"> <div class="col-vertical-top"> <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 class="col-vertical-bottom"> <p>This is EnWaKe...</p> </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; } /** Column **/ .container-full-height { height: 100%; } .container-full-height, .row-full-height, .col-full-height { height: 100%; } .col-vertical-height { display: table !important; } .col-vertical-top { display: table-row; vertical-align: top; } .col-vertical-middle { display: table-row; vertical-align: middle; } .col-vertical-bottom { display: table-row; vertical-align: bottom; } .vertical-center { min-height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } /** NavBar**/ .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; }