Bskin Bootstrap 5 skin ui kit
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container">
<a class="navbar-brand fw-bold" href="#"><i class="fab fa-btc text-primary"></i>
SKIN
<span class="ps-1 text-primary">PRO</span> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#defaultnavbarSupportedContent" aria-controls="defaultnavbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="defaultnavbarSupportedContent">
<ul class="navbar-nav ms-auto">
<!--list Components Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Components </a>
<div class="dropdown-menu animate slideIn">
<div class="row no-gutters py-3">
<div class="col-lg-4">
<a class="dropdown-item" href="#">Alerts</a>
<a class="dropdown-item" href="#"> Badge</a>
<a class="dropdown-item" href="#">Breadcrumb</a>
<a class="dropdown-item" href="#">Buttons <span class="badge rounded-pill bg-warning pulse fs-11 ms-2">New</span></a>
<a class="dropdown-item" href="#">Button group</a>
<a class="dropdown-item" href="#"> Card </a>
<a class="dropdown-item" href="#"> Carousel </a>
</div>
<div class="col-lg-4">
<a class="dropdown-item" href="#"> Collapse </a>
<a class="dropdown-item" href="#"> Dropdowns <span class="badge bg-primary rounded-pill fs-11 pulse ms-2">Hot</span></a>
<a class="dropdown-item" href="#"> Forms </a>
<a class="dropdown-item" href="#">Jumbotron</a>
<a class="dropdown-item" href="#"> List group</a>
<a class="dropdown-item" href="#"> Media object</a>
<a class="dropdown-item" href="#">Modal</a>
</div>
<div class="col-lg-4">
<a class="dropdown-item" href="#"> Navigations</a>
<a class="dropdown-item" href="#"> Pagination</a>
<a class="dropdown-item" href="#">Popovers</a>
<a class="dropdown-item" href="#">Progress</a>
<a class="dropdown-item" href="#">Scrollspy</a>
<a class="dropdown-item" href="#">Spinners <span class="badge bg-primary rounded-pill fs-11 pulse ms-2">Hot</span></a>
<a class="dropdown-item" href="#">Tooltips</a>
</div>
</div>
</div>
</li>
<!--list Components End-->
<!--list Section Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Section</a>
<div class="dropdown-menu animate slideIn">
<div class="row no-gutters">
<div class="col-lg-4 py-3">
<a class="dropdown-item" href="#">Table</a>
<a class="dropdown-item" href="#">Form</a>
<a class="dropdown-item" href="#"> creative Button</a>
<a class="dropdown-item" href="#">Services Price</a>
</div>
<div class="col-lg-4 py-3">
<a class="dropdown-item" href="#">Photo Gellary</a>
<a class="dropdown-item" href="#">Services </a>
<a class="dropdown-item" href="#">Account</a>
<a class="dropdown-item" href="#">Contact Us</a>
</div>
<div class="col-lg-4">
<img src="images/card-3.jpg" class="img-fluid" alt="card" title="card">
</div>
</div>
</div>
</li>
<!--list Section End-->
<!--list Home Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Home
</a>
<div class="dropdown-menu dropdown-menu-sm animate slideIn">
<a class="dropdown-item" href="#">Home v 1.1</a>
<a class="dropdown-item" href="#">Home v 1.2</a>
<a class="dropdown-item" href="#">Home v 1.3</a>
</div>
</li>
<!--list Home End-->
<!--list Page Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
</a>
<div class="dropdown-menu dropdown-menu-sm animate slideIn">
<a class="dropdown-item" href="#">About Page</a>
<a class="dropdown-item" href="#">Contact Page</a>
<a class="dropdown-item" href="#">Service Page</a>
<a class="dropdown-item" href="#">Price Page</a>
<a class="dropdown-item" href="#">Sign In</a>
<a class="dropdown-item" href="#">Sign Up</a>
<a class="dropdown-item" href="#">404 Page</a>
</div>
</li>
<!--list Page End-->
<!--list Documentation Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Documentation</a>
<div class="dropdown-menu dropdown-menu-sm animate slideIn">
<a class="dropdown-item" href="#">
Documentation
<small class="fst-italic">Customizing and building</small>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
Supports <br>
<small class="fst-italic">Fast response</small>
</a>
</div>
</li>
<!--list Documentation End-->
</ul>
<form class="d-flex" role="search">
<a href="#" class="btn btn-primary btn-sm ms-5 d-none d-sm-block">Contact us</a>
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-sm navbar-light bg-white justify-content-center">
<div class="container">
<a class="navbar-brand fw-bold" href="#"><i class="fab fa-btc text-primary"></i>
SKIN
<span class="ps-1 text-primary">PRO</span> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#centerednavbarSupportedContent" aria-controls="centerednavbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="centerednavbarSupportedContent">
<ul class="navbar-nav ms-auto">
<!--list Components Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Components </a>
<div class="dropdown-menu animate slideIn">
<div class="row no-gutters py-3">
<div class="col-lg-4">
<a class="dropdown-item" href="#">Alerts</a>
<a class="dropdown-item" href="#"> Badge</a>
<a class="dropdown-item" href="#">Breadcrumb</a>
<a class="dropdown-item" href="#">Buttons <span class="badge rounded-pill bg-warning pulse fs-11 ms-2">New</span></a>
<a class="dropdown-item" href="#">Button group</a>
<a class="dropdown-item" href="#"> Card </a>
<a class="dropdown-item" href="#"> Carousel </a>
</div>
<div class="col-lg-4">
<a class="dropdown-item" href="#"> Collapse </a>
<a class="dropdown-item" href="#"> Dropdowns <span class="badge bg-primary rounded-pill fs-11 pulse ms-2">Hot</span></a>
<a class="dropdown-item" href="#"> Forms </a>
<a class="dropdown-item" href="#">Jumbotron</a>
<a class="dropdown-item" href="#"> List group</a>
<a class="dropdown-item" href="#"> Media object</a>
<a class="dropdown-item" href="#">Modal</a>
</div>
<div class="col-lg-4">
<a class="dropdown-item" href="#"> Navigations</a>
<a class="dropdown-item" href="#"> Pagination</a>
<a class="dropdown-item" href="#">Popovers</a>
<a class="dropdown-item" href="#">Progress</a>
<a class="dropdown-item" href="#">Scrollspy</a>
<a class="dropdown-item" href="#">Spinners <span class="badge bg-primary rounded-pill fs-11 pulse ms-2">Hot</span></a>
<a class="dropdown-item" href="#">Tooltips</a>
</div>
</div>
</div>
</li>
<!--list Components End-->
<!--list Section Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Section</a>
<div class="dropdown-menu animate slideIn">
<div class="row no-gutters">
<div class="col-lg-4 py-3">
<a class="dropdown-item" href="#">Table</a>
<a class="dropdown-item" href="#">Form</a>
<a class="dropdown-item" href="#"> creative Button</a>
<a class="dropdown-item" href="#">Services Price</a>
</div>
<div class="col-lg-4 py-3">
<a class="dropdown-item" href="#">Photo Gellary</a>
<a class="dropdown-item" href="#">Services </a>
<a class="dropdown-item" href="#">Account</a>
<a class="dropdown-item" href="#">Contact Us</a>
</div>
<div class="col-lg-4">
<img src="images/card-3.jpg" class="img-fluid" alt="card" title="card">
</div>
</div>
</div>
</li>
<!--list Section End-->
<!--list Home Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Home
</a>
<div class="dropdown-menu dropdown-menu-sm animate slideIn">
<a class="dropdown-item" href="#">Home v 1.1</a>
<a class="dropdown-item" href="#">Home v 1.2</a>
<a class="dropdown-item" href="#">Home v 1.3</a>
</div>
</li>
<!--list Home End-->
<!--list Page Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
</a>
<div class="dropdown-menu dropdown-menu-sm animate slideIn">
<a class="dropdown-item" href="#">About Page</a>
<a class="dropdown-item" href="#">Contact Page</a>
<a class="dropdown-item" href="#">Service Page</a>
<a class="dropdown-item" href="#">Price Page</a>
<a class="dropdown-item" href="#">Sign In</a>
<a class="dropdown-item" href="#">Sign Up</a>
<a class="dropdown-item" href="#">404 Page</a>
</div>
</li>
<!--list Page End-->
<!--list Documentation Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Documentation</a>
<div class="dropdown-menu dropdown-menu-sm animate slideIn">
<a class="dropdown-item" href="#">
Documentation <br>
<small class="fst-italic">Customizing and building</small>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
Supports <br>
<small class="fst-italic">Fast response</small>
</a>
</div>
</li>
<!--list Documentation End-->
</ul>
<form class="d-flex" role="search">
<a href="#" class="btn btn-primary btn-sm ms-5 d-none d-sm-block">Contact us</a>
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
<div class="container">
<a class="navbar-brand fw-bold" href="#"><i class="fab fa-btc text-primary"></i>
SKIN
<span class="ps-1 text-primary">PRO</span> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#colornavbarSupportedContent" aria-controls="colornavbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="colornavbarSupportedContent">
<ul class="navbar-nav ms-auto">
<!--list Components Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Components </a>
<div class="dropdown-menu animate slideIn">
<div class="row no-gutters py-3">
<div class="col-lg-4">
<a class="dropdown-item" href="#">Alerts</a>
<a class="dropdown-item" href="#"> Badge</a>
<a class="dropdown-item" href="#">Breadcrumb</a>
<a class="dropdown-item" href="#">Buttons <span class="badge rounded-pill bg-warning pulse fs-11 ms-2">New</span></a>
<a class="dropdown-item" href="#">Button group</a>
<a class="dropdown-item" href="#"> Card </a>
<a class="dropdown-item" href="#"> Carousel </a>
</div>
<div class="col-lg-4">
<a class="dropdown-item" href="#"> Collapse </a>
<a class="dropdown-item" href="#"> Dropdowns <span class="badge bg-primary rounded-pill fs-11 pulse ms-2">Hot</span></a>
<a class="dropdown-item" href="#"> Forms </a>
<a class="dropdown-item" href="#">Jumbotron</a>
<a class="dropdown-item" href="#"> List group</a>
<a class="dropdown-item" href="#"> Media object</a>
<a class="dropdown-item" href="#">Modal</a>
</div>
<div class="col-lg-4">
<a class="dropdown-item" href="#"> Navigations</a>
<a class="dropdown-item" href="#"> Pagination</a>
<a class="dropdown-item" href="#">Popovers</a>
<a class="dropdown-item" href="#">Progress</a>
<a class="dropdown-item" href="#">Scrollspy</a>
<a class="dropdown-item" href="#">Spinners <span class="badge bg-primary rounded-pill fs-11 pulse ms-2">Hot</span></a>
<a class="dropdown-item" href="#">Tooltips</a>
</div>
</div>
</div>
</li>
<!--list Components End-->
<!--list Section Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Section</a>
<div class="dropdown-menu animate slideIn">
<div class="row no-gutters">
<div class="col-lg-4 py-3">
<a class="dropdown-item" href="#">Table</a>
<a class="dropdown-item" href="#">Form</a>
<a class="dropdown-item" href="#"> creative Button</a>
<a class="dropdown-item" href="#">Services Price</a>
</div>
<div class="col-lg-4 py-3">
<a class="dropdown-item" href="#">Photo Gellary</a>
<a class="dropdown-item" href="#">Services </a>
<a class="dropdown-item" href="#">Account</a>
<a class="dropdown-item" href="#">Contact Us</a>
</div>
<div class="col-lg-4">
<img src="images/card-3.jpg" class="img-fluid" alt="card" title="card">
</div>
</div>
</div>
</li>
<!--list Section End-->
<!--list Home Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Home
</a>
<div class="dropdown-menu dropdown-menu-sm animate slideIn">
<a class="dropdown-item" href="#">Home v 1.1</a>
<a class="dropdown-item" href="#">Home v 1.2</a>
<a class="dropdown-item" href="#">Home v 1.3</a>
</div>
</li>
<!--list Home End-->
<!--list Page Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
</a>
<div class="dropdown-menu dropdown-menu-sm animate slideIn">
<a class="dropdown-item" href="#">About Page</a>
<a class="dropdown-item" href="#">Contact Page</a>
<a class="dropdown-item" href="#">Service Page</a>
<a class="dropdown-item" href="#">Price Page</a>
<a class="dropdown-item" href="#">Sign In</a>
<a class="dropdown-item" href="#">Sign Up</a>
<a class="dropdown-item" href="#">404 Page</a>
</div>
</li>
<!--list Page End-->
<!--list Documentation Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Documentation</a>
<div class="dropdown-menu dropdown-menu-sm animate slideIn">
<a class="dropdown-item" href="#">
Documentation <br>
<small class="fst-italic">Customizing and building</small>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
Supports <br>
<small class="fst-italic">Fast response</small>
</a>
</div>
</li>
<!--list Documentation End-->
</ul>
<form class="d-flex" role="search">
<a href="#" class="btn btn-primary btn-sm ms-5 d-none d-sm-block">Contact us</a>
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-info">
<div class="container">
<a class="navbar-brand fw-bold" href="#"><i class="fab fa-btc text-primary"></i>
SKIN
<span class="ps-1 text-primary">PRO</span> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#pronavbarSupportedContent" aria-controls="pronavbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="pronavbarSupportedContent">
<ul class="navbar-nav ms-auto">
<!--list Components Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Components </a>
<div class="dropdown-menu animate slideIn">
<div class="row no-gutters py-3">
<div class="col-lg-4">
<a class="dropdown-item" href="#">Alerts</a>
<a class="dropdown-item" href="#"> Badge</a>
<a class="dropdown-item" href="#">Breadcrumb</a>
<a class="dropdown-item" href="#">Buttons <span class="badge rounded-pill bg-warning pulse fs-11 ms-2">New</span></a>
<a class="dropdown-item" href="#">Button group</a>
<a class="dropdown-item" href="#"> Card </a>
<a class="dropdown-item" href="#"> Carousel </a>
</div>
<div class="col-lg-4">
<a class="dropdown-item" href="#"> Collapse </a>
<a class="dropdown-item" href="#"> Dropdowns <span class="badge bg-primary rounded-pill fs-11 pulse ms-2">Hot</span></a>
<a class="dropdown-item" href="#"> Forms </a>
<a class="dropdown-item" href="#">Jumbotron</a>
<a class="dropdown-item" href="#"> List group</a>
<a class="dropdown-item" href="#"> Media object</a>
<a class="dropdown-item" href="#">Modal</a>
</div>
<div class="col-lg-4">
<a class="dropdown-item" href="#"> Navigations</a>
<a class="dropdown-item" href="#"> Pagination</a>
<a class="dropdown-item" href="#">Popovers</a>
<a class="dropdown-item" href="#">Progress</a>
<a class="dropdown-item" href="#">Scrollspy</a>
<a class="dropdown-item" href="#">Spinners <span class="badge bg-primary rounded-pill fs-11 pulse ms-2">Hot</span></a>
<a class="dropdown-item" href="#">Tooltips</a>
</div>
</div>
</div>
</li>
<!--list Components End-->
<!--list Section Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Section</a>
<div class="dropdown-menu animate slideIn">
<div class="row no-gutters">
<div class="col-lg-4 py-3">
<a class="dropdown-item" href="#">Table</a>
<a class="dropdown-item" href="#">Form</a>
<a class="dropdown-item" href="#"> creative Button</a>
<a class="dropdown-item" href="#">Services Price</a>
</div>
<div class="col-lg-4 py-3">
<a class="dropdown-item" href="#">Photo Gellary</a>
<a class="dropdown-item" href="#">Services </a>
<a class="dropdown-item" href="#">Account</a>
<a class="dropdown-item" href="#">Contact Us</a>
</div>
<div class="col-lg-4">
<img src="images/card-3.jpg" class="img-fluid" alt="card" title="card">
</div>
</div>
</div>
</li>
<!--list Section End-->
<!--list Home Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Home
</a>
<div class="dropdown-menu dropdown-menu-sm animate slideIn">
<a class="dropdown-item" href="#">Home v 1.1</a>
<a class="dropdown-item" href="#">Home v 1.2</a>
<a class="dropdown-item" href="#">Home v 1.3</a>
</div>
</li>
<!--list Home End-->
<!--list Page Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
</a>
<div class="dropdown-menu dropdown-menu-sm animate slideIn">
<a class="dropdown-item" href="#">About Page</a>
<a class="dropdown-item" href="#">Contact Page</a>
<a class="dropdown-item" href="#">Service Page</a>
<a class="dropdown-item" href="#">Price Page</a>
<a class="dropdown-item" href="#">Sign In</a>
<a class="dropdown-item" href="#">Sign Up</a>
<a class="dropdown-item" href="#">404 Page</a>
</div>
</li>
<!--list Page End-->
<!--list Documentation Begin-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Documentation</a>
<div class="dropdown-menu dropdown-menu-sm animate slideIn">
<a class="dropdown-item" href="#">
Documentation <br>
<small class="fst-italic">Customizing and building</small>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
Supports <br>
<small class="fst-italic">Fast response</small>
</a>
</div>
</li>
<!--list Documentation End-->
</ul>
<form class="d-flex" role="search">
<a href="#" class="btn btn-primary btn-sm ms-5 d-none d-sm-block">Contact us</a>
</form>
</div>
</div>
</nav>
© Copyright-2022 DesignCollection.in. All rights reserved.