5+ Bootstrap Header Examples

This post contains a total of 5+ Bootstrap Header Examples with Source Code. All these Website Headers are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Bootstrap Header Examples

1. By Sunil Kumar

Made by Sunil Kumar. Responsive Bootstrap Header. Source

Bootstrap Header by Sunil Kumar
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
body{
  background-color:#dde8f1;
}
header {
    transition: all 0.3s ease-in-out;
    box-shadow: 0 1px 6px 0 rgba(214, 220, 239, 1);
    top: 0px;
    background-color: #fff;
    position: sticky;
    z-index: 40;
    height: auto;
}
.logo {
    padding: 26px 0px;
}
.logo a {
    color: #3a76cb;
    text-transform: capitalize;
    color: #000000;
    font-size: 35px;
    font-weight: 500;
    text-decoration: none;
}
.mob-menu {
    display: none;
}
.main-menu {
    margin: 20px 0px;
    float: right;
}
.main-menu ul.nav {
    float: left;
    margin-right: 20px;
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0px;
    padding-top:10px;
}
.nav li:first-child {
    margin-left: 0px;
}
.main-menu ul {  display: inline-block; }
.main-menu ul li {
    position: relative;
    display: inline-block;
    margin: 12px 20px;
}
.main-menu ul li a {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: #3a76cb;
    display: block;
   text-decoration:none;
}
.main-menu ul.right-nav{   
 padding-left:0px;
}
.main-menu ul.right-nav li a {
    width: 150px;
    height: 45px;
    border-radius: 4px;
    background-color: #fff;
    text-align: center;
    color: #3a76cb;
    border: solid 1px #3a76cb;
    vertical-align: middle;
    display: table-cell;
}
.main-menu ul.right-nav li:last-child {
    margin-right: 0px;
}
.main-menu ul.right-nav li.active a {
    background-color: #3a76cb;
    color: #fff;
}
@media(max-width:1000px){
  .logo {
    display: inline-block;
    width: 78%;
    padding: 10px 10px 10px 0px;
}
.mob-menu {
    display: inline-block;
    width: 20%;
}
.mob-menu span {
    border: solid 2px #3a76cb;
    display: block;
    text-align: center;
    border-radius: 4px;
    padding: 2px 6px;
    width: 50px;
    color: #3a76cb;
    font-size: 25px;
    cursor: pointer;
} 
.main-menu {
    margin: 0px 0px 20px 0px;
    float: left;
    background-color: #f1f1f1;
    width: 100%;
    display: none;
} 
.main-menu ul {
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0px;
    width: 100%;
}
  .main-menu ul.right-nav {
    text-align: center;
    margin-top: 6px;
}
ul.right-nav {
    margin-bottom: 10px;
}
.main-menu {
    margin: 0px 0px 20px 0px;
    float: left;
    background-color: #f1f1f1;
    width: 100%;
    display: none;
}
.main-menu ul li {
    display: block;
    width: 100%;
    margin: 0px;
}
 .nav li:first-child {
    margin-left: 0px;
}
.main-menu ul li a {
    padding: 10px 15px;
    display: block;
    border-bottom: solid 1px #e2e4e6;
    text-align: center;
}
 .main-menu ul.right-nav li {
    margin-left: 0px;
    margin-right: 30px;
    display: inline-block;
    width: 150px;
}
 .main-menu ul.right-nav li a {
    font-size: 18px !important;
}
}
</style>
</head>
<body>
  <header>
         <div class="container">
            <div class="row">
               <div class="col-md-12 col-sm-12 col-lg-12 col-xl-3">
                  <div class="logo">
                     <a href="/" title="logo"> w3learn Point </a>
                  </div>
                  <div class="mob-menu">
                     <span>
                        <i class="fa fa-bars"></i>
                     </span>
                  </div>
               </div>
               <div class="col-md-12 col-sm-12 col-lg-12 col-xl-9">
                  <div class="main-menu">
                     <ul class="nav">
                        <li><a href="/"> Home </a> </li>
                        <li><a href="#"> Process </a> </li>
                        <li><a href="#"> Blog </a> </li>
                       <li><a href="#"> Contact Us </a> </li>
                        </ul>
                     <ul class="right-nav">
                         <li><a href="#"> <i class="fa fa-user"></i> Log in </a> </li>
                       <li class="active"> <a href="#"> <i class="fa fa-sign-in"></i> Sign up </a> </li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </header>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  $(".mob-menu span").click(function () {
    $(".main-menu").slideToggle();
  });
});
    </script>
