Skip to content

Instantly share code, notes, and snippets.

@royshil

royshil/custom-width-sidebar.html

Created January 27, 2016 12:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save royshil/1bf6d0b9bf4f27ce5380 to your computer and use it in GitHub Desktop.
Save royshil/1bf6d0b9bf4f27ce5380 to your computer and use it in GitHub Desktop.
Download ZIP
Custom width sidebar with Bootstrap3 container-fluid main
Raw
custom-width-sidebar.html
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="sidebar">
<ul class="nav nav-sidebar">
<li>Sidebar:</li>
<li><a href="#"><i class="fa fa-home"></i>&nbsp;Main</a></li>
<li><a href="#"><i class="fa fa-question"></i>&nbsp;Help</a></li>
</ul>
</div>
<div class="main">
<div class="main-wrapper">
<div class="row">
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
Hello!
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
Hello again!
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment