Tabs are essential if you want to group together certain contents for better visuals in specific space in your page.


Following is the required html markup you need for Kodhus to style your tabs.

  <div class="cdt-tab">
    <li class="selected"><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Tab 4</a></li>
    <li><a href="#">Tab 5</a></li>
  <div class="tabs-content">
    <div>Tab content for tab 1</div>
    <div>Tab content for tab 2</div>
    <div>Tab content for tab 3</div>
    <div>Tab content for tab 4</div>
    <div>Tab content for tab 5</div>

By default, the tab labels are aligned to the left. You can set them to fill the whole width by adding the class .center to your element with class .cdt-tab. You can also align them to right by adding the class .right


Left aligned labels

Space in between

Right aligned labels