Skip to content

Instantly share code, notes, and snippets.

@JayHoltslander

JayHoltslander/COMPLETE.html

Created May 4, 2014 23:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JayHoltslander/5802ecbef55d125f9037 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JayHoltslander/5802ecbef55d125f9037 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 3 Page with a full height sidebar
Raw
README.md

A sample page with a sidebar that hides on mobile phones. (xs)

When hidden the main content area changes from a column that is 10 wide, to 12 wide (Full width.)

The content is full window height.

Raw
COMPLETE.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Sidebar</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
html,body {
height:100%;
background-color:#000;
}
.container {
height:100%;
}
.main-row {
margin-left:0;
margin-right:0;
}
.fill {
width:100%;
height:100%;
min-height:100%;
padding:0px;
}
.sidebar
{
background: #F0F0F0;
height:100%;
min-height:100%;
}
.main-content-area
{
background: #fff;
background-image: url(http://placehold.it/1280x1024);
background-position: 50% 50%; /* image centered on screen */
height:100%;
min-height:100%;
}
</style>
</head>
<body>
<div class="row main-row fill">
<div class="col-sm-2 sidebar hidden-xs">
<h3>Navigation</h3>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="col-sm-10 col-xs-12 main-content-area">
<h1 class="page-header">Content</h1>
<p>Content</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Raw
CSS.css
html,body {
height:100%;
}
.container {
height:100%;
}
.main-row {
margin-left:0;
margin-right:0;
}
.fill {
width:100%;
height:100%;
min-height:100%;
padding:0px;
}
.sidebar
{
background: #F0F0F0;
height:100%;
min-height:100%;
}
.main-content-area
{
background: #fff;
background-image: url(http://placehold.it/1280x1024);
background-position: 50% 50%; /* image centered on screen */
height:100%;
min-height:100%;
}
Raw
HTML.html
<div class="row main-row fill">
<div class="col-sm-2 sidebar hidden-xs">
<h3>Navigation</h3>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="col-sm-10 col-xs-12 main-content-area">
<h1 class="page-header">Content</h1>
<p>Content</p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment