１カラム構成バージョンになります。
左右は縦棒、真ん中にコンテンツがあるイメージです。
３カラム構成として利用することも可能ですが、両端が自動で色がfillrectangeしてくれる
用にしています。
その点が1カラム用のデザインレイアウトになります。
以下ソースです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap3ノ進め方</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!--[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]-->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style type="text/css">
<!--
#header {
height: 50px;
background-color: #EEE;
width: 100%;
text-align: center;
}
#footer {
height: 30px;
background-color: #AAA;
text-align: center;
}
.container {
display:table;
width: 100%;
margin-top: -50px;
padding: 50px 0 0 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row {
height: 100%;
display: table-row;
}
#contents > .row > .col-xs-2, #contents > .row > .col-xs-8 {
display: table-cell;
float: none;
}
-->
</style>
</head>
<body>
<div id="header">1カラム中央構え</div>
<div id="contents" class="container">
<div class="row">
<div class="col-xs-2" style="background-color: #CCC;"></div>
<div class="col-xs-8">
テキスト１<br />
テキスト２<br />
テキスト３<br />
テキスト４<br />
テキスト５<br />
テキスト６<br />
テキスト７<br />
テキスト８<br />
テキスト９<br />
</div>
<div class="col-xs-2" style="background-color: #CCC;"></div>
</div>
</div>
<div id="footer">フッター</div>
</body>
</html>