Elements
These modular elements can be readily used and customized across pages and in different blocks.
Elements
- Alerts
- Animation
- Background
- Badge
- Breadcrumb
- Buttons
- Button group
- Card
- Carousel
- Collapse
- Columns
- Countdown
- Dropdowns
- Forms
- Gallery
- Image
- Input group
- List group
- Map
- Modal
- Navs
- Navbar
- Pagination
- Popovers
- Pricing Table
- Progress
- Responsive Utilities
- Seperators
- Tabs & wizards
- Tables
- Team
- Testimonials
- Tooltips
- Typography
- Video & Audio
Default navs <> show code
<ul class="nav">
<li class="nav-item active">
<a class="nav-link " href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
How to use
- All nav items uses a base .nav wrapper. It is best to use <ul> element as wrapper
Navs With Tab <> show code
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
How to use
- Use class .nav-tabs with .nav to make navigation tab
Nav Pills with Justified nav <> show code
<ul class="nav nav-tabs nav-pills nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
How to use
- use class .nav-pills , .nav-tabs and .nav-justified with .nav to get a justified filled nav tabs
Element
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, alias veniam. Beatae nisi illum explicabo minima, voluptatem earum alias dolores, laboriosam vitae hic et ducimus optio dicta quasi assumenda necessitatibus, quas rerum enim qui, ab. Magni id omnis tenetur, nulla, error expedita delectus saepe possimus nam fugiat praesentium voluptatem autem!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias deserunt, rerum nemo, mollitia libero odit doloribus non nam quasi quia sequi adipisci. Soluta quas beatae quia dolorum accusamus tenetur blanditiis et. Consequuntur ducimus totam facilis possimus soluta, eligendi autem asperiores, aliquid repellat tempora ea, quaerat saepe consequatur quos reprehenderit, temporibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptates, doloremque unde debitis similique, molestiae facilis minus consequuntur cupiditate eius suscipit sed voluptate dolorum tempora corrupti expedita aperiam doloribus provident et. Esse eius dolores voluptatum mollitia laudantium cumque accusantium excepturi perspiciatis, repudiandae ipsum voluptates sapiente tempora modi corrupti eveniet, architecto.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ex iure veniam nulla mollitia quaerat totam, sit hic, perspiciatis dignissimos officiis dolorum ipsam. Deleniti, quo. Deserunt aliquid atque maiores. Vitae, praesentium hic necessitatibus soluta explicabo quas quibusdam eius, reiciendis optio, minima similique, tempora provident fuga laboriosam. Assumenda eveniet, obcaecati tempore!