Bootstrap mega menu

by Ondrej

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3 shadow-sm">
  <a href="#" class="navbar-brand font-weight-bold d-block d-lg-none">MegaMenu</a>
  <button type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler">
          <span class="navbar-toggler-icon"></span>
      </button>
  <div id="navbarContent" class="collapse navbar-collapse">
    <ul class="navbar-nav mx-auto">
      <!-- Megamenu-->
      <li class="nav-item dropdown megamenu"><a id="megamneu" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle font-weight-bold text-uppercase">Mega Menu</a>
        <div aria-labelledby="megamneu" class="dropdown-menu border-0 p-0 m-0">
          <div class="container">
            <div class="row bg-white rounded-0 m-0 shadow-sm">
              <div class="col-lg-7 col-xl-8">
                <div class="p-4">
                  <div class="row">
                    <div class="col-lg-6 mb-4">
                      <h6 class="font-weight-bold text-uppercase">MegaMenu heading</h6>
                      <ul class="list-unstyled">
                        <li class="nav-item"><a href="" class="nav-link text-small pb-0">Unique Features</a></li>
                        <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Image Responsive</a></li>
                        <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Auto Carousel</a></li>
                        <li...

CSS

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

.megamenu {
  position: static;
}

.megamenu .dropdown-menu {
  background: none;
  border: none;
  width: 100%;
}

/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/

body {
  background: #eaafc8;
  background: -webkit-linear-gradient(to right, #eaafc8, #654ea3);
  background: linear-gradient(to right, #eaafc8, #654ea3);
  min-height: 100vh;
}

code {
  color: #745eb1;
  background: #fff;
  padding: 0.1rem 0.2rem;
  border-radius: 0.2rem;
}

.text-uppercase {
  letter-spacing: 0.08em;
}