Check with your designers to help you design this section
Check with your designers to help you design this section
<!-- Nav tabs -->
<ul class="raul-nav nav nav-tabs raul-nav-underline" role="tablist">
<li class="nav-item">
<a
class="nav-link active"
href="#home-3"
aria-controls="home"
role="tab"
data-toggle="tab"
aria-expanded="true"
>
Home
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#profile-3"
aria-controls="profile"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
Profile
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#messages-3"
aria-controls="messages"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
Messages
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#settings-3"
aria-controls="settings"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
Settings
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="raul-tab-content tab-content">
<div role="tabpanel" class="tab-pane active" id="home-3">home...</div>
<div role="tabpanel" class="tab-pane" id="profile-3">profile...</div>
<div role="tabpanel" class="tab-pane" id="messages-3">messages...</div>
<div role="tabpanel" class="tab-pane" id="settings-3">settings...</div>
</div>
Dark tabs are identical to regular tabs. Simply wrap the tabs in a
container with the class .background-light-grey. Dark
tabs typically divide the page in half, with the top half being all
grey, and tab contents below being white.
<p>
Dark tabs are identical to regular tabs. Simply wrap the tabs in a
container with the class <code>.background-light-grey</code>. Dark
tabs typically divide the page in half, with the top half being all
grey, and tab contents below being white.
</p>
<div class="row">
<div class="col-12 background-light-grey pt-5">
<!-- Nav tabs -->
<ul class="raul-nav nav nav-tabs raul-nav-underline" role="tablist">
<li class="nav-item">
<a
class="nav-link active"
href="#home-bg-grey"
aria-controls="home"
role="tab"
data-toggle="tab"
aria-expanded="true"
>
Home
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#profile-bg-grey"
aria-controls="profile"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
Profile
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#messages-bg-grey"
aria-controls="messages"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
Messages
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#settings-bg-grey"
aria-controls="settings"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
Settings
</a>
</li>
</ul>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<!-- Tab panes -->
<div class="raul-tab-content tab-content">
<div role="tabpanel" class="tab-pane active" id="home-bg-grey">home...</div>
<div role="tabpanel" class="tab-pane" id="profile-bg-grey">profile...</div>
<div role="tabpanel" class="tab-pane" id="messages-bg-grey">messages...</div>
<div role="tabpanel" class="tab-pane" id="settings-bg-grey">settings...</div>
</div>
</div>
</div>
.nav-justified<h5 class="my-3">Add <code>.nav-justified</code></h5>
<!-- Nav tabs -->
<ul class="raul-nav nav nav-tabs raul-nav-underline nav-justified" role="tablist">
<li class="nav-item">
<a
class="nav-link active"
href="#home-4"
aria-controls="home"
role="tab"
data-toggle="tab"
aria-expanded="true"
>
Home
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#profile-4"
aria-controls="profile"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
Profile
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#messages-4"
aria-controls="messages"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
Messages
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#settings-4"
aria-controls="settings"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
Settings
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="raul-tab-content tab-content">
<div role="tabpanel" class="tab-pane active" id="home-4">home...</div>
<div role="tabpanel" class="tab-pane" id="profile-4">profile...</div>
<div role="tabpanel" class="tab-pane" id="messages-4">messages...</div>
<div role="tabpanel" class="tab-pane" id="settings-4">settings...</div>
</div>
<h2 class="nav-tabs-vertical-title mb-3">Menu Title Here</h2>
<div class="row">
<div class="col-3">
<!-- Nav Tabs -->
<ul class="nav nav-tabs flex-column" role="tablist">
<li class="nav-item">
<a
class="nav-link active"
id="v-tabs-home-tab"
data-toggle="tab"
href="#v-tabs-home"
role="tab"
aria-controls="v-tabs-home"
aria-selected="true"
>Home</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="v-tabs-profile-tab"
data-toggle="tab"
href="#v-tabs-profile"
role="tab"
aria-controls="v-tabs-profile"
aria-selected="false"
>Profile</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="v-tabs-messages-tab"
data-toggle="tab"
href="#v-tabs-messages"
role="tab"
aria-controls="v-tabs-messages"
aria-selected="false"
>Messages</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="v-tabs-settings-tab"
data-toggle="tab"
href="#v-tabs-settings"
role="tab"
aria-controls="v-tabs-settings"
aria-selected="false"
>Settings</a>
</li>
</ul>
</div>
<div class="col-9">
<div class="tab-content">
<div
class="tab-pane show active"
id="v-tabs-home"
role="tabpanel"
aria-labelledby="v-tabs-home-tab"
>home...</div>
<div
class="tab-pane"
id="v-tabs-profile"
role="tabpanel"
aria-labelledby="v-tabs-profile-tab"
>profile...</div>
<div
class="tab-pane"
id="v-tabs-messages"
role="tabpanel"
aria-labelledby="v-tabs-messages-tab"
>messages...</div>
<div
class="tab-pane"
id="v-tabs-settings"
role="tabpanel"
aria-labelledby="v-tabs-settings-tab"
>settings...</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id malesuada sapien. Mauris urna justo, ultrices id aliquet aliquet, pellentesque sed massa. Cras vulputate ipsum vitae erat lobortis, sed tempus erat volutpat. Sed porttitor, augue iaculis faucibus lobortis, elit nunc scelerisque est, non rhoncus tortor libero eu mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id malesuada sapien. Mauris urna justo, ultrices id aliquet aliquet, pellentesque sed massa. Cras vulputate ipsum vitae erat lobortis, sed tempus erat volutpat. Sed porttitor, augue iaculis faucibus lobortis, elit nunc scelerisque est, non rhoncus tortor libero eu mauris.
<div class="row">
<div class="col-3">
<div class="raul-accordion-container raul-light-accordion">
<div class="raul-accordion-item">
<input type="checkbox" id="checkbox-5" name="checkbox" checked>
<label for="checkbox-5">Title1 Goes Here</label>
<div class="raul-accordion-item-content">
<ul class="nav nav-tabs flex-column" role="tablist">
<li class="nav-item">
<a
class="nav-link active"
id="v-tabs-home-tab"
data-toggle="tab"
href="#v-tabs-example-1"
role="tab"
aria-controls="v-tabs-example-1"
aria-selected="true"
>Example 1</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="v-tabs-example-2-tab"
data-toggle="tab"
href="#v-tabs-example-2"
role="tab"
aria-controls="v-tabs-example-2"
aria-selected="false"
>Example 2</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="v-tabs-example-3-tab"
data-toggle="tab"
href="#v-tabs-example-3"
role="tab"
aria-controls="v-tabs-example-3"
aria-selected="false"
>Example 3</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="v-tabs-example-4-tab"
data-toggle="tab"
href="#v-tabs-example-4"
role="tab"
aria-controls="v-tabs-example-4"
aria-selected="false"
>Example 4</a>
</li>
</ul>
</div>
</div>
<div class="raul-accordion-item">
<input type="checkbox" id="checkbox-6" name="checkbox">
<label for="checkbox-6">Title2 Goes Here</label>
<div class="raul-accordion-item-content">
<ul class="nav nav-tabs flex-column" role="tablist">
<li class="nav-item">
<a
class="nav-link active"
id="v-tabs-example-5-tab"
data-toggle="tab"
href="#v-tabs-example-5"
role="tab"
aria-controls="v-tabs-example-5"
aria-selected="true"
>Example 5</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="v-tabs-example-6-tab"
data-toggle="tab"
href="#v-tabs-example-6"
role="tab"
aria-controls="v-tabs-example-6"
aria-selected="false"
>Example 6</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="v-tabs-example-7-tab"
data-toggle="tab"
href="#v-tabs-example-7"
role="tab"
aria-controls="v-tabs-example-7"
aria-selected="false"
>Example 7</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="v-tabs-example-8-tab"
data-toggle="tab"
href="#v-tabs-example-8"
role="tab"
aria-controls="v-tabs-example-8"
aria-selected="false"
>Example 8</a>
</li>
</ul>
</div>
</div>
<div class="raul-accordion-item">
<input type="checkbox" id="checkbox-7" name="checkbox">
<label for="checkbox-7">Title3 Goes Here</label>
<div class="raul-accordion-item-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id malesuada sapien.
Mauris urna justo, ultrices id aliquet aliquet, pellentesque sed massa.
Cras vulputate ipsum vitae erat lobortis, sed tempus erat volutpat.
Sed porttitor, augue iaculis faucibus lobortis, elit nunc scelerisque est,
non rhoncus tortor libero eu mauris.
</p>
</div>
</div>
<div class="raul-accordion-item">
<input type="checkbox" id="checkbox-8" name="checkbox">
<label for="checkbox-8">Title4 Goes Here</label>
<div class="raul-accordion-item-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id malesuada sapien.
Mauris urna justo, ultrices id aliquet aliquet, pellentesque sed massa.
Cras vulputate ipsum vitae erat lobortis, sed tempus erat volutpat.
Sed porttitor, augue iaculis faucibus lobortis, elit nunc scelerisque est,
non rhoncus tortor libero eu mauris.
</p>
</div>
</div>
</div>
</div>
<div class="col-9">
<div class="tab-content">
<div
class="tab-pane show active"
id="v-tabs-example-1"
role="tabpanel"
aria-labelledby="v-tabs-example-1-tab"
>example 1...</div>
<div
class="tab-pane"
id="v-tabs-example-2"
role="tabpanel"
aria-labelledby="v-tabs-example-2-tab"
>example 2...</div>
<div
class="tab-pane"
id="v-tabs-example-3"
role="tabpanel"
aria-labelledby="v-tabs-example-3-tab"
>example 3...</div>
<div
class="tab-pane"
id="v-tabs-example-4"
role="tabpanel"
aria-labelledby="v-tabs-example-4-tab"
>example 4...</div>
<div
class="tab-pane"
id="v-tabs-example-5"
role="tabpanel"
aria-labelledby="v-tabs-example-5-tab"
>example 5...</div>
<div
class="tab-pane"
id="v-tabs-example-6"
role="tabpanel"
aria-labelledby="v-tabs-example-6-tab"
>example 6...</div>
<div
class="tab-pane"
id="v-tabs-example-7"
role="tabpanel"
aria-labelledby="v-tabs-example-7-tab"
>example 7...</div>
<div
class="tab-pane"
id="v-tabs-example-8"
role="tabpanel"
aria-labelledby="v-tabs-example-8-tab"
>example 8...</div>
</div>
</div>
</div>
<ul class="raul-nav-toggles nav nav-tabs">
<li class="raul-nav-toggles-item nav-item">
<a
class="nav-link active"
href="#toggle-1"
aria-controls="toggle-1"
role="tab"
data-toggle="tab"
aria-expanded="true"
>
Toggle Button1
</a>
</li>
<li class="raul-nav-toggles-item nav-item">
<a
class="nav-link"
href="#toggle-2"
aria-controls="toggle-2"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
Toggle Button2
</a>
</li>
<li class="raul-nav-toggles-item nav-item">
<a
class="nav-link"
href="#toggle-3"
aria-controls="toggle-2"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
Toggle Button3
</a>
</li>
<li class="raul-nav-toggles-item nav-item">
<a
class="nav-link"
href="#toggle-4"
aria-controls="toggle-2"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
Toggle Button4
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="raul-tab-content tab-content">
<div id="toggle-1" class="raul-toggle-content tab-pane active">Toggle Button Content 1</div>
<div id="toggle-2" class="raul-toggle-content tab-pane">Toggle Button Content 2</div>
<div id="toggle-3" class="raul-toggle-content tab-pane">Toggle Button Content 3</div>
<div id="toggle-4" class="raul-toggle-content tab-pane">Toggle Button Content 4</div>
</div>
<ul class="raul-nav-toggles raul-nav-icon-toggles nav nav-tabs">
<li class="raul-nav-toggles-item nav-item">
<a
class="nav-link active"
href="#icon-toggle-1"
aria-controls="icon-toggle-1"
role="tab"
data-toggle="tab"
aria-expanded="true"
>
<i class="fa fa-trash-o" aria-hidden="true"></i>
</a>
</li>
<li class="raul-nav-toggles-item nav-item">
<a
class="nav-link"
href="#icon-toggle-2"
aria-controls="icon-toggle-2"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</li>
<li class="raul-nav-toggles-item nav-item">
<a
class="nav-link"
href="#icon-toggle-3"
aria-controls="icon-toggle-3"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
<i class="fa fa-sticky-note-o" aria-hidden="true"></i>
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="raul-tab-content tab-content">
<div id="icon-toggle-1" class="raul-toggle-content tab-pane active">Toggle Button Content 1</div>
<div id="icon-toggle-2" class="raul-toggle-content tab-pane">Toggle Button Content 2</div>
<div id="icon-toggle-3" class="raul-toggle-content tab-pane">Toggle Button Content 3</div>
</div>