Bootstrap responsive hero header example five

Bootstrap responsive hero header example five bootstrap snipp made with bootstrap, you can use this on middle of your web page, 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="css/bootstrap.min.css">
<link href="" rel="stylesheet">
<title>Bootstrap hero header example five</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-five.jpg);
    background-size: cover;
    background-position: center;
<nav class="navbar navbar-expand-lg fixed-top navbar-light py-3">
  <div class="container"> <a class="navbar-brand font-weight-bolder 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 pt-5">
  <div class="container pt-5">
    <div class="row pt-5 align-items-center">
      <div class="col-12 text-center">
        <h5 class="display-4 mb-4 font-weight-bold mt-5">A modular UI Kit for Bootstrap</h5>
        <p class="lead col-md-10 mx-auto pb-5 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 rutrumn.</p>
        <div class="text-center mb-5">
        <a href="" class="btn btn-lg btn-danger mr-2"><i class="lni lni-users mx-2"></i> SIGN IN</a>
        <a href="" class="btn btn-outline-danger btn-lg"><i class="lni lni-unlock mx-2"></i> REGISTER NOW</a>
        <div class="text-center pt-5">
        <img src="img/Safari-Flat-Browser.png" class="img-fluid">

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