Navbar
Documentation and examples for a powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for the collapse plugin.
Examples
Show code
<!-- Navbar primary -->
<!-- Header -->
<header class="" id="header-main"><!-- Navbar -->
<nav class="navbar navbar-main navbar-expand-lg navbar-light" id="navbar-main">
<div class="container">
<!-- Brand -->
<a class="navbar-brand" href="../../index.html">
<img alt="Image placeholder" src="../../assets/img/brand/dark.svg" id="navbar-logo">
</a>
<!-- Toggler -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main-collapse" aria-controls="navbar-main-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapse -->
<div class="collapse navbar-collapse navbar-collapse-overlay" id="navbar-main-collapse">
<!-- Toggler -->
<div class="position-relative">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main-collapse" aria-controls="navbar-main-collapse" aria-expanded="false" aria-label="Toggle navigation">
<i data-feather="x"></i>
</button>
</div>
<!-- Main navigation -->
<ul class="navbar-nav ml-lg-auto">
<!-- Overview -->
<li class="nav-item nav-item-spaced d-none d-lg-block">
<a class="nav-link" href="../../overview.html">
Overview
</a>
</li>
<!-- Landings menu -->
<li class="nav-item nav-item-spaced dropdown dropdown-animate" data-toggle="hover">
<a class="nav-link" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
Landings
</a>
<div class="dropdown-menu dropdown-menu-xl p-0">
<div class="row no-gutters">
<div class="col-12 col-lg-6 order-lg-2">
<div class="dropdown-body dropdown-body-right bg-dropdown-secondary h-100">
<!-- Organization -->
<h6 class="dropdown-header">
Organization
</h6>
<div class="list-group list-group-flush">
<div class="list-group-item bg-transparent border-0 px-0 py-2">
<div class="media d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="layout"></i>
</span>
<!-- Media body -->
<div class="media-body ml-2">
<a href="../../pages/landing/agency.html" class="d-block heading h6 mb-0">Agency</a>
<small class="text-sm text-muted mb-0">Quick's most important features</small>
</div>
</div>
</div>
<div class="list-group-item bg-transparent border-0 px-0 py-2">
<div class="media d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="globe"></i>
</span>
<!-- Media body -->
<div class="media-body ml-2">
<a href="../../pages/landing/business.html" class="d-block h6 mb-0">Business</a>
<small class="text-sm text-muted mb-0">Quick's most important features</small>
</div>
</div>
</div>
<div class="list-group-item bg-transparent border-0 px-0 py-2">
<div class="media d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="camera"></i>
</span>
<!-- Media body -->
<div class="media-body ml-2">
<a href="../../pages/landing/studio.html" class="d-block h6 mb-0">Studio</a>
<small class="text-sm text-muted mb-0">Quick's most important features</small>
</div>
</div>
</div>
</div>
<!-- Services -->
<h6 class="dropdown-header mt-4">
Products & Services
</h6>
<div class="list-group list-group-flush">
<div class="list-group-item bg-transparent border-0 px-0 py-2">
<div class="media d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="code"></i>
</span>
<!-- Media body -->
<div class="media-body ml-2">
<a href="../../pages/landing/development.html" class="d-block h6 mb-0">Development</a>
<small class="text-sm text-muted mb-0">Quick's most important features</small>
</div>
</div>
</div>
<div class="list-group-item bg-transparent border-0 px-0 py-2">
<div class="media d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="bar-chart"></i>
</span>
<!-- Media body -->
<div class="media-body ml-2">
<a href="../../pages/landing/marketing.html" class="d-block h6 mb-0">Marketing</a>
<small class="text-sm text-muted mb-0">Quick's most important features</small>
</div>
</div>
</div>
<div class="list-group-item bg-transparent border-0 px-0 py-2">
<div class="media d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="map"></i>
</span>
<!-- Media body -->
<div class="media-body ml-2">
<a href="../../pages/landing/desktop-app.html" class="d-block h6 mb-0">Desktop App</a>
<small class="text-sm text-muted mb-0">Quick's most important features</small>
</div>
</div>
</div>
<div class="list-group-item bg-transparent border-0 px-0 py-2">
<div class="media d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="credit-card"></i>
</span>
<!-- Media body -->
<div class="media-body ml-2">
<a href="../../pages/landing/saas.html" class="d-block h6 mb-0">Saas App</a>
<small class="text-sm text-muted mb-0">Quick's most important features</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 order-lg-1 mt-4 mt-lg-0">
<div class="dropdown-body">
<h6 class="dropdown-header">
Get started
</h6>
<div class="list-group list-group-flush">
<div class="list-group-item border-0">
<div class="media d-flex">
<!-- SVG icon -->
<figure style="width: 40px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Code_2.svg" class="img-fluid" style="height: 40px;">
</figure>
<!-- Media body -->
<div class="media-body ml-3">
<a href="../../overview.html#landing" class="d-block h6 mb-0">Landing Pages</a>
<small class="text-sm text-muted mb-0">A starting point for any scenario.</small>
</div>
</div>
</div>
<div class="list-group-item border-0">
<div class="media d-flex">
<!-- SVG icon -->
<figure style="width: 40px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Like_UI.svg" class="img-fluid" style="height: 40px;">
</figure>
<!-- Media body -->
<div class="media-body ml-3">
<a href="../../overview.html#secondary" class="d-block h6 mb-0">Secondary Pages</a>
<small class="text-sm text-muted mb-0">A starting point for any scenario.</small>
</div>
</div>
</div>
<div class="list-group-item border-0">
<div class="media d-flex align-items-center">
<!-- SVG icon -->
<figure style="width: 40px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Online_Store_2.svg" class="img-fluid" style="width: 40px;">
</figure>
<!-- Media body -->
<div class="media-body ml-3">
<a href="../../overview.html#account" class="d-block h6 mb-0">Account Pages</a>
<small class="text-sm text-muted mb-0">Account management made easy.</small>
</div>
</div>
</div>
<div class="list-group-item border-0">
<div class="media d-flex align-items-center">
<!-- SVG icon -->
<figure style="width: 40px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Apps.svg" class="img-fluid" style="width: 40px;">
</figure>
<!-- Media body -->
<div class="media-body ml-3">
<a href="../../overview.html#boards" class="d-block h6 mb-0">Board Pages</a>
<small class="text-sm text-muted mb-0">Get your dashboard nice and easy.</small>
</div>
</div>
</div>
<h6 class="dropdown-header mt-4">
Developers
</h6>
<div class="list-group-item border-0">
<div class="media d-flex align-items-center">
<!-- SVG icon -->
<figure style="width: 40px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/DOC_File.svg" class="img-fluid" style="width: 40px;">
</figure>
<!-- Media body -->
<div class="media-body ml-3">
<a href="../../docs/index.html" class="d-block h6 mb-0">Documentation</a>
<small class="text-sm text-muted mb-0">A good place to start from</small>
</div>
</div>
</div>
<div class="list-group-item border-0">
<div class="media d-flex align-items-center">
<!-- SVG icon -->
<figure style="width: 40px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Package_Opened.svg" class="img-fluid" style="width: 40px;">
</figure>
<!-- Media body -->
<div class="media-body ml-3">
<a href="../../docs/components/alerts.html" class="d-block h6 mb-0">Components</a>
<small class="text-sm text-muted mb-0">A good place to start from</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- Pages menu -->
<li class="nav-item nav-item-spaced dropdown dropdown-animate" data-toggle="hover">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
<div class="dropdown-menu dropdown-menu-md p-0">
<ul class="list-group list-group-flush px-lg-4">
<li class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="list-group-item list-group-item-action dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex">
<!-- SVG icon -->
<figure style="width: 20px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Code.svg" class="svg-inject img-fluid" style="height: 20px;">
</figure>
<!-- Media body -->
<div class="ml-3">
<h6 class="heading mb-0">Landing</h6>
<p class="mb-0">Examples for any scenario.</p>
</div>
</div>
</a><ul class="dropdown-menu"><li>
<a class="dropdown-item" href="../../pages/landing/agency.html">
Agency
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/business.html">
Business
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/desktop-app.html">
Desktop App
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/development.html">
Development
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/marketing.html">
Marketing
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/money-app.html">
Money App
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/presentation.html">
Presentation
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/saas.html">
Saas
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/studio.html">
Studio
</a>
</li>
</ul></li>
<li class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="list-group-item list-group-item-action dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex">
<!-- SVG icon -->
<figure style="width: 20px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Code.svg" class="svg-inject img-fluid" style="height: 20px;">
</figure>
<!-- Media body -->
<div class="ml-3">
<h6 class="heading mb-0">Secondary</h6>
<p class="mb-0">Examples for any scenario.</p>
</div>
</div>
</a><ul class="dropdown-menu"><li>
<a class="dropdown-item" href="../../pages/secondary/about.html">
About
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/services.html">
Services
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/pricing.html">
Pricing
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/pricing-alternative.html">
Pricing Alternative
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/careers.html">
Careers
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/careers-single.html">
Careers Single
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/case-study.html">
Case Study
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/contact.html">
Contact
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/support.html">
Support
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/support-topic.html">
Support Topic
</a>
</li>
</ul></li>
<li class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="list-group-item list-group-item-action dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex">
<!-- SVG icon -->
<figure style="width: 20px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Code.svg" class="svg-inject img-fluid" style="height: 20px;">
</figure>
<!-- Media body -->
<div class="ml-3">
<h6 class="heading mb-0">Blog</h6>
<p class="mb-0">Examples for any scenario.</p>
</div>
</div>
</a><ul class="dropdown-menu"><li>
<a class="dropdown-item" href="../../pages/blog/blog-grid.html">
Blog Grid
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/blog/blog-masonry.html">
Blog Masonry
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/blog/blog-article.html">
Blog Article
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/blog/blog-article-modern.html">
Blog Article Modern
</a>
</li>
</ul></li>
<li class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="list-group-item list-group-item-action dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex">
<!-- SVG icon -->
<figure style="width: 20px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Cog_Wheels.svg" class="svg-inject img-fluid" style="height: 20px;">
</figure>
<!-- Media body -->
<div class="ml-3">
<h6 class="heading mb-0">Utility</h6>
<p class="mb-0">Error pages and everything else.</p>
</div>
</div>
</a><ul class="dropdown-menu"><li>
<a class="dropdown-item" href="../../pages/utility/coming-soon.html">
Coming Soon
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/utility/error-side-cover.html">
Error Side Cover
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/utility/error-illustration.html">
Error Illustration
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/utility/faq.html">
Faq
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/utility/terms.html">
Terms
</a>
</li>
</ul></li></ul>
</div>
</li>
<!-- App menu -->
<li class="nav-item nav-item-spaced dropdown dropdown-animate" data-toggle="hover">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">App</a>
<div class="dropdown-menu dropdown-menu-md p-0">
<ul class="list-group list-group-flush px-lg-4">
<li class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="list-group-item list-group-item-action dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media d-flex">
<!-- SVG icon -->
<figure style="width: 20px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Secure_Files.svg" class="svg-inject img-fluid" style="height: 20px;">
</figure>
<!-- Media body -->
<div class="media-body ml-2">
<h6 class="heading mb-0">Authentication</h6>
<p class="mb-0">Examples for any scenario.</p>
</div>
</div>
</a><div class="dropdown-menu"><a class="dropdown-item" href="../../pages/authentication/login-basic.html">
Login Basic
</a>
<a class="dropdown-item" href="../../pages/authentication/login-side-cover.html">
Login Side Cover
</a>
<a class="dropdown-item" href="../../pages/authentication/login-overlay.html">
Login Overlay
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../../pages/authentication/register-basic.html">
Register Basic
</a>
<a class="dropdown-item" href="../../pages/authentication/register-side-cover.html">
Register Side Cover
</a>
<a class="dropdown-item" href="../../pages/authentication/register-overlay.html">
Register Overlay
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../../pages/authentication/recover-basic.html">
Recover Basic
</a>
<a class="dropdown-item" href="../../pages/authentication/recover-side-cover.html">
Recover Side Cover
</a>
<a class="dropdown-item" href="../../pages/authentication/recover-overlay.html">
Recover Overlay
</a>
</div></li>
<li class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="list-group-item list-group-item-action dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media d-flex">
<!-- SVG icon -->
<figure style="width: 20px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Task.svg" class="svg-inject img-fluid" style="height: 20px;">
</figure>
<!-- Media body -->
<div class="media-body ml-2">
<h6 class="heading mb-0">Account</h6>
<p class="mb-0">Account management made cool.</p>
</div>
</div>
</a><div class="dropdown-menu"><a class="dropdown-item" href="../../pages/account/profile.html">
Profile
</a>
<a class="dropdown-item" href="../../pages/account/settings.html">
Settings
</a>
<a class="dropdown-item" href="../../pages/account/billing.html">
Billing
</a>
<a class="dropdown-item" href="../../pages/account/cards.html">
Cards
</a>
<a class="dropdown-item" href="../../pages/account/security.html">
Security
</a>
<a class="dropdown-item" href="../../pages/account/users.html">
Users
</a>
<a class="dropdown-item" href="../../pages/account/notifications.html">
Notifications
</a>
</div></li>
<li class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="list-group-item list-group-item-action dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media d-flex">
<!-- SVG icon -->
<figure style="width: 20px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Task.svg" class="svg-inject img-fluid" style="height: 20px;">
</figure>
<!-- Media body -->
<div class="media-body ml-2">
<h6 class="heading mb-0">Boards</h6>
<p class="mb-0">Account management made cool.</p>
</div>
</div>
</a><div class="dropdown-menu"><a class="dropdown-item" href="../../pages/boards/overview.html">
Overview
</a>
<a class="dropdown-item" href="../../pages/boards/projects.html">
Projects
</a>
<a class="dropdown-item" href="../../pages/boards/tasks.html">
Tasks
</a>
<a class="dropdown-item" href="../../pages/boards/integrations.html">
Integrations
</a>
</div></li><li>
<div class="d-none d-lg-block py-3 bg-transparent">
<div class="row">
<div class="col-sm-6">
<a href="../../pages/boards/overview.html" class="dropdown-item">Dashboard</a>
<a href="../../pages/boards/projects.html" class="dropdown-item">Projects</a>
<a href="../../pages/boards/tasks.html" class="dropdown-item">Tasks</a>
<a href="../../pages/boards/integrations.html" class="dropdown-item">Integrations</a>
</div>
<div class="col-sm-6">
<a href="../../pages/account/settings.html" class="dropdown-item">Settings</a>
<a href="../../pages/account/billing.html" class="dropdown-item">Billing</a>
<a href="../../pages/account/cards.html" class="dropdown-item">Cards</a>
<a href="../../pages/account/users.html" class="dropdown-item">Users</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
<!-- Docs menu -->
<li class="nav-item nav-item-spaced dropdown dropdown-animate" data-toggle="hover">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
<div class="dropdown-menu dropdown-menu-md p-0">
<div class="list-group list-group-flush px-lg-4">
<a href="../../docs/index.html" class="list-group-item list-group-item-action" role="button">
<div class="d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="book"></i>
</span>
<!-- Media body -->
<div class="ml-3">
<h6 class="heading mb-0">Documentation</h6>
<small class="text-sm">Quick setup and build tools</small>
</div>
</div>
</a>
<div class="py-3">
<div class="row">
<div class="col-sm-6">
<a href="../../docs/getting-started/quick-start.html" class="dropdown-item">Quick Start</a>
<a href="../../docs/getting-started/build-tools.html" class="dropdown-item">Build Tools</a>
<a href="../../docs/getting-started/customization.html" class="dropdown-item">Customization</a>
<a href="../../docs/getting-started/file-structure.html" class="dropdown-item">File Structure</a>
<a href="../../docs/components/alerts.html" class="dropdown-item">Components</a>
</div>
<div class="col-sm-6">
<a href="../../docs/styleguide/icons.html" class="dropdown-item">Icons</a>
<a href="../../docs/styleguide/svg-icons.html" class="dropdown-item">SVG Icons</a>
<a href="../../docs/styleguide/illustrations.html" class="dropdown-item">Illustrations</a>
<a href="../../docs/plugins/animate.html" class="dropdown-item">Plugins</a>
</div>
</div>
</div>
<a href="../../docs/components/alerts.html" class="list-group-item list-group-item-action" role="button">
<div class="d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="code"></i>
</span>
<!-- Media body -->
<div class="ml-3">
<h6 class="heading mb-0">Components</h6>
<small class="text-sm">Component examples and more</small>
</div>
</div>
</a>
<a href="../../docs/changelog.html" class="list-group-item list-group-item-action" role="button">
<div class="d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="file-text"></i>
</span>
<!-- Media body -->
<div class="ml-3">
<h6 class="heading mb-0">Changelog</h6>
<small class="text-sm">Component examples and more</small>
</div>
</div>
</a>
</div>
</div>
</li>
</ul>
<!-- Right navigation -->
<ul class="navbar-nav align-items-lg-center d-none d-lg-flex ml-lg-auto">
<!-- Auth -->
<li class="nav-item">
<a class="nav-link" href="../../pages/authentication/login-basic.html">
Sign in
</a>
</li>
<li class="nav-item">
<a href="https://themes.getbootstrap.com/product/quick-website-ui-kit-2/" class="btn btn-sm btn-primary btn-icon ml-3" target="_blank">
<span class="btn-inner--icon"><i data-feather="shopping-bag"></i></span>
<span class="btn-inner--text">Buy now</span>
</a>
</li>
</ul>
<!-- Mobile button -->
<div class="d-lg-none px-4 text-center">
<a href="https://themes.getbootstrap.com/product/quick-website-ui-kit-2/" class="btn btn-block btn-sm btn-primary" target="_blank">Purchase now</a>
</div>
</div>
</div>
</nav>
</header>
Show code
<!-- Navbar success -->
<!-- Header -->
<header class="" id="header-main"><!-- Navbar -->
<nav class="navbar navbar-main navbar-expand-lg shadow navbar-light" id="navbar-main">
<div class="container">
<!-- Toggler -->
<button class="navbar-toggler order-lg-2 ml-n3 ml-lg-0" type="button" data-toggle="collapse" data-target="#navbar-main-collapse" aria-controls="navbar-main-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Brand -->
<a class="navbar-brand order-lg-1" href="../../index.html">
<img alt="Image placeholder" src="../../assets/img/brand/dark.svg" id="navbar-logo">
</a>
<!-- Collapse -->
<div class="collapse navbar-collapse navbar-collapse-overlay order-lg-3" id="navbar-main-collapse">
<!-- Toggler -->
<div class="position-relative">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main-collapse" aria-controls="navbar-main-collapse" aria-expanded="false" aria-label="Toggle navigation">
<i data-feather="x"></i>
</button>
</div>
<!-- Main navigation -->
<ul class="navbar-nav ml-lg-auto mr-3">
<!-- Overview -->
<li class="nav-item nav-item-spaced d-none d-lg-block">
<a class="nav-link" href="../../overview.html">
Overview
</a>
</li>
<!-- Landings menu -->
<li class="nav-item nav-item-spaced dropdown dropdown-animate" data-toggle="hover">
<a class="nav-link" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
Landings
</a>
<div class="dropdown-menu dropdown-menu-xl p-0">
<div class="row no-gutters">
<div class="col-12 col-lg-6 order-lg-2">
<div class="dropdown-body dropdown-body-right bg-dropdown-secondary h-100">
<!-- Organization -->
<h6 class="dropdown-header">
Organization
</h6>
<div class="list-group list-group-flush">
<div class="list-group-item bg-transparent border-0 px-0 py-2">
<div class="media d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="layout"></i>
</span>
<!-- Media body -->
<div class="media-body ml-2">
<a href="../../pages/landing/agency.html" class="d-block heading h6 mb-0">Agency</a>
<small class="text-sm text-muted mb-0">Quick's most important features</small>
</div>
</div>
</div>
<div class="list-group-item bg-transparent border-0 px-0 py-2">
<div class="media d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="globe"></i>
</span>
<!-- Media body -->
<div class="media-body ml-2">
<a href="../../pages/landing/business.html" class="d-block h6 mb-0">Business</a>
<small class="text-sm text-muted mb-0">Quick's most important features</small>
</div>
</div>
</div>
<div class="list-group-item bg-transparent border-0 px-0 py-2">
<div class="media d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="camera"></i>
</span>
<!-- Media body -->
<div class="media-body ml-2">
<a href="../../pages/landing/studio.html" class="d-block h6 mb-0">Studio</a>
<small class="text-sm text-muted mb-0">Quick's most important features</small>
</div>
</div>
</div>
</div>
<!-- Services -->
<h6 class="dropdown-header mt-4">
Products & Services
</h6>
<div class="list-group list-group-flush">
<div class="list-group-item bg-transparent border-0 px-0 py-2">
<div class="media d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="code"></i>
</span>
<!-- Media body -->
<div class="media-body ml-2">
<a href="../../pages/landing/development.html" class="d-block h6 mb-0">Development</a>
<small class="text-sm text-muted mb-0">Quick's most important features</small>
</div>
</div>
</div>
<div class="list-group-item bg-transparent border-0 px-0 py-2">
<div class="media d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="bar-chart"></i>
</span>
<!-- Media body -->
<div class="media-body ml-2">
<a href="../../pages/landing/marketing.html" class="d-block h6 mb-0">Marketing</a>
<small class="text-sm text-muted mb-0">Quick's most important features</small>
</div>
</div>
</div>
<div class="list-group-item bg-transparent border-0 px-0 py-2">
<div class="media d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="map"></i>
</span>
<!-- Media body -->
<div class="media-body ml-2">
<a href="../../pages/landing/desktop-app.html" class="d-block h6 mb-0">Desktop App</a>
<small class="text-sm text-muted mb-0">Quick's most important features</small>
</div>
</div>
</div>
<div class="list-group-item bg-transparent border-0 px-0 py-2">
<div class="media d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="credit-card"></i>
</span>
<!-- Media body -->
<div class="media-body ml-2">
<a href="../../pages/landing/saas.html" class="d-block h6 mb-0">Saas App</a>
<small class="text-sm text-muted mb-0">Quick's most important features</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 order-lg-1 mt-4 mt-lg-0">
<div class="dropdown-body">
<h6 class="dropdown-header">
Get started
</h6>
<div class="list-group list-group-flush">
<div class="list-group-item border-0">
<div class="media d-flex">
<!-- SVG icon -->
<figure style="width: 40px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Code_2.svg" class="img-fluid" style="height: 40px;">
</figure>
<!-- Media body -->
<div class="media-body ml-3">
<a href="../../overview.html#landing" class="d-block h6 mb-0">Landing Pages</a>
<small class="text-sm text-muted mb-0">A starting point for any scenario.</small>
</div>
</div>
</div>
<div class="list-group-item border-0">
<div class="media d-flex">
<!-- SVG icon -->
<figure style="width: 40px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Like_UI.svg" class="img-fluid" style="height: 40px;">
</figure>
<!-- Media body -->
<div class="media-body ml-3">
<a href="../../overview.html#secondary" class="d-block h6 mb-0">Secondary Pages</a>
<small class="text-sm text-muted mb-0">A starting point for any scenario.</small>
</div>
</div>
</div>
<div class="list-group-item border-0">
<div class="media d-flex align-items-center">
<!-- SVG icon -->
<figure style="width: 40px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Online_Store_2.svg" class="img-fluid" style="width: 40px;">
</figure>
<!-- Media body -->
<div class="media-body ml-3">
<a href="../../overview.html#account" class="d-block h6 mb-0">Account Pages</a>
<small class="text-sm text-muted mb-0">Account management made easy.</small>
</div>
</div>
</div>
<div class="list-group-item border-0">
<div class="media d-flex align-items-center">
<!-- SVG icon -->
<figure style="width: 40px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Apps.svg" class="img-fluid" style="width: 40px;">
</figure>
<!-- Media body -->
<div class="media-body ml-3">
<a href="../../overview.html#boards" class="d-block h6 mb-0">Board Pages</a>
<small class="text-sm text-muted mb-0">Get your dashboard nice and easy.</small>
</div>
</div>
</div>
<h6 class="dropdown-header mt-4">
Developers
</h6>
<div class="list-group-item border-0">
<div class="media d-flex align-items-center">
<!-- SVG icon -->
<figure style="width: 40px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/DOC_File.svg" class="img-fluid" style="width: 40px;">
</figure>
<!-- Media body -->
<div class="media-body ml-3">
<a href="../../docs/index.html" class="d-block h6 mb-0">Documentation</a>
<small class="text-sm text-muted mb-0">A good place to start from</small>
</div>
</div>
</div>
<div class="list-group-item border-0">
<div class="media d-flex align-items-center">
<!-- SVG icon -->
<figure style="width: 40px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Package_Opened.svg" class="img-fluid" style="width: 40px;">
</figure>
<!-- Media body -->
<div class="media-body ml-3">
<a href="../../docs/components/alerts.html" class="d-block h6 mb-0">Components</a>
<small class="text-sm text-muted mb-0">A good place to start from</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- Pages menu -->
<li class="nav-item nav-item-spaced dropdown dropdown-animate" data-toggle="hover">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
<div class="dropdown-menu dropdown-menu-md p-0">
<ul class="list-group list-group-flush px-lg-4">
<li class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="list-group-item list-group-item-action dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex">
<!-- SVG icon -->
<figure style="width: 20px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Code.svg" class="svg-inject img-fluid" style="height: 20px;">
</figure>
<!-- Media body -->
<div class="ml-3">
<h6 class="heading mb-0">Landing</h6>
<p class="mb-0">Examples for any scenario.</p>
</div>
</div>
</a><ul class="dropdown-menu"><li>
<a class="dropdown-item" href="../../pages/landing/agency.html">
Agency
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/business.html">
Business
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/desktop-app.html">
Desktop App
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/development.html">
Development
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/marketing.html">
Marketing
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/money-app.html">
Money App
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/presentation.html">
Presentation
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/saas.html">
Saas
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/landing/studio.html">
Studio
</a>
</li>
</ul></li>
<li class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="list-group-item list-group-item-action dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex">
<!-- SVG icon -->
<figure style="width: 20px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Code.svg" class="svg-inject img-fluid" style="height: 20px;">
</figure>
<!-- Media body -->
<div class="ml-3">
<h6 class="heading mb-0">Secondary</h6>
<p class="mb-0">Examples for any scenario.</p>
</div>
</div>
</a><ul class="dropdown-menu"><li>
<a class="dropdown-item" href="../../pages/secondary/about.html">
About
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/services.html">
Services
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/pricing.html">
Pricing
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/pricing-alternative.html">
Pricing Alternative
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/careers.html">
Careers
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/careers-single.html">
Careers Single
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/case-study.html">
Case Study
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/contact.html">
Contact
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/support.html">
Support
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/secondary/support-topic.html">
Support Topic
</a>
</li>
</ul></li>
<li class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="list-group-item list-group-item-action dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex">
<!-- SVG icon -->
<figure style="width: 20px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Code.svg" class="svg-inject img-fluid" style="height: 20px;">
</figure>
<!-- Media body -->
<div class="ml-3">
<h6 class="heading mb-0">Blog</h6>
<p class="mb-0">Examples for any scenario.</p>
</div>
</div>
</a><ul class="dropdown-menu"><li>
<a class="dropdown-item" href="../../pages/blog/blog-grid.html">
Blog Grid
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/blog/blog-masonry.html">
Blog Masonry
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/blog/blog-article.html">
Blog Article
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/blog/blog-article-modern.html">
Blog Article Modern
</a>
</li>
</ul></li>
<li class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="list-group-item list-group-item-action dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex">
<!-- SVG icon -->
<figure style="width: 20px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Cog_Wheels.svg" class="svg-inject img-fluid" style="height: 20px;">
</figure>
<!-- Media body -->
<div class="ml-3">
<h6 class="heading mb-0">Utility</h6>
<p class="mb-0">Error pages and everything else.</p>
</div>
</div>
</a><ul class="dropdown-menu"><li>
<a class="dropdown-item" href="../../pages/utility/coming-soon.html">
Coming Soon
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/utility/error-side-cover.html">
Error Side Cover
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/utility/error-illustration.html">
Error Illustration
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/utility/faq.html">
Faq
</a>
</li>
<li>
<a class="dropdown-item" href="../../pages/utility/terms.html">
Terms
</a>
</li>
</ul></li></ul>
</div>
</li>
<!-- App menu -->
<li class="nav-item nav-item-spaced dropdown dropdown-animate" data-toggle="hover">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">App</a>
<div class="dropdown-menu dropdown-menu-md p-0">
<ul class="list-group list-group-flush px-lg-4">
<li class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="list-group-item list-group-item-action dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media d-flex">
<!-- SVG icon -->
<figure style="width: 20px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Secure_Files.svg" class="svg-inject img-fluid" style="height: 20px;">
</figure>
<!-- Media body -->
<div class="media-body ml-2">
<h6 class="heading mb-0">Authentication</h6>
<p class="mb-0">Examples for any scenario.</p>
</div>
</div>
</a><div class="dropdown-menu"><a class="dropdown-item" href="../../pages/authentication/login-basic.html">
Login Basic
</a>
<a class="dropdown-item" href="../../pages/authentication/login-side-cover.html">
Login Side Cover
</a>
<a class="dropdown-item" href="../../pages/authentication/login-overlay.html">
Login Overlay
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../../pages/authentication/register-basic.html">
Register Basic
</a>
<a class="dropdown-item" href="../../pages/authentication/register-side-cover.html">
Register Side Cover
</a>
<a class="dropdown-item" href="../../pages/authentication/register-overlay.html">
Register Overlay
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../../pages/authentication/recover-basic.html">
Recover Basic
</a>
<a class="dropdown-item" href="../../pages/authentication/recover-side-cover.html">
Recover Side Cover
</a>
<a class="dropdown-item" href="../../pages/authentication/recover-overlay.html">
Recover Overlay
</a>
</div></li>
<li class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="list-group-item list-group-item-action dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media d-flex">
<!-- SVG icon -->
<figure style="width: 20px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Task.svg" class="svg-inject img-fluid" style="height: 20px;">
</figure>
<!-- Media body -->
<div class="media-body ml-2">
<h6 class="heading mb-0">Account</h6>
<p class="mb-0">Account management made cool.</p>
</div>
</div>
</a><div class="dropdown-menu"><a class="dropdown-item" href="../../pages/account/profile.html">
Profile
</a>
<a class="dropdown-item" href="../../pages/account/settings.html">
Settings
</a>
<a class="dropdown-item" href="../../pages/account/billing.html">
Billing
</a>
<a class="dropdown-item" href="../../pages/account/cards.html">
Cards
</a>
<a class="dropdown-item" href="../../pages/account/security.html">
Security
</a>
<a class="dropdown-item" href="../../pages/account/users.html">
Users
</a>
<a class="dropdown-item" href="../../pages/account/notifications.html">
Notifications
</a>
</div></li>
<li class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="list-group-item list-group-item-action dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media d-flex">
<!-- SVG icon -->
<figure style="width: 20px;">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Task.svg" class="svg-inject img-fluid" style="height: 20px;">
</figure>
<!-- Media body -->
<div class="media-body ml-2">
<h6 class="heading mb-0">Boards</h6>
<p class="mb-0">Account management made cool.</p>
</div>
</div>
</a><div class="dropdown-menu"><a class="dropdown-item" href="../../pages/boards/overview.html">
Overview
</a>
<a class="dropdown-item" href="../../pages/boards/projects.html">
Projects
</a>
<a class="dropdown-item" href="../../pages/boards/tasks.html">
Tasks
</a>
<a class="dropdown-item" href="../../pages/boards/integrations.html">
Integrations
</a>
</div></li><li>
<div class="d-none d-lg-block py-3 bg-transparent">
<div class="row">
<div class="col-sm-6">
<a href="../../pages/boards/overview.html" class="dropdown-item">Dashboard</a>
<a href="../../pages/boards/projects.html" class="dropdown-item">Projects</a>
<a href="../../pages/boards/tasks.html" class="dropdown-item">Tasks</a>
<a href="../../pages/boards/integrations.html" class="dropdown-item">Integrations</a>
</div>
<div class="col-sm-6">
<a href="../../pages/account/settings.html" class="dropdown-item">Settings</a>
<a href="../../pages/account/billing.html" class="dropdown-item">Billing</a>
<a href="../../pages/account/cards.html" class="dropdown-item">Cards</a>
<a href="../../pages/account/users.html" class="dropdown-item">Users</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
<!-- Docs menu -->
<li class="nav-item nav-item-spaced dropdown dropdown-animate" data-toggle="hover">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
<div class="dropdown-menu dropdown-menu-md p-0">
<div class="list-group list-group-flush px-lg-4">
<a href="../../docs/index.html" class="list-group-item list-group-item-action" role="button">
<div class="d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="book"></i>
</span>
<!-- Media body -->
<div class="ml-3">
<h6 class="heading mb-0">Documentation</h6>
<small class="text-sm">Quick setup and build tools</small>
</div>
</div>
</a>
<div class="py-3">
<div class="row">
<div class="col-sm-6">
<a href="../../docs/getting-started/quick-start.html" class="dropdown-item">Quick Start</a>
<a href="../../docs/getting-started/build-tools.html" class="dropdown-item">Build Tools</a>
<a href="../../docs/getting-started/customization.html" class="dropdown-item">Customization</a>
<a href="../../docs/getting-started/file-structure.html" class="dropdown-item">File Structure</a>
<a href="../../docs/components/alerts.html" class="dropdown-item">Components</a>
</div>
<div class="col-sm-6">
<a href="../../docs/styleguide/icons.html" class="dropdown-item">Icons</a>
<a href="../../docs/styleguide/svg-icons.html" class="dropdown-item">SVG Icons</a>
<a href="../../docs/styleguide/illustrations.html" class="dropdown-item">Illustrations</a>
<a href="../../docs/plugins/animate.html" class="dropdown-item">Plugins</a>
</div>
</div>
</div>
<a href="../../docs/components/alerts.html" class="list-group-item list-group-item-action" role="button">
<div class="d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="code"></i>
</span>
<!-- Media body -->
<div class="ml-3">
<h6 class="heading mb-0">Components</h6>
<small class="text-sm">Component examples and more</small>
</div>
</div>
</a>
<a href="../../docs/changelog.html" class="list-group-item list-group-item-action" role="button">
<div class="d-flex">
<!-- SVG icon -->
<span class="h6">
<i data-feather="file-text"></i>
</span>
<!-- Media body -->
<div class="ml-3">
<h6 class="heading mb-0">Changelog</h6>
<small class="text-sm">Component examples and more</small>
</div>
</div>
</a>
</div>
</div>
</li>
</ul>
<!-- Right navigation -->
<ul class="navbar-nav align-items-lg-center d-none d-lg-flex ml-lg-auto">
<li class="nav-item">
<a href="#" data-action="omnisearch-open" data-target="#omnisearch" class="nav-link nav-link-icon px-2">
<i data-feather="search"></i>
</a>
</li>
<li class="nav-item dropdown dropdown-animate">
<a class="nav-link nav-link-icon px-2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="settings"></i>
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right dropdown-menu-arrow p-3">
<h6 class="dropdown-header px-0 mb-2 text-primary">Hi, Emma!</h6>
<a href="../../pages/account/profile.html" class="dropdown-item">
<i data-feather="user"></i>
<span>My profile</span>
</a>
<a href="../../pages/account/billing.html" class="dropdown-item">
<i data-feather="credit-card"></i>
<span>Billing</span>
</a>
<a href="../../pages/boards/overview.html" class="dropdown-item">
<i data-feather="activity"></i>
<span>Dashboard</span>
</a>
<div class="dropdown-divider"></div>
<a href="../../pages/account/settings.html" class="dropdown-item">
<i data-feather="settings"></i>
<span>Settings</span>
</a>
<a href="../../pages/authentication/login-basic.html" class="dropdown-item">
<i data-feather="log-out"></i>
<span>Logout</span>
</a>
</div>
</li>
<li class="nav-item dropdown dropdown-animate">
<a class="nav-link nav-link-icon px-2" href="#modal-notifications" role="button" data-toggle="modal">
<i data-feather="bell"></i>
</a>
</li>
</ul>
<!-- Mobile button -->
<div class="d-lg-none px-4 text-center">
<a href="https://themes.getbootstrap.com/product/quick-website-ui-kit-2/" class="btn btn-block btn-sm btn-warning" target="_blank">Purchase now</a>
</div>
</div>
<!-- Avatar menu -->
<div class="order-lg-4 ml-lg-3">
<a class="" href="#modal-profile" role="button" data-toggle="modal">
<span class="avatar rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-auth.jpg">
</span>
</a>
</div>
</div>
</nav>
</header>
Show code
<!-- Navbar warning -->
<nav class="navbar navbar-horizontal navbar-expand-lg navbar-dark bg-warning mt-4">
<div class="container">
<a class="navbar-brand" href="#">Warning Color</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-warning" aria-controls="navbar-warning" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-warning">
<ul class="navbar-nav align-items-lg-center ml-lg-auto">
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-facebook-square"></i>
<span class="nav-link-inner--text d-lg-none">Share</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-twitter"></i>
<span class="nav-link-inner--text d-lg-none">Tweet</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-pinterest"></i>
<span class="nav-link-inner--text d-lg-none">Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Show code
<!-- Navbar info -->
<nav class="navbar navbar-horizontal navbar-expand-lg navbar-dark bg-info mt-4">
<div class="container">
<a class="navbar-brand" href="#">Info Color</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-info" aria-controls="navbar-info" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-info">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-facebook-square"></i>
<span class="nav-link-inner--text">Facebook</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-twitter"></i>
<span class="nav-link-inner--text">Twitter</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-instagram"></i>
<span class="nav-link-inner--text">Instagram</span>
</a>
</li>
</ul>
</div>
</div>
</nav>