<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<html lang="en">
<head>
<title>Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,500i,700,800i" rel="stylesheet">
</head>
<body>
<!-- Nav Menu Starts -->
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Our Service
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">service2</a>
<a class="dropdown-item" href="#">service 2</a>
<a class="dropdown-item" href="#">service 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Call</a>
</li>
<!-- <li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
<a class="dropdown-item" href="#">Link 5</a>
<a class="dropdown-item" href="#">Link 6</a>
</div>
</li> -->
</ul>
<div class="social-part">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
</nav>
<!-- Nav Menu Ends -->
<div class="container bootstrap snippet">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<h2>
160 results found for: <span class="text-navy">"Bootdey"</span>
</h2>
<small>Request time (0.23 seconds)</small>
<div class="search-form">
<form action="#" method="get">
<div class="input-group">
<input type="text" placeholder="Bootdey" name="search" class="form-control input-lg">
<div class="input-group-btn">
<button class="btn btn-lg btn-primary" type="submit">
Search
</button>
</div>
</div>
</form>
</div>
<div class="hr-line-dashed"></div>
<div class="search-result">
<h3><a href="#">Bootdey</a></h3>
<a href="#" class="search-link">www.bootdey.com</a>
<p>
</p>
</div>
<div class="hr-line-dashed"></div>
<div class="search-result">
<h3><a href="#">Bootdey</a></h3>
<a href="#" class="search-link">https://bootdey.com/</a>
<p>
Bootdey is a gallery of free snippets resources templates and utilities for bootstrap css hmtl js framework. Codes for developers and web designers
</p>
</div>
<div class="hr-line-dashed"></div>
<div class="search-result">
<h3><a href="#">Bootdey | Facebook</a></h3>
<a href="#" class="search-link">https://www.facebook.com/bootdey</a>
<p>
Bootdey is a gallery of free snippets resources templates and utilities for bootstrap css hmtl js framework. Codes for developers and web designers
</p>
</div>
<div class="hr-line-dashed"></div>
<div class="search-result">
<h3><a href="#">Bootdey | Twitter</a></h3>
<a href="#" class="search-link">www.twitter.com/bootdey</a>
<p>
Bootdey is a gallery of free snippets resources templates and utilities for bootstrap css hmtl js framework. Codes for developers and web designers
</p>
</div>
<div class="hr-line-dashed"></div>
<div class="text-center">
<div class="btn-group">
<button class="btn btn-white" type="button"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button class="btn btn-white">1</button>
<button class="btn btn-white active">2</button>
<button class="btn btn-white">3</button>
<button class="btn btn-white">4</button>
<button class="btn btn-white">5</button>
<button class="btn btn-white">6</button>
<button class="btn btn-white">7</button>
<button class="btn btn-white" type="button"><i class="glyphicon glyphicon-chevron-right"></i> </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Nav Footer Starts -->
<footer class="section footer-classic context-dark bg-image" style="background: #2d3246;">
<div class="container">
<div class="row row-30">
<div class="col-md-4 col-xl-5">
<div class="pr-xl-4"><a class="brand" href="index.html"><img class="brand-logo-light" src="images/agency/logo-inverse-140x37.png" alt="" width="140" height="37" srcset="images/agency/logo-retina-inverse-280x74.png 2x"></a>
<p>We are an award-winning creative agency, dedicated to the best result in web design, promotion, business consulting, and marketing.</p>
<!-- Rights-->
<p class="rights"><span>© </span><span class="copyright-year">2018</span><span> </span><span>Waves</span><span>. </span><span>All Rights Reserved.</span></p>
</div>
</div>
<div class="col-md-4">
<h5>Contacts</h5>
<dl class="contact-list">
<dt>Address:</dt>
<dd>798 South Park Avenue, Jaipur, Raj</dd>
</dl>
<dl class="contact-list">
<dt>email:</dt>
<dd><a href="mailto:#">dkstudioin@gmail.com</a></dd>
</dl>
<dl class="contact-list">
<dt>phones:</dt>
<dd><a href="tel:#">+91 7568543012</a> <span>or</span> <a href="tel:#">+91 9571195353</a>
</dd>
</dl>
</div>
<div class="col-md-4 col-xl-3">
<h5>Links</h5>
<ul class="nav-list">
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</div>
</div>
</div>
<div class="row no-gutters social-container">
<div class="col"><a class="social-inner" href="#"><span class="icon mdi mdi-facebook"></span><span>Facebook</span></a></div>
<div class="col"><a class="social-inner" href="#"><span class="icon mdi mdi-instagram"></span><span>instagram</span></a></div>
<div class="col"><a class="social-inner" href="#"><span class="icon mdi mdi-twitter"></span><span>twitter</span></a></div>
<div class="col"><a class="social-inner" href="#"><span class="icon mdi mdi-youtube-play"></span><span>google</span></a></div>
</div>
</footer>
<!-- Nav Footer Ends -->
</body>
</html>
.ibox-content {
background-color: #FFFFFF;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #E7EAEC;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
}
.search-form {
margin-top: 10px;
}
.search-result h3 {
margin-bottom: 0;
color: #1E0FBE;
}
.search-result .search-link {
color: #006621;
}
.search-result p {
font-size: 12px;
margin-top: 5px;
}
.hr-line-dashed {
border-top: 1px dashed #E7EAEC;
color: #ffffff;
background-color: #ffffff;
height: 1px;
margin: 20px 0;
}
h2 {
font-size: 24px;
font-weight: 100;
}
.context-dark, .bg-gray-dark, .bg-primary {
color: rgba(255, 255, 255, 0.8);
}
.footer-classic a, .footer-classic a:focus, .footer-classic a:active {
color: #ffffff;
}
.nav-list li {
padding-top: 5px;
padding-bottom: 5px;
}
.nav-list li a:hover:before {
margin-left: 0;
opacity: 1;
visibility: visible;
}
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}
.social-inner {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 23px;
font: 900 13px/1 "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.social-container .col {
border: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-list li a:before {
content: "\f14f";
font: 400 21px/1 "Material Design Icons";
color: #4d6de6;
display: inline-block;
vertical-align: baseline;
margin-left: -28px;
margin-right: 7px;
opacity: 0;
visibility: hidden;
transition: .22s ease;
}
