Black Friday! Up to 90% OFF
<div class="container-fluid"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <form class="navbar-search navbar-search-light form-inline mr-sm-3 mb-0" id="navbar-search-main"> <div class="form-group mb-0"> <div class="input-group input-group-alternative input-group-merge"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-search"></i></span> </div> <input class="form-control" placeholder="Search" type="text"> </div> </div> <button type="button" class="close" data-action="search-close" data-target="#navbar-search-main" aria-label="Close"> <span aria-hidden="true">×</span> </button> </form> <ul class="navbar-nav align-items-center ml-md-auto "> <li class="nav-item d-xl-none"> <div class="pr-3 sidenav-toggler sidenav-toggler-dark active" data-action="sidenav-pin" data-target="#sidenav-main"> <div class="sidenav-toggler-inner"> <i class="sidenav-toggler-line"></i> <i class="sidenav-toggler-line"></i> <i class="sidenav-toggler-line"></i> </div> </div> </li> <li class="nav-item d-sm-none"> <a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main"> <i class="ni ni-zoom-split-in"></i> </a> </li> <li class="nav-item dropdown"> <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-bell"></i> </a> <div class="dropdown-menu dropdown-menu-xl dropdown-menu-right py-0 overflow-hidden"> <div class="px-3 py-3"> <h6 class="text-sm text-muted m-0">You have <strong class="text-primary">13</strong> notifications.</h6> </div> <div class="list-group list-group-flush"> <a href="#!" class="list-group-item list-group-item-action"> <div class="row align-items-center"> <div class="col-auto"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg" class="avatar rounded-circle"> </div> <div class="col ml--2"> <div class="d-flex justify-content-between align-items-center"> <div> <h4 class="mb-0 text-sm">John Snow</h4> </div> <div class="text-right text-muted"> <small>2 hrs ago</small> </div> </div> <p class="text-sm mb-0">Lets meet at Starbucks at 11:30. Wdyt?</p> </div> </div> </a> <a href="#!" class="list-group-item list-group-item-action"> <div class="row align-items-center"> <div class="col-auto"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets/img/theme/team-2.jpg" class="avatar rounded-circle"> </div> <div class="col ml--2"> <div class="d-flex justify-content-between align-items-center"> <div> <h4 class="mb-0 text-sm">John Snow</h4> </div> <div class="text-right text-muted"> <small>3 hrs ago</small> </div> </div> <p class="text-sm mb-0">A new issue has been reported for Argon.</p> </div> </div> </a> <a href="#!" class="list-group-item list-group-item-action"> <div class="row align-items-center"> <div class="col-auto"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg" class="avatar rounded-circle"> </div> <div class="col ml--2"> <div class="d-flex justify-content-between align-items-center"> <div> <h4 class="mb-0 text-sm">John Snow</h4> </div> <div class="text-right text-muted"> <small>5 hrs ago</small> </div> </div> <p class="text-sm mb-0">Your posts have been liked a lot.</p> </div> </div> </a> <a href="#!" class="list-group-item list-group-item-action"> <div class="row align-items-center"> <div class="col-auto"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets/img/theme/team-4.jpg" class="avatar rounded-circle"> </div> <div class="col ml--2"> <div class="d-flex justify-content-between align-items-center"> <div> <h4 class="mb-0 text-sm">John Snow</h4> </div> <div class="text-right text-muted"> <small>2 hrs ago</small> </div> </div> <p class="text-sm mb-0">Lets meet at Starbucks at 11:30. Wdyt?</p> </div> </div> </a> <a href="#!" class="list-group-item list-group-item-action"> <div class="row align-items-center"> <div class="col-auto"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-5.jpg" class="avatar rounded-circle"> </div> <div class="col ml--2"> <div class="d-flex justify-content-between align-items-center"> <div> <h4 class="mb-0 text-sm">John Snow</h4> </div> <div class="text-right text-muted"> <small>3 hrs ago</small> </div> </div> <p class="text-sm mb-0">A new issue has been reported for Argon.</p> </div> </div> </a> </div> <a href="#!" class="dropdown-item text-center text-primary font-weight-bold py-3">View all</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-layer-group"></i> </a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-dark bg-default dropdown-menu-right "> <div class="row shortcuts px-4"> <a href="#!" class="col-4 shortcut-item text-center"> <span class="shortcut-media avatar rounded-circle bg-gradient-red"> <i class="fa fa-calendar"></i> </span> <small class="text-white">Calendar</small> </a> <a href="#!" class="col-4 shortcut-item text-center"> <span class="shortcut-media avatar rounded-circle bg-gradient-orange"> <i class="fa fa-envelope"></i> </span> <small class="text-white">Email</small> </a> <a href="#!" class="col-4 shortcut-item text-center"> <span class="shortcut-media avatar rounded-circle bg-gradient-info"> <i class="fa fa-credit-card"></i> </span> <small class="text-white">Payments</small> </a> <a href="#!" class="col-4 shortcut-item text-center"> <span class="shortcut-media avatar rounded-circle bg-gradient-green"> <i class="fa fa-book"></i> </span> <small class="text-white">Reports</small> </a> <a href="#!" class="col-4 shortcut-item text-center"> <span class="shortcut-media avatar rounded-circle bg-gradient-purple"> <i class="fa fa-map"></i> </span> <small class="text-white">Maps</small> </a> <a href="#!" class="col-4 shortcut-item text-center"> <span class="shortcut-media avatar rounded-circle bg-gradient-yellow"> <i class="fa fa-store"></i> </span> <small class="text-white">Shop</small> </a> </div> </div> </li> </ul> <ul class="navbar-nav align-items-center ml-auto ml-md-0 "> <li class="nav-item dropdown"> <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <div class="media align-items-center"> <span class="avatar avatar-sm rounded-circle"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg"> </span> <div class="media-body ml-2 d-none d-lg-block"> <span class="mb-0 text-sm font-weight-bold">John Snow</span> </div> </div> </a> <div class="dropdown-menu dropdown-menu-right "> <div class="dropdown-header noti-title"> <h6 class="text-overflow m-0">Welcome!</h6> </div> <a href="#!" class="dropdown-item"> <i class="fa fa-user"></i> <span>My profile</span> </a> <a href="#!" class="dropdown-item"> <i class="fa fa-tools"></i> <span>Settings</span> </a> <a href="#!" class="dropdown-item"> <i class="far fa-calendar"></i> <span>Activity</span> </a> <a href="#!" class="dropdown-item"> <i class="fa fa-phone"></i> <span>Support</span> </a> <div class="dropdown-divider"></div> <a href="#!" class="dropdown-item"> <i class="fa fa-sign-out-alt"></i> <span>Logout</span> </a> </div> </li> </ul> </div> </div>
<div class="container"> <a class="text-white" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar-primary"> <div class="navbar-collapse-header"> <div class="row"> <div class="col-6 collapse-brand"> <a href="javascript:void(0)"> <img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/brand/blue.png"> </a> </div> <div class="col-6 collapse-close"> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false" aria-label="Toggle navigation"> <span></span> <span></span> </button> </div> </div> </div> <ul class="navbar-nav ml-lg-auto"> <li class="nav-item"> <a class="nav-link" href="#">Discover <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Profile</a> </li> <li class="nav-item dropdown"> <a class="nav-link" href="#" id="navbar-primary_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-primary_dropdown_1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </div>