2 sidebars with middle col-md centered bootstrap - html

Question

How can I make my website look like this using bootstrap? I want 2 sidebars with 300px on both sides of container. The middle column I wanna be centered on the middle of page.
<!-- this is my middle column -->
<div class="container content profile">
<div class="row">
<!-- Begin Content -->
<div class="col-md-12">
</div>
</div> <!-- end row -->
</div>
http://i.stack.imgur.com/irIrU.jpg

Answer 1

You can try like this, Hope it will helps you.
.mid-col{
background: red;
}
.left-section{
width: 300px;
background: blue;
}
.right-section{
width: 300px;
background: green;
}
.profile .col-md-12.mid-col{
width: calc(100% - 600px);
}
#media only screen and (max-width: 989px) {
.profile .col-md-12.mid-col ,
.left-section,
.right-section{
width: 100%;
float: none !important;
margin-bottom: 5px;
}
}
<div class="container content profile">
<div class="row">
<!-- left section -->
<div class="left-section pull-left">
L
</div>
<!-- left section -->
<div class="col-md-12 mid-col">
M
</div>
<!-- right section -->
<div class="left-section pull-right">
R
</div>
<!-- right section -->
</div>
</div>

Answer 2

You can check with the below link.
Updated fiddle
<div class="row">
<div class="col-xs-2 "
style="height:600px;background:blue">
<h4> Left sidebar</h4>
</div>
<div class="col-xs-8 "
style="height:600px;background:yellow">
<h4 style="text-align:center;"> Content</h4>
</div>
<div class="col-xs-2 "
style="height:600px;background:green">
<h4> Right sidebar</h4>
</div>
</div>