Tabs

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

Usage

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

  <div class="cdt-tab">
  <ul>
    <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>
  </ul>
  <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>
  </div>
</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

Examples


Left aligned labels


Space in between


Right aligned labels