Bootstrap responsive header example seven

Bootstrap responsive header example seven bootstrap snipp made with bootstrap, you can use this as your website hero header on top, simple div structure easy to implement.

<!doctype html>
<html lang="en">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="">
<link href="" rel="stylesheet">
<title>Bootstrap hero header with image</title>

<style type="text/css">
@import url(';400;500;700&display=swap');
body {
    font-family: 'Roboto', sans-serif;
.btn {
    padding: 14px 26px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
.btn-danger {
    background-color: #e34c43;
    border-color: #e34c43;
    background: linear-gradient(rgba(29, 38, 113, 0.1), rgba(195, 55, 100, 0.1)), url(img/banner-image-six.jpg);
    background-size: cover;
    background-position: center;
.banner-phone-image img{
.star-rating a{
.star-rating a:hover{
::placeholder {
.form-control {
    border-color: #ebebeb;
.form-control-lg {
    height: calc(1.6em + 1rem + 2px);
<nav class="navbar navbar-expand-lg fixed-top navbar-light py-3">
  <div class="container"> <a class="navbar-brand font-weight-bold text-uppercase" href="#">BRANDNAME</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto font-weight-bold">
        <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Testimonials</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
<div class="banner-image py-4">
  <div class="container py-5">
    <div class="row pt-5 align-items-center">
      <div class="col-lg-6">
        <h5 class="display-4 mb-5 font-weight-bold">Best Architecture services</h5> 
          <p class="lead mb-4 pb-3 text-black-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc nisi, suscipit id dapibus sit amet, lacinia nec lorem. Aenean eget urna rutrum.</p> 
        <div class="mb-5">
  <div class="form-row align-items-center">
    <div class="col-8">
      <input type="text" class="form-control form-control-lg" placeholder="Email">
    <div class="col-4">
       <button class="btn btn-outline-danger btn-block" type="submit"><span>Submit</span> <i class="lni lni-arrow-right d-md-inline-block d-none ml-2"></i></button>
      <div class="col-lg-6 text-center mt-5 mt-lg-0">
        <div class="banner-phone-image"> <img src="img/airplane-above-a-building-1860626.jpg" class="img-fluid rounded"> </div>

<!-- Optional JavaScript --> 
<!-- jQuery first, then Popper.js, then Bootstrap JS --> 
<script src="" ></script>
<script src="" ></script>
<script src="" ></script>
Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top