"Sidebar with panel"
Bootstrap 3.3.0 Snippet by johnathornton

<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-default sidebar" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1"> <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="#">My Profile</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">About Me<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a></li> <li><a href="#">Libraries<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-file"></span></a></li> <li><a href="#">Settings<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-cog"></span></a></li> <li><a href="#">Notifications<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-bell"></span></a></li> </ul> </div> </div> </nav> <div class="main"> <div class="row"> <div class="form-group"> <div class="col-xs-12"> <button type="submit" class="btn btn-default">Save</button> <button type="close" class="btn btn-default">Close</button> <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-lg-7"> <div class="panel panel-primary"> <div class="row"> <div class="col-xs-12"> <h4>My Information</h4> </div> </div> <div class="panel-body"> <form class="form-horizontal"> <div class="row"> <div class=" col-xs-12 col-sm-3 col-lg-2 text-center pull-right"> <img src="http://placehold.it/100x100" alt="..." class="img-rounded"> <div class="clearfix"></div> <div class="fileUpload btn"> Add Photo <input type="file" class="upload" /> </div> </div> <div class="col-sm-9 col-lg-10"> <div class="form-group"> <label for="inputtext1" class="col-sm-4 col-md-4 col-lg-3 control-label">First Name</label> <div class="col-sm-8 col-lg-9"> <input type="text" class="form-control" id="inputtext1" placeholder=""> </div> </div> <div class="form-group"> <label for="inputtext2" class="col-sm-4 col-md-4 col-lg-3 control-label">Last Name</label> <div class="col-sm-8 col-lg-9"> <input type="text" class="form-control" id="inputtext2" placeholder=""> </div> </div> <div class="form-group"> <label for="inputtext3" class="col-sm-4 col-md-4 col-lg-3 control-label">UserName</label> <div class="col-sm-8 col-lg-9"> <input type="text" class="form-control" id="inputtext3" placeholder=""> </div> </div> <div class="form-group"> <label for="inputtext2" class="col-sm-4 col-md-4 col-lg-3 control-label">Email</label> <div class="col-sm-8 col-md-8 col-lg-9"> <input type="email" class="form-control" id="inputtext2" placeholder=""> </div> </div> <div class="form-group"> <label for="inputtext2" class="col-sm-4 col-md-4 col-lg-3 control-label">Phone</label> <div class="col-sm-8 col-lg-9"> <input type="text" class="form-control" id="inputtext2" placeholder=""> </div> </div> <div class="form-group"> <label for="inputtext2" class="col-sm-4 col-lg-3 control-label">Extention</label> <div class="col-sm-8 col-lg-9"> <input type="text" class="form-control" id="inputtext2" placeholder=""> </div> </div> <div class="form-group"> <label for="inputtext2" class="col-sm-4 col-lg-3 control-label">Fax</label> <div class="col-sm-8 col-lg-9"> <input type="text" class="form-control" id="inputtext2" placeholder=""> </div> </div> </div> </div> </form> <div class="row text-center"> <button type="button" class="btn btn-default">Reset Password</button> <button type="button" class="btn btn-default">Manage Services</button> </div> </div> </div> </div> <div class="col-xs-12 col-lg-5"> <div class="panel panel-primary"> <div class="row"> <div class="col-xs-12"> <h4>My Information</h4> </div> </div> <div class="panel-body"> <form class="form-horizontal"> <div class="row"> <div class="checkbox"> <label> <input type="checkbox"> Include all outbound notifications </label> </div> <p>Customize your zipFormPlus signature here</p> </div> </form> </div> </div> </div> </div> </div>
body,html{ height: 100%; } /* remove outer padding */ .main .row{ padding: 0px; margin: 0px; } /*Remove rounded coners*/ nav.sidebar.navbar { border-bottom-right-radius:10px; border-bottom-left-radius:0px; border-top-right-radius:0px; } nav.sidebar, .main{ -webkit-transition: margin 200ms ease-out; -moz-transition: margin 200ms ease-out; -o-transition: margin 200ms ease-out; transition: margin 200ms ease-out; } /* Add gap to nav and right windows.*/ .main{ padding: 10px 10px 0 10px; } /* .....NavBar: Icon only with coloring/layout.....*/ /*small/medium side display*/ @media (min-width: 768px) { /*Allow main to be next to Nav*/ .main{ position: absolute; width: calc(100% - 40px); /*keeps 100% minus nav size*/ margin-left: 40px; float: right; } /*lets nav bar to be showed on mouseover*/ nav.sidebar:hover + .main{ margin-left: 200px; } /*Center Brand*/ nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 0px; } /*Center Brand*/ nav.sidebar .navbar-brand, nav.sidebar .navbar-header{ text-align: center; width: 100%; margin-left: 0px; } /*Center Icons*/ nav.sidebar a{ padding-right: 13px; } /*adds border top to first nav box */ nav.sidebar .navbar-nav > li:first-child{ border-top: 1px #e5e5e5 solid; } /*adds border to bottom nav boxes*/ nav.sidebar .navbar-nav > li{ border-bottom: 1px #e5e5e5 solid; } /* Colors/style dropdown box*/ nav.sidebar .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } /*allows nav box to use 100% width*/ nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{ padding: 0 0px 0 0px; } /*colors dropdown box text */ .navbar-inverse .navbar-nav .open .dropdown-menu>li>a { color: #777; } /*gives sidebar width/height*/ nav.sidebar{ width: 200px; height: 100%; margin-left: -160px; float: left; z-index: 8000; margin-bottom: 0px; } /*give sidebar 100% width;*/ nav.sidebar li { width: 100%; } /* Move nav to full on mouse over*/ nav.sidebar:hover{ margin-left: 0px; } /*for hiden things when navbar hidden*/ .forAnimate{ opacity: 0; } } /* .....NavBar: Fully showing nav bar..... */ @media (min-width: 1330px) { /*Allow main to be next to Nav*/ .main{ width: calc(100% - 200px); /*keeps 100% minus nav size*/ margin-left: 200px; } /*Show all nav*/ nav.sidebar{ margin-left: 0px; float: left; } /*Show hidden items on nav*/ nav.sidebar .forAnimate{ opacity: 1; } } nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus { color: #CCC; background-color: transparent; } nav:hover .forAnimate{ opacity: 1; } section{ padding-left: 15px; } //TODO should be removed from here when merging .fileUpload { position: relative; overflow: hidden; margin: 5px; text-decoration: underline; } .fileUpload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .verticle-content{ display: block;}
function htmlbodyHeightUpdate(){ var height3 = $( window ).height() var height1 = $('.nav').height()+50 height2 = $('.main').height() if(height2 > height3){ $('html').height(Math.max(height1,height3,height2)+10); $('body').height(Math.max(height1,height3,height2)+10); } else { $('html').height(Math.max(height1,height3,height2)); $('body').height(Math.max(height1,height3,height2)); } } $(document).ready(function () { htmlbodyHeightUpdate() $( window ).resize(function() { htmlbodyHeightUpdate() }); $( window ).scroll(function() { height2 = $('.main').height() htmlbodyHeightUpdate() }); });

Related: See More


Questions / Comments: