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.
<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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With