</body>
</html>

2. By Trwp

Made by Trwp. Bootstrap Header with Login Form and Search Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Varela+Round">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<style>
body {
	font-family: 'Varela Round', sans-serif;
}
.form-control {
	box-shadow: none;		
	font-weight: normal;
	font-size: 13px;
}
.navbar {
	background: #fff;
	padding-left: 16px;
	padding-right: 16px;
	border-bottom: 1px solid #dfe3e8;
	border-radius: 0;
}
.nav-link img {
	border-radius: 50%;
	width: 36px;
	height: 36px;
	margin: -8px 0;
	float: left;
	margin-right: 10px;
}
.navbar .navbar-brand {
	padding-left: 0;
	font-size: 20px;
	padding-right: 50px;
}
.navbar .navbar-brand b {
	color: #33cabb;		
}
.navbar .form-inline {
	display: inline-block;
}
.navbar a {
	color: #888;
	font-size: 15px;
}
.search-box {
	position: relative;
}	
.search-box input {
	padding-right: 35px;
	border-color: #dfe3e8;
	border-radius: 4px !important;
	box-shadow: none
}
.search-box .input-group-text {
	min-width: 35px;
	border: none;
	background: transparent;
	position: absolute;
	right: 0;
	z-index: 9;
	padding: 7px;
	height: 100%;
}
.search-box i {
	color: #a0a5b1;
	font-size: 19px;
}
.navbar .sign-up-btn {
	min-width: 110px;
	max-height: 36px;
}
.navbar .dropdown-menu {
	color: #999;
	font-weight: normal;
	border-radius: 1px;
	border-color: #e5e5e5;
	box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.navbar a, .navbar a:active {
	color: #888;
	padding: 8px 20px;
	background: transparent;
	line-height: normal;
}
.navbar .navbar-form {
	border: none;
}
.navbar .action-form {
	width: 280px;
	padding: 20px;
	left: auto;
	right: 0;
	font-size: 14px;
}
.navbar .action-form a {		
	color: #33cabb;
	padding: 0 !important;
	font-size: 14px;
}
.navbar .action-form .hint-text {
    text-align: center;
    margin-bottom: 15px;
    font-size: 13px;
}
.navbar .btn-primary, .navbar .btn-primary:active {
	color: #fff;
	background: #33cabb !important;
	border: none;
}	
.navbar .btn-primary:hover, .navbar .btn-primary:focus {		
	color: #fff;
	background: #31bfb1 !important;
}
.navbar .social-btn .btn, .navbar .social-btn .btn:hover {
	color: #fff;
	margin: 0;
	padding: 0 !important;
	font-size: 13px;
	border: none;
	transition: all 0.4s;
	text-align: center;
	line-height: 34px;
	width: 47%;
	text-decoration: none;
}
.navbar .social-btn .facebook-btn {
	background: #507cc0;
}
.navbar .social-btn .facebook-btn:hover {
	background: #4676bd;
}
.navbar .social-btn .twitter-btn {
	background: #64ccf1;
}
.navbar .social-btn .twitter-btn:hover {
	background: #4ec7ef;
}
.navbar .social-btn .btn i {
	margin-right: 5px;
	font-size: 16px;
	position: relative;
	top: 2px;
}
.or-seperator {
	margin-top: 32px;
	text-align: center;
	border-top: 1px solid #e0e0e0;
}
.or-seperator b {
	color: #666;
	padding: 0 8px;
	width: 30px;
	height: 30px;
	font-size: 13px;
	text-align: center;
	line-height: 26px;
	background: #fff;
	display: inline-block;
	border: 1px solid #e0e0e0;
	border-radius: 50%;
	position: relative;
	top: -15px;
	z-index: 1;
}
.navbar .action-buttons .dropdown-toggle::after {
	display: none;
}
.form-check-label input {
	position: relative;
	top: 1px;
}
@media (min-width: 1200px){
	.form-inline .input-group {
		width: 300px;
		margin-left: 30px;
	}
}
@media (max-width: 768px){
	.navbar .dropdown-menu.action-form {
		width: 100%;
		padding: 10px 15px;
		background: transparent;
		border: none;
	}
	.navbar .form-inline {
		display: block;
	}
	.navbar .input-group {
		width: 100%;
	}
}
</style>
</head> 
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<a href="#" class="navbar-brand">Brand<b>Name</b></a>  		
	<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
		<span class="navbar-toggler-icon"></span>
	</button>
	<!-- Collection of nav links, forms, and other content for toggling -->
	<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
		<div class="navbar-nav">
			<a href="#" class="nav-item nav-link">Home</a>
			<a href="#" class="nav-item nav-link">About</a>			
			<div class="nav-item dropdown">
				<a href="#" data-toggle="dropdown" class="nav-item nav-link dropdown-toggle">Services</a>
				<div class="dropdown-menu">					
					<a href="#" class="dropdown-item">Web Design</a>
					<a href="#" class="dropdown-item">Web Development</a>
					<a href="#" class="dropdown-item">Graphic Design</a>
					<a href="#" class="dropdown-item">Digital Marketing</a>
                </div>
            </div>
			<a href="#" class="nav-item nav-link active">Pricing</a>
			<a href="#" class="nav-item nav-link">Blog</a>
			<a href="#" class="nav-item nav-link">Contact</a>
		</div>
		<form class="navbar-form form-inline">
			<div class="input-group search-box">								
				<input type="text" id="search" class="form-control" placeholder="Search here...">
				<div class="input-group-append">
					<span class="input-group-text">
						<i class="material-icons">&#xE8B6;</i>
					</span>
				</div>
			</div>
		</form>
		<div class="navbar-nav ml-auto action-buttons">
			<div class="nav-item dropdown">
				<a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle mr-4">Login</a>
                <div class="dropdown-menu action-form">
					<form action="#" method="post">
						<p class="hint-text">Sign in with your social media account</p>
						<div class="form-group social-btn clearfix">
							<a href="#" class="btn btn-secondary facebook-btn float-left"><i class="fa fa-facebook"></i> Facebook</a>
							<a href="#" class="btn btn-secondary twitter-btn float-right"><i class="fa fa-twitter"></i> Twitter</a>
						</div>
						<div class="or-seperator"><b>or</b></div>
						<div class="form-group">
							<input type="text" class="form-control" placeholder="Username" required="required">
						</div>
						<div class="form-group">
							<input type="password" class="form-control" placeholder="Password" required="required">
						</div>
						<input type="submit" class="btn btn-primary btn-block" value="Login">
						<div class="text-center mt-2">
							<a href="#">Forgot Your password?</a>
						</div>
					</form>
                </div>
			</div>
			<div class="nav-item dropdown">
				<a href="#" data-toggle="dropdown" class="btn btn-primary dropdown-toggle sign-up-btn">Sign up</a>
                <div class="dropdown-menu action-form">
					<form action="#" method="post">
						<p class="hint-text">Fill in this form to create your account!</p>
						<div class="form-group">
							<input type="text" class="form-control" placeholder="Username" required="required">
						</div>
						<div class="form-group">
							<input type="password" class="form-control" placeholder="Password" required="required">
						</div>
						<div class="form-group">
							<input type="password" class="form-control" placeholder="Confirm Password" required="required">
						</div>
						<div class="form-group">
							<label class="form-check-label"><input type="checkbox" required="required"> I accept the <a href="#">Terms &amp; Conditions</a></label>
						</div>
						<input type="submit" class="btn btn-primary btn-block" value="Sign up">
					</form>
				</div>
			</div>
        </div>
	</div>
</nav>
</body>
</html>

3. By Casper

Made by Casper. Bootstrap Video Header. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
  
<style>
header {
	position: relative;
	background-color: black;
	height: 75vh;
	min-height: 25rem;
	width: 100%;
	overflow: hidden;
}

header video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: 0;
	-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

header .container {
	position: relative;
	z-index: 2;
}

header .overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: black;
	opacity: 0.5;
	z-index: 1;
}

