Responsive header with form made with bootstrap

Responsive header with form 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 lead form</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-four.jpg);
    background-size: cover;
    background-position: center;
    margin:0 auto;
::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-5">
  <div class="container py-5">
    <div class="row py-5 align-items-center">
      <div class="col-lg-6">
        <h5 class="display-4 mb-4 font-weight-bold text-center text-lg-left">Stay connected with your customers</h5> 
          <p class="lead mb-5 text-black-50 text-center text-lg-left">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="d-flex justify-content-center justify-content-lg-start mb-4">
        <a href="" class="btn btn-lg btn-danger mr-2"> View More</a>
        <a href="" class="btn btn-lg btn-outline-danger"> Contact Us</a>
      <div class="col-lg-6 text-center mt-5 mt-lg-0">
        <div class="lead-form rounded p-5"> 
        <form id="contact-form">
                                    <h3 class="font-weight-bold">Get started for FREE!</h3>
                                    <h6 class="text-black-50 pt-3 pb-4 small font-weight-bold">Fill all fields so we can get some info about you.<br>We'll never send you spam</h6>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <input type="text" class="form-control form-control-lg" name="name" placeholder="Name" required>
                                        <div class="form-group">
                                            <input type="email" class="form-control form-control-lg" name="email" placeholder="Email" required>
                                        <div class="form-group">
                                            <input type="text" class="form-control form-control-lg" name="phone" placeholder="Phone" required>
                                    <div class="col-12">
                                        <button class="btn btn-danger btn-lg w-100 mt-3 mt-sm-4" type="submit">Send Message <i class="lni lni-arrow-right ml-2"></i></button>
                                            <span class="d-inline-block mt-4 text-black-50 small">By signing up, you accept our <a href="#">Terms</a> &amp; <a href="#">Privacy Policy</a></span>

<!-- 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