Shell File Manager
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Navs | Atlantis Bootstrap Dashboard</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<link rel="icon" href="../../assets/img/icon.ico" type="image/x-icon"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Fonts and icons -->
<script src="../../assets/js/plugin/webfont/webfont.min.js"></script>
<script>
WebFont.load({
google: {"families":["Lato:300,400,700,900"]},
custom: {"families":["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands", "simple-line-icons"], urls: ['../../assets/css/fonts.min.css']},
active: function() {
sessionStorage.fonts = true;
}
});
</script>
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../../assets/css/atlantis.min.css">
<link href="../assets/styles.css" rel="stylesheet" />
<link href="../assets/prism.css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div class="main-header">
<div class="logo-header" data-background-color="light-blue2">
<a href="../index.html" class="logo">
<img src="../../assets/img/logo.svg" alt="navbar brand" class="navbar-brand">
</a>
<button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="icon-menu"></i>
</span>
</button>
<button class="topbar-toggler more"><i class="icon-options-vertical"></i></button>
<div class="nav-toggle">
<button class="btn btn-toggle toggle-sidebar">
<i class="icon-menu"></i>
</button>
</div>
</div>
<nav class="navbar navbar-header navbar-expand-lg" data-background-color="light-blue2">
<div class="container-fluid">
<ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
<li class="nav-item">
<a href="../../examples/demo1" class="nav-link">
Live Preview
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="sidebar sidebar-style-2">
<div class="sidebar-background"></div>
<div class="sidebar-wrapper scrollbar scrollbar-inner">
<div class="sidebar-content">
<ul class="nav nav-info">
<li class="nav-item">
<a href="../index.html">
<i class="fas fa-home"></i>
<p>Introduction</p>
</a>
</li>
<li class="nav-section">
<span class="sidebar-mini-icon">
<i class="fa fa-ellipsis-h"></i>
</span>
<h4 class="text-section">Components</h4>
</li>
<li class="nav-item">
<a href="../components/alerts.html">
<span class="letter-icon">A</span>
<p>Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../components/avatars.html">
<span class="letter-icon">Av</span>
<p>Avatars</p>
</a>
</li>
<li class="nav-item">
<a href="../components/badge.html">
<span class="letter-icon">Ba</span>
<p>Badge</p>
</a>
</li>
<li class="nav-item">
<a href="../components/breadcrumb.html">
<span class="letter-icon">Bc</span>
<p>Breadcrumb</p>
</a>
</li>
<li class="nav-item">
<a href="../components/buttons.html">
<span class="letter-icon">Bt</span>
<p>Buttons</p>
</a>
</li>
<li class="nav-item">
<a href="../components/card.html">
<span class="letter-icon">C</span>
<p>Card</p>
</a>
</li>
<li class="nav-item">
<a href="../components/collapse.html">
<span class="letter-icon">Co</span>
<p>Collapse</p>
</a>
</li>
<li class="nav-item">
<a href="../components/colors.html">
<span class="letter-icon">Cl</span>
<p>Colors</p>
</a>
</li>
<li class="nav-item">
<a href="../components/dropdowns.html">
<span class="letter-icon">D</span>
<p>Dropdowns</p>
</a>
</li>
<li class="nav-item">
<a href="../components/forms.html">
<span class="letter-icon">F</span>
<p>Forms</p>
</a>
</li>
<li class="nav-item">
<a href="../components/layoutsbackground.html">
<span class="letter-icon">L</span>
<p>Layouts Background</p>
</a>
</li>
<li class="nav-item">
<a href="../components/loaders.html">
<span class="letter-icon">Lo</span>
<p>Loaders</p>
</a>
</li>
<li class="nav-item">
<a href="../components/modal.html">
<span class="letter-icon">M</span>
<p>Modal</p>
</a>
</li>
<li class="nav-item active">
<a href="../components/navs.html">
<span class="letter-icon">N</span>
<p>Navs</p>
</a>
</li>
<li class="nav-item">
<a href="../components/navbar.html">
<span class="letter-icon">Nb</span>
<p>Navbar</p>
</a>
</li>
<li class="nav-item">
<a href="../components/pagination.html">
<span class="letter-icon">Pa</span>
<p>Pagination</p>
</a>
</li>
<li class="nav-item">
<a href="../components/popovers.html">
<span class="letter-icon">Po</span>
<p>Popovers</p>
</a>
</li>
<li class="nav-item">
<a href="../components/progress.html">
<span class="letter-icon">Pr</span>
<p>Progress</p>
</a>
</li>
<li class="nav-item">
<a href="../components/tables.html">
<span class="letter-icon">T</span>
<p>Tables</p>
</a>
</li>
<li class="nav-item">
<a href="../components/tooltips.html">
<span class="letter-icon">To</span>
<p>Tooltips</p>
</a>
</li>
<li class="nav-item">
<a href="../components/typography.html">
<span class="letter-icon">Ty</span>
<p>Typography</p>
</a>
</li>
<li class="nav-section">
<span class="sidebar-mini-icon">
<i class="fa fa-ellipsis-h"></i>
</span>
<h4 class="text-section">Plugins</h4>
</li>
<li class="nav-item">
<a href="../plugins/chart.html">
<span class="letter-icon">C</span>
<p>Chart.js</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/chartcircle.html">
<span class="letter-icon">Cc</span>
<p>Chart Circle</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/animate.html">
<span class="letter-icon">Cs</span>
<p>CSS Animate</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/datatables.html">
<span class="letter-icon">Da</span>
<p>Datatables</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/jqvmap.html">
<span class="letter-icon">Jm</span>
<p>JQVmap</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/scrollbar.html">
<span class="letter-icon">Js</span>
<p>Jquery Scrollbar</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/notify.html">
<span class="letter-icon">N</span>
<p>Notify</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/slider.html">
<span class="letter-icon">Sl</span>
<p>Slider</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/sweetalert.html">
<span class="letter-icon">Sa</span>
<p>Sweet Alert</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/sparkline.html">
<span class="letter-icon">Sp</span>
<p>Sparkline</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="main-panel">
<div class="content content-documentation">
<div class="container-fluid">
<div class="card card-documentation">
<div class="card-header bg-info-gradient text-white bubble-shadow">
<h4>Navs</h4>
<p class="mb-0 op-8">Documentation and examples for how to use Bootstrap's included navigation components.</p>
</div>
<div class="card-body">
<div class="table-content">
<span class="title">Table of Content</span>
<ul>
<li>
<a href="#basenav">Base nav</a>
</li>
<li>
<a href="#styles">Available styles</a>
<ol>
<li>
<a href="#horizontal">
Horizontal alignment
</a>
</li>
<li>
<a href="#vertical">Vertical</a>
</li>
<li>
<a href="#tabs">Tabs</a>
</li>
<li>
<a href="#line">Line</a>
</li>
<li>
<a href="#pills">Pills</a>
</li>
</ol>
</li>
<li>
<a href="#dataattr">
Using data attributes
</a>
</li>
</ul>
</div>
<h4 class="subcontent-title" id="basenav"><span>Base nav</span></h4>
<p>Navigation available in Bootstrap share general markup and styles, from the base <code class="highlighter-rouge">.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
<p>The base <code class="highlighter-rouge">.nav</code> component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.</p>
<div class="bd-callout bd-callout-info">
<p>The base <code class="highlighter-rouge">.nav</code> component does not include any <code class="highlighter-rouge">.active</code> state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.</p>
</div>
<div class="bd-example">
<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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<pre class="language-markup">
<code class="language-markup">
<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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</code>
</pre>
<p>Classes are used throughout, so your markup can be super flexible. Use <code class="highlighter-rouge"><ul></code>s like above, or roll your own with say a <code class="highlighter-rouge"><nav></code> element. Because the <code class="highlighter-rouge">.nav</code> uses <code class="highlighter-rouge">display: flex</code>, the nav links behave the same as nav items would, but without the extra markup.</p>
<div class="bd-example">
<nav class="nav">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
</div>
<pre class="language-markup">
<code class="language-markup">
<nav class="nav">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
</code>
</pre>
<h4 class="subcontent-title" id="styles"><span>Available styles</span></h4>
<p>Change the style of <code class="highlighter-rouge">.nav</code>s component with modifiers and utilities. Mix and match as needed, or build your own.</p>
<h5 id="horizontal">Horizontal alignment</h5>
<p>Change the horizontal alignment of your nav with <a href="/docs/1.0/layout/grid/#horizontal-alignment">flexbox utilities</a>. By default, navs are left-aligned, but you can easily change them to center or right aligned.</p>
<p>Centered with <code class="highlighter-rouge">.justify-content-center</code>:</p>
<div class="bd-example">
<ul class="nav justify-content-center">
<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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<pre class="language-markup">
<code class="language-markup">
<ul class="nav justify-content-center">
<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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</code>
</pre>
<p>Right-aligned with <code class="highlighter-rouge">.justify-content-end</code>:</p>
<div class="bd-example">
<ul class="nav justify-content-end">
<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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<pre class="language-markup">
<code class="language-markup">
<ul class="nav justify-content-end">
<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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</code>
</pre>
<h5 id="vertical">Vertical</h5>
<p>Stack your navigation by changing the flex item direction with the <code class="highlighter-rouge">.flex-column</code> utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., <code class="highlighter-rouge">.flex-sm-column</code>).</p>
<div class="bd-example">
<ul class="nav flex-column">
<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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<pre class="language-markup">
<code class="language-markup">
<ul class="nav flex-column">
<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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</code>
</pre>
<p>As always, vertical navigation is possible without <code class="highlighter-rouge"><ul></code>s, too.</p>
<div class="bd-example">
<nav class="nav flex-column">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
</div>
<pre class="language-markup">
<code class="language-markup">
<nav class="nav flex-column">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
</code>
</pre>
<h5 id="tabs">Tabs</h5>
<p>Takes the basic nav from above and adds the <code class="highlighter-rouge">.nav-tabs</code> class to generate a tabbed interface. Use them to create tabbable regions with our <a href="https://getbootstrap.com/docs/4.0/../components/navs/#javascript-behavior">tab JavaScript plugin</a>.</p>
<div class="bd-example">
<ul class="nav nav-tabs">
<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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<pre class="language-markup">
<code class="language-markup">
<ul class="nav nav-tabs">
<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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</code>
</pre>
<h5 id="line">Line</h5>
<p>Take that same HTML, but use <code class="highlighter-rouge">.nav-line</code> instead:</p>
<div class="bd-example">
<ul class="nav nav-line nav-color-secondary">
<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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<pre class="language-markup">
<code class="language-markup">
<ul class="nav nav-line nav-color-secondary">
<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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</code>
</pre>
<h5 id="pills">Pills</h5>
<p>Take that same HTML, but use <code class="highlighter-rouge">.nav-pills</code> instead:</p>
<h6>Horizontal</h6>
<div class="bd-example">
<ul class="nav nav-pills nav-secondary">
<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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<pre class="language-markup">
<code class="language-markup">
<ul class="nav nav-pills nav-secondary">
<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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</code>
</pre>
<p>Nav Pills without Border :</p>
<div class="bd-example">
<ul class="nav nav-pills nav-secondary nav-pills-no-bd mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab-nobd" data-toggle="pill" href="#pills-home-nobd" role="tab" aria-controls="pills-home-nobd" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab-nobd" data-toggle="pill" href="#pills-profile-nobd" role="tab" aria-controls="pills-profile-nobd" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab-nobd" data-toggle="pill" href="#pills-contact-nobd" role="tab" aria-controls="pills-contact-nobd" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content mb-3" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home-nobd" role="tabpanel" aria-labelledby="pills-home-tab-nobd">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
<div class="tab-pane fade" id="pills-profile-nobd" role="tabpanel" aria-labelledby="pills-profile-tab-nobd">
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.
</p>
</div>
<div class="tab-pane fade" id="pills-contact-nobd" role="tabpanel" aria-labelledby="pills-contact-tab-nobd">
<p>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy. The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</p>
<p> But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their</p>
</div>
</div>
</div>
<pre class="language-markup">
<code class="language-markup">
<ul class="nav nav-pills nav-secondary nav-pills-no-bd mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab-nobd" data-toggle="pill" href="#pills-home-nobd" role="tab" aria-controls="pills-home-nobd" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab-nobd" data-toggle="pill" href="#pills-profile-nobd" role="tab" aria-controls="pills-profile-nobd" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab-nobd" data-toggle="pill" href="#pills-contact-nobd" role="tab" aria-controls="pills-contact-nobd" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content mb-3" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home-nobd" role="tabpanel" aria-labelledby="pills-home-tab-nobd">
<p>...</p>
</div>
<div class="tab-pane fade" id="pills-profile-nobd" role="tabpanel" aria-labelledby="pills-profile-tab-nobd">
<p>...</p>
</div>
<div class="tab-pane fade" id="pills-contact-nobd" role="tabpanel" aria-labelledby="pills-contact-tab-nobd">
<p>...</p>
</div>
</div>
</code>
</pre>
<h6>Vertical</h6>
<div class="bd-example">
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills nav-secondary nav-pills-no-bd" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab-nobd" data-toggle="pill" href="#v-pills-home-nobd" role="tab" aria-controls="v-pills-home-nobd" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab-nobd" data-toggle="pill" href="#v-pills-profile-nobd" role="tab" aria-controls="v-pills-profile-nobd" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab-nobd" data-toggle="pill" href="#v-pills-messages-nobd" role="tab" aria-controls="v-pills-messages-nobd" aria-selected="false">Messages</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home-nobd" role="tabpanel" aria-labelledby="v-pills-home-tab-nobd">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
<div class="tab-pane fade" id="v-pills-profile-nobd" role="tabpanel" aria-labelledby="v-pills-profile-tab-nobd">
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.
</p>
</div>
<div class="tab-pane fade" id="v-pills-messages-nobd" role="tabpanel" aria-labelledby="v-pills-messages-tab-nobd">
<p>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy. The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</p>
<p> But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their</p>
</div>
</div>
</div>
</div>
</div>
<pre class="language-markup">
<code class="language-markup">
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills nav-secondary nav-pills-no-bd" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab-nobd" data-toggle="pill" href="#v-pills-home-nobd" role="tab" aria-controls="v-pills-home-nobd" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab-nobd" data-toggle="pill" href="#v-pills-profile-nobd" role="tab" aria-controls="v-pills-profile-nobd" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab-nobd" data-toggle="pill" href="#v-pills-messages-nobd" role="tab" aria-controls="v-pills-messages-nobd" aria-selected="false">Messages</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home-nobd" role="tabpanel" aria-labelledby="v-pills-home-tab-nobd">
<p>...</p>
</div>
<div class="tab-pane fade" id="v-pills-profile-nobd" role="tabpanel" aria-labelledby="v-pills-profile-tab-nobd">
<p>...</p>
</div>
<div class="tab-pane fade" id="v-pills-messages-nobd" role="tabpanel" aria-labelledby="v-pills-messages-tab-nobd">
<p>...</p>
</div>
</div>
</div>
</div>
</code>
</pre>
<h6>With Icon</h6>
<div class="bd-example">
<ul class="nav nav-pills nav-secondary nav-pills-no-bd nav-pills-icons justify-content-center mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab-icon" data-toggle="pill" href="#pills-home-icon" role="tab" aria-controls="pills-home-icon" aria-selected="true">
<i class="flaticon-home"></i>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab-icon" data-toggle="pill" href="#pills-profile-icon" role="tab" aria-controls="pills-profile-icon" aria-selected="false">
<i class="flaticon-user-4"></i>
Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab-icon" data-toggle="pill" href="#pills-contact-icon" role="tab" aria-controls="pills-contact-icon" aria-selected="false">
<i class="flaticon-mailbox"></i>
Contact
</a>
</li>
</ul>
<div class="tab-content mb-3" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home-icon" role="tabpanel" aria-labelledby="pills-home-tab-icon">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
<div class="tab-pane fade" id="pills-profile-icon" role="tabpanel" aria-labelledby="pills-profile-tab-icon">
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn't listen. She packed her seven versalia, put her initial into the belt and made herself on the way.
</p>
</div>
<div class="tab-pane fade" id="pills-contact-icon" role="tabpanel" aria-labelledby="pills-contact-tab-icon">
<p>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy. The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</p>
<p> But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their</p>
</div>
</div>
</div>
<pre class="language-markup">
<code class="language-markup">
<ul class="nav nav-pills nav-secondary nav-pills-no-bd nav-pills-icons justify-content-center mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab-icon" data-toggle="pill" href="#pills-home-icon" role="tab" aria-controls="pills-home-icon" aria-selected="true">
<i class="flaticon-home"></i>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab-icon" data-toggle="pill" href="#pills-profile-icon" role="tab" aria-controls="pills-profile-icon" aria-selected="false">
<i class="flaticon-user-4"></i>
Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab-icon" data-toggle="pill" href="#pills-contact-icon" role="tab" aria-controls="pills-contact-icon" aria-selected="false">
<i class="flaticon-mailbox"></i>
Contact
</a>
</li>
</ul>
<div class="tab-content mb-3" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home-icon" role="tabpanel" aria-labelledby="pills-home-tab-icon">
<p>...</p>
</div>
<div class="tab-pane fade" id="pills-profile-icon" role="tabpanel" aria-labelledby="pills-profile-tab-icon">
<p>...</p>
</div>
<div class="tab-pane fade" id="pills-contact-icon" role="tabpanel" aria-labelledby="pills-contact-tab-icon">
<p>...</p>
</div>
</div>
</code>
</pre>
<h4 class="subcontent-title" id="dataattr"><span>Using data attributes</span></h4>
<p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code class="highlighter-rouge">data-toggle="tab"</code> or <code class="highlighter-rouge">data-toggle="pill"</code> on an element. Use these data attributes on <code class="highlighter-rouge">.nav-tabs</code> or <code class="highlighter-rouge">.nav-pills</code>.</p>
<pre class="language-markup">
<code class="language-markup">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
</code>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../assets/js/core/jquery.3.2.1.min.js"></script>
<script src="../../assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="../../assets/js/plugin/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
<script src="../../assets/js/core/popper.min.js"></script>
<script src="../../assets/js/core/bootstrap.min.js"></script>
<script src="../../assets/js/plugin/chart.js/chart.min.js"></script>
<script src="../../assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="../../assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script type="text/javascript" src="../../assets/js/plugin/jqvmap/jquery.vmap.min.js"></script>
<script type="text/javascript" src="../../assets/js/plugin/jqvmap/maps/jquery.vmap.world.js" charset="utf-8"></script>
<script src="../../assets/js/plugin/chart-circle/circles.min.js"></script>
<script src="../../assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="../../assets/js/atlantis.min.js"></script>
<script src="../assets/prism.js"></script>
<script src="../assets/prism-normalize-whitespace.min.js"></script>
<script type="text/javascript">
// Optional
Prism.plugins.NormalizeWhitespace.setDefaults({
'remove-trailing': true,
'remove-indent': true,
'left-trim': true,
'right-trim': true,
});
// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
// target element id
var id = $(this).attr('href');
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
// top position relative to the document
var pos = $id.offset().top - 80;
// animated top scrolling
$('body, html').animate({scrollTop: pos});
});
</script>
</html>
Shell File Manager Version 1.1, Coded By Shell
Email: [email protected]