Bootstrap Headers:

Bootstrap Header with Multi Level and Mega Menus

Many don’t understand the importance of a website header. It is important to use your header to its full potential. Don’t think of your website header as place where you can dump all the links that you don’t have any other spaces for them. The header is not a ‘’dumping ground”. It is the first thing that people face when they fist land on your website. It should be something that can impress them not make them leave your site. Your header is the section that sets the tone of the entirety of your website, so make sure you think before deciding on the styles and formats you want.

You need a beautiful and inviting design plus all the major information to encourage visitors to explore more of your website. A common strategy is to put your website’s logo and title in the header and add contact information to it. another great idea is to take the header as a navigation bar and provide all the necessary links and features in it.

The code we have here is a Bootstrap menu bar that you can use as your header. Bootstrap navigation bars often have different styles you can choose from. This particular Bootstrap header, for example, is a drop-down Bootstrap menu which can be expanded when you click the toggle button.

Bootstrap Headers

Bootstrap Menu

Bootstrap Navigation Bar

Bootstrap Menu Bar

<!-- This script got from frontendfreecode.com -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow back">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Bootstrap <span class="badge bg-success">v5</span></a>
    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
      <div class="hamburger-toggle">
        <div class="hamburger">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Multilevel</a>
          <ul class="dropdown-menu shadow">
            <li><a class="dropdown-item" href="#">Gallery</a></li>
            <li><a class="dropdown-item" href="#">Blog</a></li>
            <li class="dropdown-submenu">
              <a href="#" class="dropdown-item dropdown-submenu-toggle icon-left">Submenu Left</a>
              <ul class="dropdown-menu dropdown-menu-right dropdown-submenu shadow">
                <li><a class="dropdown-item" href=""> Third level 1</a></li>
                <li><a class="dropdown-item" href=""> Third level 2</a></li>
                <li><a class="dropdown-item" href=""> Third level 3</a></li>
                <li><a class="dropdown-item" href=""> Third level 4</a></li>
                <li><a class="dropdown-item" href=""> Third level 5</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a href="#" class="dropdown-item dropdown-submenu-toggle">Submenu Right</a>
              <ul class="dropdown-menu dropdown-submenu shadow">
                <li><a class="dropdown-item" href=""> Second level 1</a></li>
                <li><a class="dropdown-item" href=""> Second level 2</a></li>
                <li><a class="dropdown-item" href=""> Second level 3</a></li>
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-item dropdown-submenu-toggle">Let's go deeper!</a>
                  <ul class="dropdown-menu dropdown-submenu shadow">
                    <li><a class="dropdown-item" href=""> Third level 1</a></li>
                    <li><a class="dropdown-item" href=""> Third level 2</a></li>
                    <li><a class="dropdown-item" href=""> Third level 3</a></li>
                    <li><a class="dropdown-item" href=""> Third level 4</a></li>
                    <li><a class="dropdown-item" href=""> Third level 5</a></li>
                  </ul>
                </li>
                <li><a class="dropdown-item" href=""> Third level 5</a></li>
              </ul>
            </li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown dropdown-mega">
          <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Megamenu</a>
          <div class="dropdown-menu shadow">
            <div class="mega-content px-4">
              <div class="container-fluid">
                <div class="row">
                  <div class="col-12 col-sm-4 col-md-3 py-4">
                    <h5>Pages</h5>
                    <div class="list-group">
                      <a class="list-group-item" href="#">Accomodations</a>
                      <a class="list-group-item" href="#">Terms & Conditions</a>
                      <a class="list-group-item" href="#">Privacy</a>
                    </div>
                  </div>
                  <div class="col-12 col-sm-4 col-md-3 py-4">
                    <h5>Card</h5>
                    <div class="card">
                <div class="card-body">
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
              </div>
                  </div>
                  <div class="col-12 col-sm-4 col-md-3 py-4">
                    <h5>Lot of Pages</h5>
                    <p>Lorem ipsum dolo sit achmet muhamed borlan de irtka.
                  </div>
                  <div class="col-12 col-sm-12 col-md-3 py-4">
                    <h5>Damn, so many</h5>
                    <div class="list-group">
                      <a class="list-group-item" href="#">Accomodations</a>
                      <a class="list-group-item" href="#">Terms & Conditions</a>
                      <a class="list-group-item" href="#">Privacy</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
