Bootstrap Headers:

Black and Green Header using Bootstrap

If you have a website and tend to change its appearance, this post can be helpful. We have prepared the Black and Green Header using Bootstrap with an attractive design in this post. This Bootstrap Headers Code allows you to differentiate your website from others and attract more visitors. All websites have a header, and if you want to shine between all emulators, it is better to use the Colorful Headers Code to become successful.

This preview shows the beauty of the header easily. These HTML Bootstrap Headers have a dark theme and phosphorescent green. The mentioned two colors make an eye-catching design. In the green part, we have placed the website's title in white color. On the other side, many elements are used in the black section. At the top of the page, you can see the different icons of Facebook, Twitter, Instagram, Pinterest, and Google. There are other features in this CSS Header with Icon representing the social button in white. You can add these subjects to your website easily. The unselected buttons are gray, and when you place the cursor of the mouse or click on a part, it will become white.

Bootstrap Headers Code

Colorful Headers Code

HTML Bootstrap Headers

CSS Header with Icon

<!-- This script got from frontendfreecode.com -->
<div class="fixed-top">
    <header class="topbar">
        <div class="container">
            <div class="row">
                <!-- social icon-->
                <div class="col-sm-12">
                    <ul class="social-network">
                        <li>
                            <a class="waves-effect waves-dark" href="#"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li>
                            <a class="waves-effect waves-dark" href="#"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li>
                            <a class="waves-effect waves-dark" href="#"><i class="fa fa-linkedin"></i></a>
                        </li>
                        <li>
                            <a class="waves-effect waves-dark" href="#"><i class="fa fa-pinterest"></i></a>
                        </li>
                        <li>
                            <a class="waves-effect waves-dark" href="#"><i class="fa fa-google-plus"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <nav class="navbar navbar-expand-sm navbar-dark mx-background-top-linear">
        <div class="container">
            <a class="navbar-brand" rel="nofollow" href="#" style="text-transform: uppercase;"> YorSite</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" style="max-width: 230px;" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <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">
                        <a class="nav-link" href="#">Fruits</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Sea food</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Vegetables</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #f7f7f7;
}
.navbar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 5px;
}
@media (min-width: 576px){
.navbar-expand-sm .navbar-collapse {
        display: -webkit-box!important;
        display: -ms-flexbox!important;
        display: flex!important;
        -ms-flex-preferred-size: auto;
        flex-basis: inherit;
        flex-wrap: wrap!important;
    }
}
@media (min-width: 576px){
    .navbar-expand-sm .navbar-nav {
        -webkit-box-orient: horizontal;
        flex-direction: row;
        flex-flow: wrap;
    }
}
.topbar {
    background-color: #212529;
    padding: 0;
}
.topbar .container .row {
    margin: -7px;
    padding: 0;
}
.topbar .container .row .col-md-12 {
    padding: 0;
}
.topbar p {
    margin: 0;
    display: inline-block;
    font-size: 13px;
    color: #f1f6ff;
}
.topbar p > i {
    margin-right: 5px;
}
.topbar p:last-child {
    text-align: right;
}
header .navbar {
    margin-bottom: 0;
}
.topbar li.topbar {
    display: inline;
    padding-right: 18px;
    line-height: 52px;
    transition: all 0.3s linear;
}
.topbar li.topbar:hover {
    color: #1bbde8;
}
.topbar ul.info i {
    color: #131313;
    font-style: normal;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    top: 4px;
}
.topbar ul.info li {
    float: right;
    padding-left: 30px;
    color: #ffffff;
    font-size: 13px;
    line-height: 44px;
}
.topbar ul.info i span {
    color: #aaa;
    font-size: 13px;
    font-weight: 400;
    line-height: 50px;
    padding-left: 18px;
}
ul.social-network {
    border: none;
    margin: 0;
    padding: 0;
}
ul.social-network li {
    border: none;
    margin: 0;
}
ul.social-network li i {
    margin: 0;
}
ul.social-network li {
    display: inline;
    margin: 0 5px;
    border: 0px solid #2d2d2d;
    padding: 5px 0 0;
    width: 32px;
    display: inline-block;
    text-align: center;
    height: 32px;
    vertical-align: baseline;
    color: #000;
}
ul.social-network {
    list-style: none;
    margin: 5px 0 10px -25px;
    float: right;
}
.waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    will-change: opacity, transform;
    transition: 0.3s ease-out;
    color: #fff;
}
a {
    color: #0a0a0a;
    text-decoration: none;
}
li {
    list-style-type: none;
}
.bg-image-full {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.bg-dark {
    background-color: #222 !important;
}
.mx-background-top-linear {
    background: -webkit-linear-gradient(45deg, #54d400 48%, #1b1e21 48%);
    background: -webkit-linear-gradient(left, #54d400 48%, #1b1e21 48%);
    background: linear-gradient(45deg, #54d400 48%, #1b1e21 48%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #f7f7f7;
}
.navbar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 5px;
}
@media (min-width: 576px){
.navbar-expand-sm .navbar-collapse {
        display: -webkit-box!important;
        display: -ms-flexbox!important;
        display: flex!important;
        -ms-flex-preferred-size: auto;
        flex-basis: inherit;
        flex-wrap: wrap!important;
    }
}
@media (min-width: 576px){
    .navbar-expand-sm .navbar-nav {
        -webkit-box-orient: horizontal;
        flex-direction: row;
        flex-flow: wrap;
    }
}
.topbar {
    background-color: #212529;
    padding: 0;
}
.topbar .container .row {
    margin: -7px;
    padding: 0;
}
.topbar .container .row .col-md-12 {
    padding: 0;
}
.topbar p {
    margin: 0;
    display: inline-block;
    font-size: 13px;
    color: #f1f6ff;
}
.topbar p > i {
    margin-right: 5px;
}
.topbar p:last-child {
    text-align: right;
}
header .navbar {
    margin-bottom: 0;
}
.topbar li.topbar {
    display: inline;
    padding-right: 18px;
    line-height: 52px;
    transition: all 0.3s linear;
}
.topbar li.topbar:hover {
    color: #1bbde8;
}
.topbar ul.info i {
    color: #131313;
    font-style: normal;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    top: 4px;
}
.topbar ul.info li {
    float: right;
    padding-left: 30px;
    color: #ffffff;
    font-size: 13px;
    line-height: 44px;
}
.topbar ul.info i span {
    color: #aaa;
    font-size: 13px;
    font-weight: 400;
    line-height: 50px;
    padding-left: 18px;
}
ul.social-network {
    border: none;
    margin: 0;
    padding: 0;
}
ul.social-network li {
    border: none;
    margin: 0;
}
ul.social-network li i {
    margin: 0;
}
ul.social-network li {
    display: inline;
    margin: 0 5px;
    border: 0px solid #2d2d2d;
    padding: 5px 0 0;
    width: 32px;
    display: inline-block;
    text-align: center;
    height: 32px;
    vertical-align: baseline;
    color: #000;
}
ul.social-network {
    list-style: none;
    margin: 5px 0 10px -25px;
    float: right;
}
.waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    will-change: opacity, transform;
    transition: 0.3s ease-out;
    color: #fff;
}
a {
    color: #0a0a0a;
    text-decoration: none;
}
li {
    list-style-type: none;
}
.bg-image-full {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.bg-dark {
    background-color: #222 !important;
}
.mx-background-top-linear {
    background: -webkit-linear-gradient(45deg, #54d400 48%, #1b1e21 48%);
    background: -webkit-linear-gradient(left, #54d400 48%, #1b1e21 48%);
    background: linear-gradient(45deg, #54d400 48%, #1b1e21 48%);
}
</style>

</head>
<body>
<div class="fixed-top">
    <header class="topbar">
        <div class="container">
            <div class="row">
                <!-- social icon-->
                <div class="col-sm-12">
                    <ul class="social-network">
                        <li>
                            <a class="waves-effect waves-dark" href="#"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li>
                            <a class="waves-effect waves-dark" href="#"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li>
                            <a class="waves-effect waves-dark" href="#"><i class="fa fa-linkedin"></i></a>
                        </li>
                        <li>
                            <a class="waves-effect waves-dark" href="#"><i class="fa fa-pinterest"></i></a>
                        </li>
                        <li>
                            <a class="waves-effect waves-dark" href="#"><i class="fa fa-google-plus"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <nav class="navbar navbar-expand-sm navbar-dark mx-background-top-linear">
        <div class="container">
            <a class="navbar-brand" rel="nofollow" href="#" style="text-transform: uppercase;"> YorSite</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" style="max-width: 230px;" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <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">
                        <a class="nav-link" href="#">Fruits</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Sea food</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Vegetables</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS