Dylan Steele Dylan Steele - 10 days ago 3
ASP.NET (C#) Question

How to create 3 column fluid layout with Bootstrap?

I'm sorry if this is a duplicate, but I couldn't seem to find the answer to my question and I am having difficulties with bootstrap.

I am trying to make a 3 Column layout for a web page. I want each sidebar to take up 3 columns and fill that space and have the center content area take up 6 and fill the space. I found an example online and tweaked it a bit, but couldn't get the results I want.

<div class="container-fluid" id="container">
<div class="row-fluid">
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 span-3" >
<div class="sidebar-nav-fixed affix" id="Left-Side">
<div class="well">
<ul class="nav ">
<li class="nav-header">Sidebar</li>
<li class="active"><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
<!--/.well -->
</div>
<!--/sidebar-nav-fixed -->
</div>
<!--/span-->
<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 span-6" id="Content">
<div class="jumbotron">
<h1>Hello, world!</h1>

<p>
This is a template for a simple marketing or informational website. It
includes a large callout called the hero unit and three supporting pieces
of content. Use it as a starting point to create something more unique.
</p>
<p>
<a class="btn btn-primary btn-lg">Learn more ยป</a>
</p>
</div>

</div>
<!--/span-->
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 span-3" id="Right-Side">
<div class="sidebar-nav-fixed pull-right affix">
<div class="well">
<ul class="nav ">
<li class="nav-header">Sidebar</li>
<li class="active"><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
<!--/.well -->
</div>
<!--/sidebar-nav-fixed -->
</div>
<!--/span-->
</div>
<!--/row-->





This is as far as I have gotten. I am very new to using bootstrap and don't really understand how to properly use it. Just in case this matter I am doing this project with ASP.NET.

This is what the page looks like when loaded.

Answer

Your code is correct and the layout is rendering as it should. Your problem is the "affix" class on your sidebars is causing them to collapse to the width of the content. Do you need these sidebars in a fixed position? If not then remove the "affix" class. Otherwise you will have to give these containers a width in order to fill the 3 column spacing.

Try something like this...

.sidebar-nav-fixed {
width: 25%;
padding-right: 30px;
}