Headers
Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar.
Header #1
<div class="collapse" id="collapseExample">
<div class="container">
<div class="row align-items-center">
<div class="col-md-11 col-10">
<div class="py-4">
<form class="d-flex align-items-center">
<span class="position-absolute ps-3">
<i class="fe fe-search"></i>
</span>
<input type="search" class="form-control ps-6 border-0 py-3 smooth-shadow-md" placeholder="Enter a question, topic or keyword" />
</form>
</div>
</div>
<div class="col-md-1 col-2">
<div>
<button
type="button"
class="btn-close"
aria-label="Close"
data-bs-toggle="collapse"
data-bs-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"></button>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand @@classList">
<div class="container px-0">
<div class="d-flex align-items-center">
<a class="navbar-brand me-4" href="../index.html"><img src="../assets/images/brand/logo/logo.svg" alt="" /></a>
<ul class="list-unstyled mb-0 lh-1">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle @@textColor" href="#" id="navbarBrowse" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-display="static">
Help Center
</a>
<ul class="dropdown-menu dropdown-menu-arrow" aria-labelledby="navbarBrowse">
<li>
<a class="dropdown-item" href="../pages/help-center.html">Help Center</a>
</li>
<li>
<a class="dropdown-item" href="../pages/help-center-faq.html">FAQ's</a>
</li>
<li>
<a class="dropdown-item" href="../pages/help-center-guide.html">Guide</a>
</li>
<li>
<a class="dropdown-item" href="../pages/help-center-guide-single.html">Guide Single</a>
</li>
<li>
<a class="dropdown-item" href="../pages/help-center-support.html">Support</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="ms-auto d-flex align-items-center">
<div class="dropdown">
<button class="btn btn-light btn-icon rounded-circle d-flex align-items-center bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
<i class="bi theme-icon-active"></i>
<span class="visually-hidden bs-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bs-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<i class="bi theme-icon bi-sun-fill"></i>
<span class="ms-2">Light</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<i class="bi theme-icon bi-moon-stars-fill"></i>
<span class="ms-2">Dark</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
<i class="bi theme-icon bi-circle-half"></i>
<span class="ms-2">Auto</span>
</button>
</li>
</ul>
</div>
<div class="d-flex align-items-center">
<a href="#" class="ms-2 me-md-4 @@searchColor" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<i class="fe fe-search fs-3"></i>
</a>
<a href="../pages/help-center-support.html" class="btn btn-primary d-lg-block d-none">Submit Ticket</a>
</div>
</div>
<!-- Collapse -->
</nav>Header #2
<!-- navbar login -->
<nav class="navbar navbar-expand-lg">
<div class="container px-0">
<a class="navbar-brand" href="../index.html"><img src="../assets/images/brand/logo/logo.svg" alt="" /></a>
<div class="d-flex align-items-center order-lg-3 ms-lg-3">
<div class="d-flex align-items-center">
<div class="dropdown me-2">
<button
class="btn btn-light btn-icon rounded-circle d-flex align-items-center bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Toggle theme (auto)">
<i class="bi theme-icon-active"></i>
<span class="visually-hidden bs-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bs-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<i class="bi theme-icon bi-sun-fill"></i>
<span class="ms-2">Light</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<i class="bi theme-icon bi-moon-stars-fill"></i>
<span class="ms-2">Dark</span>
</button>
</li>
<li>
<button
type="button"
class="dropdown-item d-flex align-items-center active"
data-bs-theme-value="auto"
aria-pressed="true">
<i class="bi theme-icon bi-circle-half"></i>
<span class="ms-2">Auto</span>
</button>
</li>
</ul>
</div>
<a href="https://themes.getbootstrap.com/product/geeks-academy-admin-template/" class="btn btn-outline-primary me-2">Sign in</a>
<a href="https://themes.getbootstrap.com/product/geeks-academy-admin-template/" class="btn btn-primary d-none d-md-block">
Sign up
</a>
</div>
<button
class="navbar-toggler collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-default5"
aria-controls="navbar-default5"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="icon-bar top-bar mt-0"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<!-- Button -->
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbar-default5">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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"
href="#"
id="navbarDropdown"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-bs-display="static">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-arrow" aria-labelledby="navbarDropdown">
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../pages/course-category.html">Action Link</a>
</li>
<li>
<a href="#!" class="dropdown-item">Anthor Action</a>
</li>
<li>
<a href="#!" class="dropdown-item">Something else here</a>
</li>
</ul>
</li>
<li>
<a href="#!" class="dropdown-item">Action Link</a>
</li>
<li>
<a href="#!" class="dropdown-item">Anthor Action</a>
</li>
<li>
<a href="#!" class="dropdown-item">Something else here</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>Header #3
<nav class="navbar navbar-expand-lg">
<div class="container-fluid px-0">
<a class="navbar-brand" href="../index.html"><img src="../assets/images/brand/logo/logo.svg" alt="" /></a>
<div class="order-lg-3 d-flex align-items-center">
<div>
<div class="d-flex align-items-center">
<div class="dropdown me-2">
<button
class="btn btn-light btn-icon rounded-circle d-flex align-items-center bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Toggle theme (auto)">
<i class="bi theme-icon-active"></i>
<span class="visually-hidden bs-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bs-theme-text">
<li>
<button
type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="light"
aria-pressed="false">
<i class="bi theme-icon bi-sun-fill"></i>
<span class="ms-2">Light</span>
</button>
</li>
<li>
<button
type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="dark"
aria-pressed="false">
<i class="bi theme-icon bi-moon-stars-fill"></i>
<span class="ms-2">Dark</span>
</button>
</li>
<li>
<button
type="button"
class="dropdown-item d-flex align-items-center active"
data-bs-theme-value="auto"
aria-pressed="true">
<i class="bi theme-icon bi-circle-half"></i>
<span class="ms-2">Auto</span>
</button>
</li>
</ul>
</div>
<a href="#" class="btn btn-outline-primary shadow-sm me-1">Sign In</a>
<a href="#" class="btn btn-primary d-none d-md-block">Sign Up</a>
</div>
</div>
<!-- Button -->
<button
class="navbar-toggler collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-default"
aria-controls="navbar-default"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="icon-bar top-bar mt-0"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbar-default">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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"
href="#"
id="navbarDropdown"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-bs-display="static">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-arrow" aria-labelledby="navbarDropdown">
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../pages/course-category.html">Action Link</a>
</li>
<li>
<a href="#!" class="dropdown-item">Anthor Action</a>
</li>
<li>
<a href="#!" class="dropdown-item">Something else here</a>
</li>
</ul>
</li>
<li>
<a href="#!" class="dropdown-item">Action Link</a>
</li>
<li>
<a href="#!" class="dropdown-item">Anthor Action</a>
</li>
<li>
<a href="#!" class="dropdown-item">Something else here</a>
</li>
</ul>
</li>
</ul>
<form class="mt-3 mt-lg-0 ms-lg-3 d-flex align-items-center">
<span class="position-absolute ps-3 search-icon">
<i class="fe fe-search"></i>
</span>
<input type="search" class="form-control ps-6" placeholder="Search Courses" />
</form>
</div>
</div>
</nav>Header #4
<nav class="navbar navbar-expand-lg navbar-transparent shadow-none position-relative">
<div class="container px-0">
<a class="navbar-brand" href="../index.html"><img src="../assets/images/brand/logo/logo.svg" alt="" /></a>
<div class="d-flex align-items-center order-lg-3">
<div class="d-flex align-items-center">
<div class="dropdown me-2">
<button
class="btn btn-light btn-icon rounded-circle d-flex align-items-center bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Toggle theme (auto)">
<i class="bi theme-icon-active"></i>
<span class="visually-hidden bs-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bs-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<i class="bi theme-icon bi-sun-fill"></i>
<span class="ms-2">Light</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<i class="bi theme-icon bi-moon-stars-fill"></i>
<span class="ms-2">Dark</span>
</button>
</li>
<li>
<button
type="button"
class="dropdown-item d-flex align-items-center active"
data-bs-theme-value="auto"
aria-pressed="true">
<i class="bi theme-icon bi-circle-half"></i>
<span class="ms-2">Auto</span>
</button>
</li>
</ul>
</div>
<a href="https://themes.getbootstrap.com/product/geeks-academy-admin-template/" class="btn btn-primary">Buy Now</a>
</div>
<div>
<button
class="navbar-toggler collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-default3"
aria-controls="navbar-default3"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="icon-bar top-bar mt-0"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
</div>
</div>
<!-- Button -->
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbar-default3">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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"
href="#"
id="navbarDropdown"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-bs-display="static">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-arrow" aria-labelledby="navbarDropdown">
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../pages/course-category.html">Action Link</a>
</li>
<li>
<a href="#!" class="dropdown-item">Anthor Action</a>
</li>
<li>
<a href="#!" class="dropdown-item">Something else here</a>
</li>
</ul>
</li>
<li>
<a href="#!" class="dropdown-item">Action Link</a>
</li>
<li>
<a href="#!" class="dropdown-item">Anthor Action</a>
</li>
<li>
<a href="#!" class="dropdown-item">Something else here</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>Header #5
<nav class="navbar navbar-expand-lg">
<div class="container-fluid px-0">
<div class="d-flex">
<a class="navbar-brand" href="../index.html">
<img src="../assets/images/brand/logo/logo.svg" alt="Geeks high quality website templates created with Bootstrap 5." />
</a>
<div class="dropdown d-none d-md-block">
<button
class="btn btn-light-primary text-primary"
type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
aria-expanded="false">
<i class="fe fe-list me-2 align-middle"></i>
Category
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#">Web Development</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../pages/course-category.html">Bootstrap</a>
</li>
<li>
<a class="dropdown-item" href="../pages/course-category.html">React</a>
</li>
<li>
<a class="dropdown-item" href="../pages/course-category.html">GraphQl</a>
</li>
<li>
<a class="dropdown-item" href="../pages/course-category.html">Gatsby</a>
</li>
<li>
<a class="dropdown-item" href="../pages/course-category.html">Grunt</a>
</li>
<li>
<a class="dropdown-item" href="../pages/course-category.html">Svelte</a>
</li>
<li>
<a class="dropdown-item" href="../pages/course-category.html">Meteor</a>
</li>
<li>
<a class="dropdown-item" href="../pages/course-category.html">HTML5</a>
</li>
<li>
<a class="dropdown-item" href="../pages/course-category.html">Angular</a>
</li>
</ul>
</li>
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#">Design</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../pages/course-category.html">Graphic Design</a>
</li>
<li>
<a class="dropdown-item" href="../pages/course-category.html">Illustrator</a>
</li>
<li>
<a class="dropdown-item" href="../pages/course-category.html">UX / UI Design</a>
</li>
<li>
<a class="dropdown-item" href="../pages/course-category.html">Figma Design</a>
</li>
<li>
<a class="dropdown-item" href="../pages/course-category.html">Adobe XD</a>
</li>
<li>
<a class="dropdown-item" href="../pages/course-category.html">Sketch</a>
</li>
<li>
<a class="dropdown-item" href="../pages/course-category.html">Icon Design</a>
</li>
<li>
<a class="dropdown-item" href="../pages/course-category.html">Photoshop</a>
</li>
</ul>
</li>
<li>
<a href="../pages/course-category.html" class="dropdown-item">Mobile App</a>
</li>
<li>
<a href="../pages/course-category.html" class="dropdown-item">IT Software</a>
</li>
<li>
<a href="../pages/course-category.html" class="dropdown-item">Marketing</a>
</li>
<li>
<a href="../pages/course-category.html" class="dropdown-item">Music</a>
</li>
<li>
<a href="../pages/course-category.html" class="dropdown-item">Life Style</a>
</li>
<li>
<a href="../pages/course-category.html" class="dropdown-item">Business</a>
</li>
<li>
<a href="../pages/course-category.html" class="dropdown-item">Photography</a>
</li>
</ul>
</div>
</div>
<div class="order-lg-3">
<div class="d-flex align-items-center">
<div class="dropdown me-2">
<button
class="btn btn-light btn-icon rounded-circle d-flex align-items-center bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Toggle theme (auto)">
<i class="bi theme-icon-active"></i>
<span class="visually-hidden bs-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bs-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<i class="bi theme-icon bi-sun-fill"></i>
<span class="ms-2">Light</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<i class="bi theme-icon bi-moon-stars-fill"></i>
<span class="ms-2">Dark</span>
</button>
</li>
<li>
<button
type="button"
class="dropdown-item d-flex align-items-center active"
data-bs-theme-value="auto"
aria-pressed="true">
<i class="bi theme-icon bi-circle-half"></i>
<span class="ms-2">Auto</span>
</button>
</li>
</ul>
</div>
<span class="d-none d-md-block">
<a href="#" class="btn btn-icon btn-light rounded-circle"><i class="fe fe-shopping-cart align-middle"></i></a>
</span>
<a href="../pages/sign-in.html" class="btn btn-outline-primary ms-2">Sign in</a>
<a href="../pages/sign-up.html" class="btn btn-primary ms-1 d-none d-lg-block">Sign up</a>
<!-- Button -->
<button
class="navbar-toggler collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-default2"
aria-controls="navbar-default2"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="icon-bar top-bar mt-0"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
</div>
</div>
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbar-default2">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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"
href="#"
id="navbarDropdown"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-bs-display="static">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-arrow" aria-labelledby="navbarDropdown">
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../pages/course-category.html">Action Link</a>
</li>
<li>
<a href="#!" class="dropdown-item">Anthor Action</a>
</li>
<li>
<a href="#!" class="dropdown-item">Something else here</a>
</li>
</ul>
</li>
<li>
<a href="#!" class="dropdown-item">Action Link</a>
</li>
<li>
<a href="#!" class="dropdown-item">Anthor Action</a>
</li>
<li>
<a href="#!" class="dropdown-item">Something else here</a>
</li>
</ul>
</li>
<li class="nav-item dropdown dropdown-fullwidth">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mega Menu</a>
<div class="dropdown-menu dropdown-menu-md">
<div class="px-4 pt-2 pb-2">
<div class="row">
<div class="col-12">
<div class="lh-1 mb-5">
<h3 class="mb-1">Earn a Degree</h3>
<p>Breakthrough pricing on 100% online degrees designed to fit into your life.</p>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="border-bottom pb-2 mb-3">
<h5 class="mb-0">Degrees</h5>
</div>
<div>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/degree-1.png" alt="" />
<div class="ms-2">
<small class="text-body">University of Michigan</small>
<h6 class="mb-0">Master of Applied Data Science</h6>
</div>
</div>
</a>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/degree-2.png" alt="" />
<div class="ms-2">
<small class="text-body">A&B College 1980</small>
<h6 class="mb-0">MBA in Business Analytics</h6>
</div>
</div>
</a>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/degree-3.png" alt="" />
<div class="ms-2">
<small class="text-body">Imperial College London</small>
<h6 class="mb-0">Master of Science in Machine</h6>
</div>
</div>
</a>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/degree-4.png" alt="" />
<div class="ms-2">
<small class="text-body">University of Colorado</small>
<h6 class="mb-0">Master of Computer Science</h6>
</div>
</div>
</a>
<div class="mt-4">
<a href="#" class="btn btn-outline-primary btn-sm">View all degree</a>
</div>
</div>
</div>
<div class="col-lg-4 col-12 mt-4 mt-lg-0">
<div class="border-bottom pb-2 mb-3">
<h5 class="mb-0">Certificate Programs</h5>
</div>
<div>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/google.png" alt="" />
<div class="ms-2">
<small class="text-body">No Prerequisites</small>
<h6 class="mb-0">Google Data Analytics</h6>
</div>
</div>
</a>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/IBM.png" alt="" />
<div class="ms-2">
<small class="text-body">No Prerequisites</small>
<h6 class="mb-0">IBM Data Science</h6>
</div>
</div>
</a>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/microsoft.png" alt="" />
<div class="ms-2">
<small class="text-body">Expert Feedback</small>
<h6 class="mb-0">Machine Leaning for Analytics</h6>
</div>
</div>
</a>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/tensorflow.png" alt="" />
<div class="ms-2">
<small class="text-body">Certification Prerequisites</small>
<h6 class="mb-0">TensorFlow Developer Certificate</h6>
</div>
</div>
</a>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/meta.png" alt="" />
<div class="ms-2">
<small class="text-body">University of Colorado</small>
<h6 class="mb-0">Meta Marketing Analytics</h6>
</div>
</div>
</a>
<div class="mt-4">
<a href="#" class="btn btn-outline-primary btn-sm">View all Certificates</a>
</div>
</div>
</div>
<div class="col-lg-4 col-12 mt-4 mt-lg-0">
<div class="border-bottom pb-2 mb-3">
<h5 class="mb-0">Popular Skills</h5>
</div>
<div>
<ul class="nav flex-column">
<li class="nav-item">
<a href="#" class="nav-link">Python</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">SQL</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Microsoft Excel</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Machine Learning</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Data Science</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Data Analytics</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Power BI</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Artificial Intelligence</a>
</li>
</ul>
<div class="mt-4">
<a href="#" class="btn btn-outline-primary btn-sm">View all Skills</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>Header #6
<nav class="navbar navbar-expand-lg">
<div class="container-fluid px-0">
<a class="navbar-brand" href="../index.html"><img src="../assets/images/brand/logo/logo.svg" alt="" /></a>
<!-- Mobile view nav wrap -->
<div class="ms-auto d-flex align-items-center order-lg-3">
<div>
<div class="dropdown me-2">
<button
class="btn btn-light btn-icon rounded-circle d-flex align-items-center bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Toggle theme (auto)">
<i class="bi theme-icon-active"></i>
<span class="visually-hidden bs-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bs-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<i class="bi theme-icon bi-sun-fill"></i>
<span class="ms-2">Light</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<i class="bi theme-icon bi-moon-stars-fill"></i>
<span class="ms-2">Dark</span>
</button>
</li>
<li>
<button
type="button"
class="dropdown-item d-flex align-items-center active"
data-bs-theme-value="auto"
aria-pressed="true">
<i class="bi theme-icon bi-circle-half"></i>
<span class="ms-2">Auto</span>
</button>
</li>
</ul>
</div>
</div>
<ul class="navbar-nav navbar-right-wrap mx-2 flex-row">
<li class="dropdown d-inline-block stopevent position-static">
<a
class="btn btn-light btn-icon rounded-circle indicator indicator-primary"
href="#"
role="button"
id="dropdownNotificationSecond"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fe fe-bell"></i>
</a>
<div
class="dropdown-menu dropdown-menu-end dropdown-menu-lg position-absolute mx-3 my-5"
aria-labelledby="dropdownNotificationSecond">
<div>
<div class="border-bottom px-3 pb-3 d-flex justify-content-between align-items-center">
<span class="h5 mb-0">Notifications</span>
<a href="# ">
<span class="align-middle"><i class="fe fe-settings me-1"></i></span>
</a>
</div>
<ul class="list-group list-group-flush" style="height: 300px" data-simplebar>
<li class="list-group-item bg-light">
<div class="row">
<div class="col">
<a class="text-body" href="#">
<div class="d-flex">
<img
src="../assets/images/avatar/avatar-1.jpg"
alt=""
class="avatar-md rounded-circle" />
<div class="ms-3">
<h5 class="fw-bold mb-1">Kristin Watson:</h5>
<p class="mb-3 text-body">
Krisitn Watsan like your comment on course Javascript Introduction!
</p>
<span class="fs-6">
<span>
<span class="fe fe-thumbs-up text-success me-1"></span>
2 hours ago,
</span>
<span class="ms-1">2:19 PM</span>
</span>
</div>
</div>
</a>
</div>
<div class="col-auto text-center me-2">
<a
href="#"
class="badge-dot bg-info"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Mark as read"></a>
<div>
<a href="#" class="bg-transparent" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove">
<i class="fe fe-x"></i>
</a>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col">
<a class="text-body" href="#">
<div class="d-flex">
<img
src="../assets/images/avatar/avatar-2.jpg"
alt=""
class="avatar-md rounded-circle" />
<div class="ms-3">
<h5 class="fw-bold mb-1">Brooklyn Simmons</h5>
<p class="mb-3 text-body">Just launched a new Courses React for Beginner.</p>
<span class="fs-6">
<span>
<span class="fe fe-thumbs-up text-success me-1"></span>
Oct 9,
</span>
<span class="ms-1">1:20 PM</span>
</span>
</div>
</div>
</a>
</div>
<div class="col-auto text-center me-2">
<a
href="#"
class="badge-dot bg-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Mark as unread"></a>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col">
<a class="text-body" href="#">
<div class="d-flex">
<img
src="../assets/images/avatar/avatar-3.jpg"
alt=""
class="avatar-md rounded-circle" />
<div class="ms-3">
<h5 class="fw-bold mb-1">Jenny Wilson</h5>
<p class="mb-3 text-body">
Krisitn Watsan like your comment on course Javascript Introduction!
</p>
<span class="fs-6">
<span>
<span class="fe fe-thumbs-up text-info me-1"></span>
Oct 9,
</span>
<span class="ms-1">1:56 PM</span>
</span>
</div>
</div>
</a>
</div>
<div class="col-auto text-center me-2">
<a
href="#"
class="badge-dot bg-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Mark as unread"></a>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col">
<a class="text-body" href="#">
<div class="d-flex">
<img
src="../assets/images/avatar/avatar-4.jpg"
alt=""
class="avatar-md rounded-circle" />
<div class="ms-3">
<h5 class="fw-bold mb-1">Sina Ray</h5>
<p class="mb-3 text-body">
You earn new certificate for complete the Javascript Beginner course.
</p>
<span class="fs-6">
<span>
<span class="fe fe-award text-warning me-1"></span>
Oct 9,
</span>
<span class="ms-1">1:56 PM</span>
</span>
</div>
</div>
</a>
</div>
<div class="col-auto text-center me-2">
<a
href="#"
class="badge-dot bg-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Mark as unread"></a>
</div>
</div>
</li>
</ul>
<div class="border-top px-3 pt-3 pb-0">
<a href="../pages/notification-history.html" class="text-link fw-semibold">See all Notifications</a>
</div>
</div>
</div>
</li>
<li class="dropdown ms-2 d-inline-block position-static">
<a class="rounded-circle" href="#" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
<div class="avatar avatar-md avatar-indicators avatar-online">
<img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle" />
</div>
</a>
<div class="dropdown-menu dropdown-menu-end position-absolute mx-3 my-5">
<div class="dropdown-item">
<div class="d-flex">
<div class="avatar avatar-md avatar-indicators avatar-online">
<img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle" />
</div>
<div class="ms-3 lh-1">
<h5 class="mb-1">Annette Black</h5>
<p class="mb-0">annette@geeksui.com</p>
</div>
</div>
</div>
<div class="dropdown-divider"></div>
<ul class="list-unstyled">
<li class="dropdown-submenu dropstart-lg">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#">
<i class="fe fe-circle me-2"></i>
Status
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
<span class="badge-dot bg-success me-2"></span>
Online
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<span class="badge-dot bg-secondary me-2"></span>
Offline
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<span class="badge-dot bg-warning me-2"></span>
Away
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<span class="badge-dot bg-danger me-2"></span>
Busy
</a>
</li>
</ul>
</li>
<li>
<a class="dropdown-item" href="../pages/profile-edit.html">
<i class="fe fe-user me-2"></i>
Profile
</a>
</li>
<li>
<a class="dropdown-item" href="../pages/student-subscriptions.html">
<i class="fe fe-star me-2"></i>
Subscription
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="fe fe-settings me-2"></i>
Settings
</a>
</li>
</ul>
<div class="dropdown-divider"></div>
<ul class="list-unstyled">
<li>
<a class="dropdown-item" href="../index.html">
<i class="fe fe-power me-2"></i>
Sign Out
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div>
<!-- Button -->
<button
class="navbar-toggler collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-default"
aria-controls="navbar-default"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="icon-bar top-bar mt-0"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbar-default">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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"
href="#"
id="navbarDropdown"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-bs-display="static">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-arrow" aria-labelledby="navbarDropdown">
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../pages/course-category.html">Action Link</a>
</li>
<li>
<a href="#!" class="dropdown-item">Anthor Action</a>
</li>
<li>
<a href="#!" class="dropdown-item">Something else here</a>
</li>
</ul>
</li>
<li>
<a href="#!" class="dropdown-item">Action Link</a>
</li>
<li>
<a href="#!" class="dropdown-item">Anthor Action</a>
</li>
<li>
<a href="#!" class="dropdown-item">Something else here</a>
</li>
</ul>
</li>
</ul>
<form class="mt-3 mt-lg-0 ms-lg-3 d-flex align-items-center">
<span class="position-absolute ps-3 search-icon">
<i class="fe fe-search"></i>
</span>
<input type="search" class="form-control ps-6" placeholder="Search Courses" />
</form>
</div>
</div>
</nav>