Bootstrap Navscomponent with a variety of options to provide unique looking Tab components that matches Keen's design standards.
Navigation components in Bootstrap share some general markup and styles, from the base
.navclass to the active and disabled states.
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Use
.nav-bold,
.nav-bolderand
.nav-boldestto set font weight to nav links.
<ul class="nav nav-bold">
...
</ul>
<ul class="nav nav-bolder">
...
</ul>
<ul class="nav nav-boldest">
...
</ul>
Change the horizontal alignment of your nav with
flexbox utilities. flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.
Centered with
.justify-content-center:
<ul class="nav justify-content-center">
...
</ul>
Right-aligned with
.justify-content-end:
<ul class="nav justify-content-end">
...
</ul>
Stack your navigation by changing the flex item direction with the
.flex-columnutility.
<ul class="nav flex-column">
...
</ul>
Add the
.nav-tabsclass to generate a tabbed interface. Use them to create tabbable regions with the
Tab JavaScript plugin.
<ul class="nav nav-tabs" id="myTab" role="tablist">
...
</ul>
<div class="tab-content mt-5" id="myTabContent">
...
</div>
Add
.nav-pillswithin
.nav-tabsto create pill shape navs.
<ul class="nav nav-pills" id="myTab" role="tablist">
...
</ul>
<div class="tab-content mt-5" id="myTabContent">
...
</div>
Use the standard bootstrap state color classes
nav-{color}to change the active pill color.
<ul class="nav nav-success nav-pills" id="myTab" role="tablist">
...
</ul>
<div class="tab-content mt-5" id="myTabContent">
...
</div>
Use the standard bootstrap state color classes
nav-light-{color}to set the light pill color style.
<ul class="nav nav-light-success nav-pills" id="myTab" role="tablist">
...
</ul>
<div class="tab-content mt-5" id="myTabContent">
...
</div>
Use
nav-fillclass to fill and justify.
<ul class="nav nav-pills nav-fill">
...
</ul>
Add Bootstrap's
.flex-columnclass for vertical navs.
<div class="row">
<div class="col-4">
<ul class="nav flex-column nav-pills">
...
</ul>
</div>
<div class="col-8">
<div class="tab-content" id="myTabContent">
...
</div>
</div>
</div>
Lorem Ipsum is simply dummy text of the printing and industry.
There are many variations of passages of Lorem Ipsum available.
Contrary to popular belief, Lorem Ipsum is not simply random text.
If you are going to use a passage of Lorem Ipsum, you need.
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
