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.
<!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> |
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%; | |
} |
<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> |