CODEWITHSUNDEEP
twitter-bootstrap
genxgeek
genxgeek

Reputation: 13347

How to create the following 3 col layout in Bootstrap?

How can I create the following 3col layout where each left-content and right-content (not nav style) is fixed and the main middle content can contain a hero (or whatever content).

Variations:

  1. middle content resizes with width of page
  2. middle content is fixed max width

Need to test both because a chart and other widgets are going in the middle content view and need to see how they react to fixed size or allow to stretch.

Variant 1 - Middle content resizes

enter image description here

enter image description here

Any info greatly appreciated!

Upvotes: 1

Views: 162

Answers (1)

SaurabhLP
SaurabhLP

Reputation: 3657

For a full screen layout, you have to use a container thats simply not a bootstrap grid layout because it will be responsive so your container will be adjust as far as screen resolution is consent...

Using div and css:-

.table { position:relative; }
.column { }
.column.left { position:absolute; left:0; top:0; width:300px; height:100%; }
.column.hero { margin:0 300px; }
.column.right { position:absolute; right:0; top:0; width:300px; height:100%; }

html:-

<div class="table">
    <div class="column left">Left Sidebar</div>
    <div class="column hero">Hero Layout</div>
       <div class="column right">Right Sidebar</div>
</div>

Demo:- http://jsfiddle.net/VTwnt/1/

Thanks hope that work for you...

Upvotes: 2

Related Questions