These modular elements can be readily used and customized in every layout across pages.
Add class .active
to .nav-bar-item
and corresponding .tab-content
which you want to show after page loading.
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">
<div class="nav-bar nav-bar-center">
<div class="nav-bar-item active"><span class="icon-Home-4 fs-2"></span><br>Home</div>
<div class="nav-bar-item"><span class="icon-Talk-Man fs-2"></span><br>Profile</div>
<div class="nav-bar-item"><span class="icon-Security-Settings fs-2"></span><br>Settings</div>
</div>
<div class="tab-contents">
<div class="tab-content active">
<p class="lead color-1">
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 color-1">
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 color-1">
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>
You can change both the tabs and contents position individulally by adding class positioning class to .nav-bar
and .tab-contents
.
Left align position is the default postion. So no class is needed to add.
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">
<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 color-1">
....
</p>
</div>
<div class="tab-content">
<p class="lead color-1">
....
</p>
</div>
<div class="tab-content">
<p class="lead color-1">
....
</p>
</div>
</div>
</div>
Add class .nav-bar-center
to .nav-bar
for tabs position and .text-center
to .tab-contents
for content position.
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">
<div class="nav-bar nav-bar-center">
...
</div>
</div>
Add class .nav-bar-right
to .nav-bar
for tabs position and .text-right
to .tab-contents
for content position.
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">
<div class="nav-bar nav-bar-right">
...
</div>
</div>