Bootstrap three columns layout with collapsable side bars

Question

Looking to use Bootstrap 3 for a particular layout but im not quite sure the best way to acheive this.

I want a three column layout something along the lines of

<div class="container">
  <div class="row">
   <div class="col-md-2">Left Hand Panel</div>
   <div class="col-md-8">Main Panel</div>
   <div class="col-md-2">Right Panel</div>
 </div>
</div>

I want the ability to be able to collapse the side panels and have the main panel adjust to take the available room.

I am unsure how to implement this sort of behvaiour with bootstrap, i want some sort of small splitter between the panels which will allow the user to toggle the panels state.

I can't see how to implement this with the grid system

Do you want to collapse side panels on mobile/tablet devices? If so; use media queries to hide col-md-2 and give main panel col-md-12 — Gokhan Demirhan, Dec 19 '13 at 14:12
I want to give the user the ability to collapse these panels. So a user click a arrow icons and the right panel collapses and the main panel re-sizes itself. Unfortunately its part of a design that we can not get rid of. — user3118867, Dec 19 '13 at 15:21
Can you please look at this example in a small window: http://startbootstrap.com/templates/simple-sidebar.html As you can see, there is a small button that reveals the sidebar on click and adds active class to wrapper and change sidebars css too — Gokhan Demirhan, Dec 19 '13 at 15:34
Here is a really basic fiddle: It needs transitions to look good: http://jsfiddle.net/52VtD/1170/ — Gokhan Demirhan, Dec 19 '13 at 16:02
This is sort of the solution i am currently working on, but instead i have to small 10px bars inside the main panel on each side. These will be used to toggle the correct classes — user3118867, Dec 19 '13 at 16:15

score 1 · Answer 1 · answered Dec 19 '13 at 11:50

This is quite tricky as Bootstrap doesn't have this in their documentation(Not that I'm aware of)

I'd suggest maybe creating your desktop or larger screen size layouts then create the mobile layouts, this would be:

Desktop:

<div class="container desktop">
  <div class="row">
   <div class="col-md-2">Left Hand Panel</div>
   <div class="col-md-8">Main Panel</div>
   <div class="col-md-2">Right Panel</div>
 </div>
</div>

Tablet & Mobile:

<div class="container tablet-mobile">
  <div class="row">
   <div class="col-md-2">Main Panel</div>
   <div class="col-md-8">Left Hand Panel</div>
   <div class="col-md-2">Right Panel</div>
 </div>
</div>

Thereafter you can hide the .tablet-mobile div:

.tablet-mobile{display: none;}

Then after you can display it according to media query for tablet and mobile:

@media only screen and ( max-width: 830px ) { 
        .tablet-mobile{display:block;}
        .desktop{display:none;}

}

I will need different views for mobile/tablet/desktop but i can use the classes aready provided by bootstrap to handle this functionality. I am really only looking for a way to implement the collapse panels functionality — user3118867, Dec 19 '13 at 12:45

Vishal Patel · Answer 2 · 2013-12-20T06:48:33.153

do you want something like this see JsFiddle..

HTML

<div id="Tabs">
    <ul>
        <li><a href="#Div1">col-md-2</a></li>
        <li class="end"><a href="#Div2" style="width: 82px !important">col-md-8</a></li>
        <li class="end"><a href="#Div3" style="width: 82px !important">col-md-2</a></li>
    </ul>
    <div>
        <div id="Div1" style="color: Black !important;">
            <div class="bg">
                Div 1
            </div>
        </div>
        <div id="Div2" style="color: Black !important;">
            <div class="bg">
                Div 2
            </div>
        </div>
        <div id="Div3" style="color: Black !important;">
            <div class="bg">
                Div 3
            </div>
        </div>
    </div>
</div>

JQUery

$(document).ready(function () {
            $("#Tabs").tabs();

            $("#close").click(function () {
                $("#Tabs").tabs({
                    hide: {
                        effect: "fade",
                        duration: 500
                    },
                    show: {
                        effect: "fade",
                        duration: 500
                    },
                    collapsible: true,
                    active: false
                });
            });
        });

I can get the three column layout working fine, its just which way to go about implementing the collapsable functionality — user3118867, Dec 19 '13 at 12:42
@user3118867 Do you want something like this (See JsFiddle) ? — Vishal Patel, Dec 20 '13 at 06:49
No that jQuery tabs functionality, I trying to acheive a fixed centre content panel/pane with collapsble side content. But the collapse side content is on a user basis not screen size — user3118867, Dec 20 '13 at 08:36

Bootstrap three columns layout with collapsable side bars

2 Answers2