@media (pointer: coarse) and (hover: none) {
	header {
		background: url("https://source.unsplash.com/XT5OInaElMw/1600x900") black
			no-repeat center center scroll;
	}
	header video {
		display: none;
	}
}
</style>
</head>
<body>
  <header>
	<div class="overlay"></div>
	<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
		<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
	</video>
	<div class="container h-100">
		<div class="d-flex h-100 text-center align-items-center">
			<div class="w-100 text-white">
				<h1 class="display-3">Video Header</h1>
				<p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
			</div>
		</div>
	</div>
</header>

<section class="my-5">
	<div class="container">
		<div class="row">
			<div class="col-md-8 mx-auto">
				<p>
                Text
				</p>
			</div>
		</div>
	</div>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js'></script>
</body>
</html>

4. By Alex Wright

Made by Alex Wright. Dual Header with Logo. Source

Bootstrap Header by Alex Wright
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css'>
<style>
#top-nav-wrapper {
  background-color: #252525 !important;
}
#main-nav-wrapper {
  background: #353535 !important;
}
</style>
</head>
<body>
  <header>
    <nav class="navbar navbar-expand navbar-dark bg-dark" id="top-nav-wrapper">
      <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-nav" aria-controls="top-nav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="top-nav">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">000000000</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Email</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="main-nav-wrapper">
      <div class="container">
        <a class="navbar-brand" href="#"><img src="https://www.avitekrecruit.com/wp-content/uploads/avitek-logo.png" alt="Avitek Recruit"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="main-nav">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">About Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">For Employees</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">For Employers</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="#">Jobs <span class="sr-only">(current)</span></a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js'></script>
