Tabs

All modular elements can be readily used and customized in every layout across pages.

Smart Tab

Add class .active to .nav-bar-item and corresponding .tab-content which you want to show after page loading. Add data-tabs attribute in parants

Duis ac facilisis mauris. Pellentesque leo tortor, maximus sed gravida dapibus, suscipit non nisi. Duis ultrices diam a maximus imperdiet. Nam eu purus a erat tristique ornare. Donec condimentum tristique diam eu congue.

Nullam sed tempus mauris, vitae pretium nibh. Nam pretium diam id massa mollis pretium. Aenean lacus massa, tristique id mauris ac, sollicitudin auctor neque. Cras laoreet nunc nibh, ac tristique orci rutrum quis. Nam luctus, sapien ligula finibus turpis.

Vestibulum convallis diam id nibh tempus, ac scelerisque nulla congue. Cras laoreet nunc nibh, ac tristique orci rutrum quis. Sed eu tellus pharetra, scelerisque nulla in, vehicula libero. Curabitur interdum nec metus ante sed luctus.

<div class="tabs mt-4" data-tabs="data-tabs">
  <div class="nav-bar nav-bar-center">
    <div class="nav-bar-item active"> <span class="icon-Home-4 fs-7"></span><br />Home</div>
    <div class="nav-bar-item"><span class="icon-Talk-Man fs-7"></span><br />Profile</div>
    <div class="nav-bar-item"><span class="icon-Security-Settings fs-7"></span><br />Settings </div>
  </div>
  <div class="tab-contents">
    <div class="tab-content active">
      <p class="lead text-1100">Duis ac facilisis mauris. Pellentesque leo tortor, maximus sed gravida dapibus, suscipit non nisi. Duis ultrices diam a maximus imperdiet. Nam eu purus a erat tristique ornare. Donec condimentum tristique diam eu congue. </p>
    </div>
    <div class="tab-content">
      <p class="lead text-1100">Nullam sed tempus mauris, vitae pretium nibh. Nam pretium diam id massa mollis pretium. Aenean lacus massa, tristique id mauris ac, sollicitudin auctor neque. Cras laoreet nunc nibh, ac tristique orci rutrum quis. Nam luctus, sapien ligula finibus turpis.</p>
    </div>
    <div class="tab-content">
      <p class="lead text-1100">Vestibulum convallis diam id nibh tempus, ac scelerisque nulla congue. Cras laoreet nunc nibh, ac tristique orci rutrum quis. Sed eu tellus pharetra, scelerisque nulla in, vehicula libero. Curabitur interdum nec metus ante sed luctus.</p>
    </div>
  </div>
</div>

Position

You can change both the tabs and contents position individually by adding positioning class to .nav-bar and .tab-contents .

Left Align

Left align position is the default position. So no class is needed to add.

<div class="tabs mt-4" data-tabs="data-tabs">
  <div class="nav-bar">
    <div class="nav-bar-item active"> Home</div>
    <div class="nav-bar-item">Profile</div>
    <div class="nav-bar-item">Settings </div>
  </div>
  <div class="tab-contents">
    <div class="tab-content active">
      <p class="lead text-1100">Duis ac facilisis mauris. Pellentesque leo tortor, maximus sed gravida dapibus, suscipit non nisi. Duis ultrices diam a maximus imperdiet. Nam eu purus a erat tristique ornare. Donec condimentum tristique diam eu congue. </p>
    </div>
    <div class="tab-content">
      <p class="lead text-1100">Nullam sed tempus mauris, vitae pretium nibh. Nam pretium diam id massa mollis pretium. Aenean lacus massa, tristique id mauris ac, sollicitudin auctor neque. Cras laoreet nunc nibh, ac tristique orci rutrum quis. Nam luctus, sapien ligula finibus turpis.</p>
    </div>
    <div class="tab-content">
      <p class="lead text-1100">Vestibulum convallis diam id nibh tempus, ac scelerisque nulla congue. Cras laoreet nunc nibh, ac tristique orci rutrum quis. Sed eu tellus pharetra, scelerisque nulla in, vehicula libero. Curabitur interdum nec metus ante sed luctus.</p>
    </div>
  </div>
</div>

Center Align

Add class .nav-bar-center to .nav-bar for tabs position and .text-center to .tab-contents for content position.

 <div class="tabs" data-tabs="data-tabs">
	<div class="nav-bar nav-bar-center">
	...
	</div>
	<div class="tab-contents text-center">
	...
	</div>
</div>

Right Align

Add class .nav-bar-end to .nav-bar for tabs position and .text-end to .tab-contents for content position.

 <div class="tabs" data-tabs="data-tabs">
	<div class="nav-bar nav-bar-end">
	...
	</div>
	<div class="tab-contents text-end">
	...
	</div>
</div>