10

How do i layout bootstrap grids if i want to make this responsive layout?

In the images below, the small box is like a tab, when clicked it will show the content at the bottom of it.

When the window / viewed in smaller screen it will reduce the columns accordingly however it should preserve its functionality.

Desktop

Desktop

Tablets

Desktop

Mobile

Desktop

Bootstrap layout

 <div class="row">

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>                
        <div class="clearfix"></div>
      </div>     

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>                
        <div class="clearfix"></div>
      </div>     

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>  

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>
  </div>

  <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#" class="double-line">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>   

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>     

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#" class="double-line">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>  

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>
  </div>

1 Answer 1

1

This can be accomplished with the collapse javascript functionality in Bootstrap. See http://getbootstrap.com/javascript/#collapse

You could use this code snippet to accomplish it.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  Simple collapsible </button>
 <div id="demo" class="collapse in">...</div>

And then try this:

  <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
     <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">Button to toggle open and close</button></div>
   <div id="demo" class="collapse in col-md-12 what-content">...</div>

You will need to do the rest of the code, but this should get you started.

1
  • I already have the accordion function. The problem i'm facing is how do i stretch the content section to full wiidth? The "what-tab" position is set to relative, so it means that all the content width inside of it is constricted with the its width.
    – Wreeecks
    Commented May 6, 2014 at 4:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.