</body>
</html>

5. By Girraj Choudhary

Made by Girraj Choudhary. Bootstrap Header with Dropdown menu. Source

Bootstrap Header by Girraj Choudhary
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
* {
  outline: none;
}
a:hover,
a:focus {
  text-decoration: none;
}
html body .m-l-5 {
  margin-left: 5px;
}
.dropdown-item {
  padding: 8px 1rem;
  color: #8d97ad;
}
.btn {
  color: #ffffff;
  padding: 10px 25px;
  cursor: pointer;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
}
.btn:hover {
  color: #ffffff;
}
.btn:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-outline-success,
a.btn-outline-success {
  color: #2cdd9b;
  background-color: transparent;
  border-color: #2cdd9b;
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}
.btn-outline-success:hover,
.btn-outline-success:focus,
a.btn-outline-success:hover,
a.btn-outline-success:focus {
  background: #2cdd9b;
  border-color: #2cdd9b;
  color: #ffffff;
}
.btn-outline-success:active,
.btn-outline-success:focus,
a.btn-outline-success:active,
a.btn-outline-success:focus {
  background: #1dc8cc;
}
.topbar {
  padding: 0px;
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
  width: 100%;
  z-index: 20;
}
.po-relative {
  position: relative;
}
.navbar-nav .dropdown-toggle::after {
  display: none;
}
.navbar-nav .dropdown-menu.b-none {
  border: 0px;
  -webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
  box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
.navbar-nav {
  font-weight: 400;
}
.navbar-nav .dropdown-menu.b-none {
  border: 0px;
  -webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
  box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
.dropdown-item:active {
  background-color: #316ce8;
}
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu .dropdown-item > .ml-auto {
  position: absolute;
  right: 15px;
  top: 10px;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 0;
  border-radius: 0.25rem;
  display: none;
}
.dropdown-submenu > .dropdown-menu.menu-right {
  left: auto;
  right: 100%;
}
.dropdown-menu .divider {
  background-color: rgba(120, 130, 140, 0.13);
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
}
.animated {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}
.header1 {
  background-color: #f1f1f1;
}
.header1 .h1-nav {
  padding: 15px 0;
}
.header1 .h1-nav .navbar-nav .nav-item {
  margin: 0 20px;
}
.header1 .h1-nav .navbar-nav .nav-item .nav-link {
  padding: 12px 0px;
  color: #8d97ad;
  font-weight: 400;
}
.header1 .h1-nav .navbar-nav .nav-item .nav-link:hover {
  color: #2cdd9b;
}
.header1 .h1-nav .navbar-nav .nav-item:last-child {
  margin-right: 0px;
}
@media (min-width: 1024px) {
  .navbar-nav > .dropdown .dropdown-menu {
    min-width: 210px;
    margin-top: 0px;
  }
  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }
}
@media (max-width: 1023px) {
  .topbar {
    background: #316ce8;
    position: relative;
  }
}
</style>
</head>
<body>
   <div class="topbar">
            <div class="header header1 po-relative">
              <div class="container">
                <nav class="navbar navbar-expand-lg h1-nav">
                  <a class="navbar-brand" href="#">
                    <img  style="width:100px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" alt="header">
                  </a>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header1" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="ti-menu"></span>
                  </button>
                  <div class="collapse navbar-collapse" id="header1">
                    <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
                      <li class="nav-item active">
                        <a class="nav-link" href="#">Home</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">About Me</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">Work</a>
                      </li>
                      <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="h1-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Services
                          <i class="fa fa-angle-down m-l-5"></i>
                        </a>
                        <ul class="b-none dropdown-menu animated fadeInUp">
                          <li>
                            <a class="dropdown-item" href="#">Action</a>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#">Another action</a>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#">Something else here</a>
                          </li>
                          <li class="divider" role="separator"></li>
                          <li class="dropdown-submenu">
                            <a class="dropdown-toggle dropdown-item" data-toggle="dropdown" href="#">Dropdown
                              <i class="fa fa-angle-right ml-auto"></i>
                            </a>
                            <ul class="dropdown-menu b-none menu-right">
                              <li>
                                <a class="dropdown-item" href="#">Action</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="#">Another action</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="#">Something else here</a>
                              </li>
                              <li class="divider" role="separator"></li>
                              <li>
                                <a class="dropdown-item" href="#">Separated link</a>
                              </li>
                              <li class="divider" role="separator"></li>
                              <li>
                                <a class="dropdown-item" href="#">One more separated link</a>
                              </li>
                            </ul>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#">Separated link</a>
                          </li>
                          <li class="divider" role="separator"></li>
                          <li>
                            <a class="dropdown-item" href="#">One more separated link</a>
                          </li>
                        </ul>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">Freebies</a>
                      </li>
                      <li class="nav-item">
                        <a class="btn btn-outline-success" href="#">Hire Me</a>
                      </li>
                    </ul>
                  </div>
                </nav>
              </div>
            </div>
            </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'></script>
</body>
</html>

6. By leon rainbow

Made by leon rainbow. Bootstrap Header with Left Logo. Source

Bootstrap Header by leon rainbow
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
<style>
.header-wrapper{

background: #f5f5f5; 
width: 100%; }
div.site-description div.row div.col-sm-4 div.pull-right div#simple-social-icons-3.widget.simple-social-icons{ margin-top: 5px;}

@media (min-width: 768px) {
.navbar-left {
    float: left !important;
}
.navbar-right {
    float: right !important;
    margin-right: -15px;
}
.navbar-right ~ .navbar-right {
    margin-right: 0;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    background-color: #00AAD4;
    background-image: linear-gradient(to bottom, #00AAD4 0px, #00AAD4 100%);
    background-repeat: repeat-x;
}
}
.navbar-default {
    background-color: transparent;
    border-color: transparent;
}
.navbar-default .navbar-brand {color: #00AAD4;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    background-color: transparent;
    color: #5e5e5e;
}
.navbar-default .navbar-text {color: #00AAD4;
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    background-color: transparent;
    color: #333;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    background-color: #00AAD4;
    color: #fff;
}
.navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:focus, .navbar-default .navbar-nav > .disabled > a:hover {
    background-color: transparent;
    color: #ccc;
}
.navbar-default .navbar-toggle {
    border-color: #00AAD4;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #ddd;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #00AAD4;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
          border-color: transparent;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
      border-color: transparent;
    color: #555;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {color: #00AAD4;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
    background-color: transparent;
    color: #333;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover {
    background-color: #e7e7e7;
    color: #555;
}
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover {
    background-color: transparent;
    color: #ccc;
}
.navbar .navbar-nav .open .dropdown-menu > .active > a, .navbar .navbar-nav .open .dropdown-menu > .active > a:focus, .navbar .navbar-nav .open .dropdown-menu > .active > a:hover {
    background-image: linear-gradient(to bottom, #000 0px, #00AAD4 100%);
    background-repeat: repeat-x;
    color: #fff;
}
}
.navbar-default .navbar-nav > li > a {color: #00AAD4;
 text-transform: uppercase; font-size: 12px;}
.navbar-default {
    background-image: linear-gradient(to bottom, transparent 0px, transparent 100%);
    background-repeat: repeat-x;
    border-radius: 0px;
    box-shadow: 0 0px 0 rgba(255, 255, 255, 0.15) inset, 0 0px 0px rgba(0, 0, 0, 0.075);
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .open > a {
   background-image: linear-gradient(to bottom, transparent 0px, transparent 100%);
    background-repeat: repeat-x;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.075) inset;
}
.navbar-brand, .navbar-nav > li > a {
    text-shadow: 0 0px 0 rgba(255, 255, 255, 0.25);
}
@font-face {
    font-family: "ssi-icomoon";
    font-style: normal;
    font-weight: normal;
    src: url("../font/ssi-icomoon.eot?#iefixssi-texv9a") format("embedded-opentype"), url("../font/ssi-icomoon.woff?ssi-texv9a") format("woff"), url("../font/ssi-icomoon.ttf?ssi-texv9a") format("truetype"), url("../font/ssi-icomoon.svg?ssi-texv9a#ssi-icomoon") format("svg");
}
.simple-social-icons {
    overflow: hidden;
}
.simple-social-icons ul {
    margin: 0;
    padding: 0;
}
.simple-social-icons ul li {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
    border: medium none !important;
    float: left;
    list-style-type: none !important;
    margin: 0 6px 12px !important;
    padding: 0 !important;
}
.simple-social-icons ul li a {
    -moz-osx-font-smoothing: grayscale;
    border: medium none !important;
    box-sizing: content-box;
    display: inline-block;
    font-family: "ssi-icomoon";
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: normal !important;
    line-height: 1em;
    text-align: center;
    text-decoration: none !important;
    text-transform: none !important;
    width: 1em;
}
.simple-social-icons ul.aligncenter {
    text-align: center;
}
.simple-social-icons ul.aligncenter li {
    display: inline-block;
    float: none;
}
</style>
</head>
<body>
  <div class="header-wrapper">
                <div class="container">
                 
                
                
			<header role="banner">
            <div class="row row-with-vspace site-branding">
                
					<div class="col-sm-2  site-title">
						<h1 class="site-title-heading">
														<a href="http://www.inforest.com/" title="Example Home" rel="home"><img src="http://www.inforest.com/wp-content/uploads/2016/02/generic_logo1.gif" class="img-responsive home" border="0" ></a>
						</h1>
						
					</div><!-- Close col sm2-->
					<div class="col-sm-10 page-header-top-right">
                    
                    <div class="site-description">
                    <div class="row">
							<div class="col-sm-8">
								<h1>This Is The Site Description</h1><br>
					</div> <!-- Close col sm8-->
                                <div class="col-sm-4">  
						<div class="pull-right">
							<div id="simple-social-icons-3" class="widget simple-social-icons"><ul class="alignleft"><li class="social-facebook"><a href="https://www.facebook.com/" target="_blank">&#xe606;</a></li><li class="social-instagram"><a href="https://www.instagram.com/" target="_blank">&#xe600;</a></li><li class="social-twitter"><a href="https://www.instagram.com/" target="_blank">&#xe607;</a></li><li class="social-youtube"><a href="https://www.youtube.com/" target="_blank">&#xe60f;</a></li></ul></div> 
						</div>
						<div class="clearfix"></div>
						 
							</div><!-- Close col sm4-->
						</div><!-- Close col row-->
                        
                        </div><!-- Close col site description-->
                        
                        
                   <div class="row main-navigation">
					<div class="col-md-12">
                   
						<nav class="navbar navbar-default" role="navigation">
							<div class="navbar-header">
								<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-primary-collapse">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
							</div>
							
							<div class="collapse navbar-collapse navbar-primary-collapse">
								<ul id="menu-main-menu" class="nav navbar-nav"><li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="#">Home</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-29 dropdown" data-dropdown="dropdown"><a href="#about-us/" class="dropdown-toggle" data-toggle="dropdown">About <span class="caret"></span> </a>
<ul class="sub-menu dropdown-menu">
	<li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"><a href="#about-us/faqs/">FAQs</a></li>
	<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="#about-us/mission/">Mission</a></li>
	<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="#about-us/company/">Company</a></li>
</ul>
</li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-15 current_page_item menu-item-35 active active"><a href="#locations/">Locations</a></li>
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="#our-menu/">Menu</a></li>
<li id="menu-item-40" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-40"><a href="#category/events/">Events</a></li>

<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="#news/">News</a></li>

<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="#contact-f27/">Contact</a></li>
</ul> 
                               
								 
							</div><!--.navbar-collapse-->
						</nav>
					</div>
				</div><!--.main-navigation-->
						<div class="sr-only">
							<a href="#content" title="Skip to content">Skip to content</a>
						</div>
						
					</div>
				</div><!--row .site-branding-->
				
				
			</header>
            </div><!--.container-->
            </div><!--.header-wrapper-->
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>