<section class="my-5">
  <div class="container">
    <div class="p-4 border">
      <h1>Bootstrap <span class="text-success">5</span> Header Multi Level and Mega Menu</h1>
    <p class="lead">This example shows a Navbar component of the Bootstrap Framework version 5 with the following features:</p>
    <ul>
      <li>Multi Level Menu</li>
      <li>Material Icons as Dropdown Icons</li>
      <li>Animated Hamburger Menu for Mobile Devices</li>
    </ul>   
  </div>
  </div>
</section><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

@charset "UTF-8";
* {
  font-family: "Source Sans Pro", "Roboto", Arial, sans-serif;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.back{
    background-color:#86b7e8 !important;
}
.dropdown-menu.show {
  -webkit-animation: fadeIn 0.3s alternate;
  /* Safari 4.0 - 8.0 */
  animation: fadeIn 0.3s alternate;
}

.dropdown-toggle-arrow, .dropdown-submenu-toggle.icon-left::before, .dropdown-submenu-toggle::after, .dropdown-toggle::after {
  display: inline-block;
  font: normal normal normal 14px/1 "Material-Design-Iconic-Font";
  font-size: inherit;
  margin: 0;
  border: none;
  vertical-align: inherit;
  color: #8db3d3;
  width: 1.28571429em;
}

.dropdown-toggle::after {
  content: "";
  width: auto;
  padding-left: 0.2rem;
}

.dropdown-submenu-toggle::after {
  text-align: center;
  content: "";
}
.dropdown-submenu-toggle.icon-left::after {
  content: "";
}
.dropdown-submenu-toggle.icon-left::before {
  text-align: center;
  content: "";
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
.dropdown-submenu .dropdown-menu-right {
  left: auto;
  right: 100%;
}

.nav-item.dropdown.dropdown-mega {
  position: static;
}
.nav-item.dropdown.dropdown-mega .dropdown-menu {
  width: 90%;
  top: auto;
  left: 5%;
}

.navbar-toggler {
  border: none;
  padding: 0;
  outline: none;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler .hamburger-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  z-index: 11;
  float: right;
}
.navbar-toggler .hamburger-toggle .hamburger {
  position: absolute;
  transform: translate(-50%, -50%) rotate(0deg);
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  pointer-events: none;
}
.navbar-toggler .hamburger-toggle .hamburger span {
  width: 100%;
  height: 4px;
  position: absolute;
  background: #333;
  border-radius: 2px;
  z-index: 1;
  transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), all 0.2s ease-in-out;
  left: 0px;
}
.navbar-toggler .hamburger-toggle .hamburger span:first-child {
  top: 10%;
  transform-origin: 50% 50%;
  transform: translate(0% -50%) !important;
}
.navbar-toggler .hamburger-toggle .hamburger span:nth-child(2) {
  top: 50%;
  transform: translate(0, -50%);
}
.navbar-toggler .hamburger-toggle .hamburger span:last-child {
  left: 0px;
  top: auto;
  bottom: 10%;
  transform-origin: 50% 50%;
}
.navbar-toggler .hamburger-toggle .hamburger.active span {
  position: absolute;
  margin: 0;
}
.navbar-toggler .hamburger-toggle .hamburger.active span:first-child {
  top: 45%;
  transform: rotate(45deg);
}
.navbar-toggler .hamburger-toggle .hamburger.active span:nth-child(2) {
  left: 50%;
  width: 0px;
}
.navbar-toggler .hamburger-toggle .hamburger.active span:last-child {
  top: 45%;
  transform: rotate(-45deg);
}

.icons {
  display: inline-flex;
  margin-left: auto;
}
.icons a {
  transition: all 0.2s ease-in-out;
  padding: 0.2rem 0.4rem;
  color: #ccc !important;
  text-decoration: none;
}
.icons a:hover {
  color: white;
  text-shadow: 0 0 30px white;
}

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'));
var dropdownSubmenuElementList = [].slice.call(document.querySelectorAll('.dropdown-submenu-toggle'));
var dropdownMenus = [].slice.call(document.querySelectorAll('.dropdown-menu'));
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
    return new bootstrap.Dropdown(dropdownToggleEl);
});
var submenuList = dropdownSubmenuElementList.map(function(e) {
    e.onclick = function(e){
        e.target.parentNode.querySelector('ul').classList.toggle('show');
        e.stopPropagation();
        e.preventDefault();
    }
});
var masterClickEvent = document.addEventListener('click',function(e){
    // Function to remove show class from dropdowns that are open
    closeAllSubmenus();
    // Hamburger menu
    if(e.target.classList.contains('hamburger-toggle')){
        e.target.children[0].classList.toggle('active');
    }
});
function closeAllSubmenus(){
    // Function to remove show class from dropdowns that are open
    dropdownMenus.map(function (menu) {
        menu.classList.remove('show');
    });
}

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&amp;display=swap'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'><link rel="stylesheet" href="./style.css">
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.bundle.min.js'></script>

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

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&amp;display=swap'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'><link rel="stylesheet" href="./style.css">
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.bundle.min.js'></script>
<style>
@charset "UTF-8";
* {
  font-family: "Source Sans Pro", "Roboto", Arial, sans-serif;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.back{
    background-color:#86b7e8 !important;
}
.dropdown-menu.show {
  -webkit-animation: fadeIn 0.3s alternate;
  /* Safari 4.0 - 8.0 */
  animation: fadeIn 0.3s alternate;
}

.dropdown-toggle-arrow, .dropdown-submenu-toggle.icon-left::before, .dropdown-submenu-toggle::after, .dropdown-toggle::after {
  display: inline-block;
  font: normal normal normal 14px/1 "Material-Design-Iconic-Font";
  font-size: inherit;
  margin: 0;
  border: none;
  vertical-align: inherit;
  color: #8db3d3;
  width: 1.28571429em;
}

.dropdown-toggle::after {
  content: "";
  width: auto;
  padding-left: 0.2rem;
}

.dropdown-submenu-toggle::after {
  text-align: center;
  content: "";
}
.dropdown-submenu-toggle.icon-left::after {
  content: "";
}
.dropdown-submenu-toggle.icon-left::before {
  text-align: center;
  content: "";
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
.dropdown-submenu .dropdown-menu-right {
  left: auto;
  right: 100%;
}

.nav-item.dropdown.dropdown-mega {
  position: static;
}
.nav-item.dropdown.dropdown-mega .dropdown-menu {
  width: 90%;
  top: auto;
  left: 5%;
}

.navbar-toggler {
  border: none;
  padding: 0;
  outline: none;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler .hamburger-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  z-index: 11;
  float: right;
}
.navbar-toggler .hamburger-toggle .hamburger {
  position: absolute;
  transform: translate(-50%, -50%) rotate(0deg);
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  pointer-events: none;
}
.navbar-toggler .hamburger-toggle .hamburger span {
  width: 100%;
  height: 4px;
  position: absolute;
  background: #333;
  border-radius: 2px;
  z-index: 1;
  transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), all 0.2s ease-in-out;
  left: 0px;
}
.navbar-toggler .hamburger-toggle .hamburger span:first-child {
  top: 10%;
  transform-origin: 50% 50%;
  transform: translate(0% -50%) !important;
}
.navbar-toggler .hamburger-toggle .hamburger span:nth-child(2) {
  top: 50%;
  transform: translate(0, -50%);
}
.navbar-toggler .hamburger-toggle .hamburger span:last-child {
  left: 0px;
  top: auto;
  bottom: 10%;
  transform-origin: 50% 50%;
}
.navbar-toggler .hamburger-toggle .hamburger.active span {
  position: absolute;
  margin: 0;
}
.navbar-toggler .hamburger-toggle .hamburger.active span:first-child {
  top: 45%;
  transform: rotate(45deg);
}
.navbar-toggler .hamburger-toggle .hamburger.active span:nth-child(2) {
  left: 50%;
  width: 0px;
}
.navbar-toggler .hamburger-toggle .hamburger.active span:last-child {
  top: 45%;
  transform: rotate(-45deg);
}

.icons {
  display: inline-flex;
  margin-left: auto;
}
.icons a {
  transition: all 0.2s ease-in-out;
  padding: 0.2rem 0.4rem;
  color: #ccc !important;
  text-decoration: none;
}
.icons a:hover {
  color: white;
  text-shadow: 0 0 30px white;
}
</style>

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow back">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Bootstrap <span class="badge bg-success">v5</span></a>
    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
      <div class="hamburger-toggle">
        <div class="hamburger">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Multilevel</a>
          <ul class="dropdown-menu shadow">
            <li><a class="dropdown-item" href="#">Gallery</a></li>
            <li><a class="dropdown-item" href="#">Blog</a></li>
            <li class="dropdown-submenu">
              <a href="#" class="dropdown-item dropdown-submenu-toggle icon-left">Submenu Left</a>
              <ul class="dropdown-menu dropdown-menu-right dropdown-submenu shadow">
                <li><a class="dropdown-item" href=""> Third level 1</a></li>
                <li><a class="dropdown-item" href=""> Third level 2</a></li>
                <li><a class="dropdown-item" href=""> Third level 3</a></li>
                <li><a class="dropdown-item" href=""> Third level 4</a></li>
                <li><a class="dropdown-item" href=""> Third level 5</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a href="#" class="dropdown-item dropdown-submenu-toggle">Submenu Right</a>
              <ul class="dropdown-menu dropdown-submenu shadow">
                <li><a class="dropdown-item" href=""> Second level 1</a></li>
                <li><a class="dropdown-item" href=""> Second level 2</a></li>
                <li><a class="dropdown-item" href=""> Second level 3</a></li>
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-item dropdown-submenu-toggle">Let's go deeper!</a>
                  <ul class="dropdown-menu dropdown-submenu shadow">
                    <li><a class="dropdown-item" href=""> Third level 1</a></li>
                    <li><a class="dropdown-item" href=""> Third level 2</a></li>
                    <li><a class="dropdown-item" href=""> Third level 3</a></li>
                    <li><a class="dropdown-item" href=""> Third level 4</a></li>
                    <li><a class="dropdown-item" href=""> Third level 5</a></li>
                  </ul>
                </li>
                <li><a class="dropdown-item" href=""> Third level 5</a></li>
              </ul>
            </li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown dropdown-mega">
          <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Megamenu</a>
          <div class="dropdown-menu shadow">
            <div class="mega-content px-4">
              <div class="container-fluid">
                <div class="row">
                  <div class="col-12 col-sm-4 col-md-3 py-4">
                    <h5>Pages</h5>
                    <div class="list-group">
                      <a class="list-group-item" href="#">Accomodations</a>
                      <a class="list-group-item" href="#">Terms & Conditions</a>
                      <a class="list-group-item" href="#">Privacy</a>
                    </div>
                  </div>
                  <div class="col-12 col-sm-4 col-md-3 py-4">
                    <h5>Card</h5>
                    <div class="card">
                <div class="card-body">
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
              </div>
                  </div>
                  <div class="col-12 col-sm-4 col-md-3 py-4">
                    <h5>Lot of Pages</h5>
                    <p>Lorem ipsum dolo sit achmet muhamed borlan de irtka.
                  </div>
                  <div class="col-12 col-sm-12 col-md-3 py-4">
                    <h5>Damn, so many</h5>
                    <div class="list-group">
                      <a class="list-group-item" href="#">Accomodations</a>
                      <a class="list-group-item" href="#">Terms & Conditions</a>
                      <a class="list-group-item" href="#">Privacy</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
<section class="my-5">
  <div class="container">
    <div class="p-4 border">
      <h1>Bootstrap <span class="text-success">5</span> Header Multi Level and Mega Menu</h1>
    <p class="lead">This example shows a Navbar component of the Bootstrap Framework version 5 with the following features:</p>
    <ul>
      <li>Multi Level Menu</li>
      <li>Material Icons as Dropdown Icons</li>
      <li>Animated Hamburger Menu for Mobile Devices</li>
    </ul>   
  </div>
  </div>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'));
var dropdownSubmenuElementList = [].slice.call(document.querySelectorAll('.dropdown-submenu-toggle'));
var dropdownMenus = [].slice.call(document.querySelectorAll('.dropdown-menu'));
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
    return new bootstrap.Dropdown(dropdownToggleEl);
});
var submenuList = dropdownSubmenuElementList.map(function(e) {
    e.onclick = function(e){
        e.target.parentNode.querySelector('ul').classList.toggle('show');
        e.stopPropagation();
        e.preventDefault();
    }
});
var masterClickEvent = document.addEventListener('click',function(e){
    // Function to remove show class from dropdowns that are open
    closeAllSubmenus();
    // Hamburger menu
    if(e.target.classList.contains('hamburger-toggle')){
        e.target.children[0].classList.toggle('active');
    }
});
function closeAllSubmenus(){
    // Function to remove show class from dropdowns that are open
    dropdownMenus.map(function (menu) {
        menu.classList.remove('show');
    });
}
</script>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></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