Our themes comes with four types of tab shortcodes. Please check live demo: http://demo.drupar.com/berrypro/tab
Screenshot
Please use below sample code to create Tabs on your website as shown in above screenshot and on demo page.
Tab Type 1 (Top Tab)
<ul class="nav-tabs">
<li><a href="#design">Design</a></li>
<li><a href="#development">Development</a></li>
<li><a href="#hosting">Web Hosting</a></li>
<li><a href="#drupal">Drupal</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="design">
Maecenas dolor est, interdum smod eu, accumsan posuere nisl. Namsed iaculis massa, tashin ty.Maecenas dolor est, interdum smod eu, accumsan posuere nisl. Namsed iaculis massa, tashin. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.
</div>
<div class="tab-pane" id="development">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus eleifend risus ut congue. Pellentesque nec lacus elit. Pellentesque convallis nisi ac augue pharetra eu tristique neque consequat. Mauris ornare tempor nulla, vel sagittis diam convallis eget. Ut ultricies ornare dui, ac accumsan diam convallis eget. Nulla eget libero ligula, ac scelerisque sapien. Proin ornare ultrices enim sed tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl enim, rhoncus non lobortis
</div>
<div class="tab-pane" id="hosting">
Pellentesque nec lacus elit Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur
</div>
<div class="tab-pane" id="drupal">
Nulla eget libero ligula, ac scelerisque sapien. Donec sit amet sapien purus, sit amet tristique nisi. Fusce non sapien sapien. Aenean vel felis lectus. Integer nec risus neque, eget sagittis est. Nulla eget libero ligula, ac scelerisque sapien. Proin ornare ultrices enim sed tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl enim, rhoncus non lobortis ornare, sollicitudin vel neque. Quisque facilisis eros eu dolor sollicitudin aliquet. Vestibulum eget aliquet diam. Fusce vehicula nulla nec nisl hendrerit laoreet. Quisque facilisis eros.
</div>
</div>Tab Type 2 (Bottom Tab)
<div class="tabbable tabs-below">
<div class="tab-content">
<div class="tab-pane" id="design-b">
Maecenas dolor est, interdum smod eu, accumsan posuere nisl. Namsed iaculis massa, tashin ty.Maecenas dolor est, interdum smod eu, accumsan posuere nisl. Namsed iaculis massa, tashin. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.
</div>
<div class="tab-pane" id="development-b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus eleifend risus ut congue. Pellentesque nec lacus elit. Pellentesque convallis nisi ac augue pharetra eu tristique neque consequat. Mauris ornare tempor nulla, vel sagittis diam convallis eget. Ut ultricies ornare dui, ac accumsan diam convallis eget. Nulla eget libero ligula, ac scelerisque sapien. Proin ornare ultrices enim sed tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl enim, rhoncus non lobortis
</div>
<div class="tab-pane" id="hosting-b">
Pellentesque nec lacus elit Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur
</div>
<div class="tab-pane" id="drupal-b">
Nulla eget libero ligula, ac scelerisque sapien. Donec sit amet sapien purus, sit amet tristique nisi. Fusce non sapien sapien. Aenean vel felis lectus. Integer nec risus neque, eget sagittis est. Nulla eget libero ligula, ac scelerisque sapien. Proin ornare ultrices enim sed tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl enim, rhoncus non lobortis ornare, sollicitudin vel neque. Quisque facilisis eros eu dolor sollicitudin aliquet. Vestibulum eget aliquet diam. Fusce vehicula nulla nec nisl hendrerit laoreet. Quisque facilisis eros.
</div>
</div>
<ul class="nav-tabs">
<li><a href="#design-b">Design</a></li>
<li><a href="#development-b">Development</a></li>
<li><a href="#hosting-b">Web Hosting</a></li>
<li><a href="#drupal-b">Drupal</a></li>
</ul>
</div> <!-- /tabbable -->Tab Type 3 (Left Tab)
<div class="tabbable tabs-left">
<ul class="nav-tabs">
<li><a href="#design-l">Design</a></li>
<li><a href="#development-l">Development</a></li>
<li><a href="#hosting-l">Web Hosting</a></li>
<li><a href="#drupal-l">Drupal</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="design-l">
Maecenas dolor est, interdum smod eu, accumsan posuere nisl. Namsed iaculis massa, tashin ty.Maecenas dolor est, interdum smod eu, accumsan posuere nisl. Namsed iaculis massa, tashin. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.
</div>
<div class="tab-pane" id="development-l">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus eleifend risus ut congue. Pellentesque nec lacus elit. Pellentesque convallis nisi ac augue pharetra eu tristique neque consequat. Mauris ornare tempor nulla, vel sagittis diam convallis eget. Ut ultricies ornare dui, ac accumsan diam convallis eget. Nulla eget libero ligula, ac scelerisque sapien. Proin ornare ultrices enim sed tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl enim, rhoncus non lobortis
</div>
<div class="tab-pane" id="hosting-l">
Pellentesque nec lacus elit Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur
</div>
<div class="tab-pane" id="drupal-l">
Nulla eget libero ligula, ac scelerisque sapien. Donec sit amet sapien purus, sit amet tristique nisi. Fusce non sapien sapien. Aenean vel felis lectus. Integer nec risus neque, eget sagittis est. Nulla eget libero ligula, ac scelerisque sapien. Proin ornare ultrices enim sed tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl enim, rhoncus non lobortis ornare, sollicitudin vel neque. Quisque facilisis eros eu dolor sollicitudin aliquet. Vestibulum eget aliquet diam. Fusce vehicula nulla nec nisl hendrerit laoreet. Quisque facilisis eros.
</div>
</div>
</div> <!-- /tabbable left -->Tab Type 4 (Right Tab)
<div class="tabbable tabs-right">
<ul class="nav-tabs">
<li><a href="#design-r">Design</a></li>
<li><a href="#development-r">Development</a></li>
<li><a href="#hosting-r">Web Hosting</a></li>
<li><a href="#drupal-r">Drupal</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="design-r">
Maecenas dolor est, interdum smod eu, accumsan posuere nisl. Namsed iaculis massa, tashin ty.Maecenas dolor est, interdum smod eu, accumsan posuere nisl. Namsed iaculis massa, tashin. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.
</div>
<div class="tab-pane" id="development-r">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus eleifend risus ut congue. Pellentesque nec lacus elit. Pellentesque convallis nisi ac augue pharetra eu tristique neque consequat. Mauris ornare tempor nulla, vel sagittis diam convallis eget. Ut ultricies ornare dui, ac accumsan diam convallis eget. Nulla eget libero ligula, ac scelerisque sapien. Proin ornare ultrices enim sed tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl enim, rhoncus non lobortis
</div>
<div class="tab-pane" id="hosting-r">
Pellentesque nec lacus elit Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur
</div>
<div class="tab-pane" id="drupal-r">
Nulla eget libero ligula, ac scelerisque sapien. Donec sit amet sapien purus, sit amet tristique nisi. Fusce non sapien sapien. Aenean vel felis lectus. Integer nec risus neque, eget sagittis est. Nulla eget libero ligula, ac scelerisque sapien. Proin ornare ultrices enim sed tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl enim, rhoncus non lobortis ornare, sollicitudin vel neque. Quisque facilisis eros eu dolor sollicitudin aliquet. Vestibulum eget aliquet diam. Fusce vehicula nulla nec nisl hendrerit laoreet. Quisque facilisis eros.
</div>
</div>
</div> <!-- /tabbable right -->