bootstrap mega menu code example

Example 1: mega menu with card bootstrap

reference : https://jsfiddle.net/Lokesh003Coding/qL7j5ytg/

Example 2: bootstrap mega menu responsive

<li class="nav-item dropdown">

	<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	Mega Dropdown
	</a>

	<div class="dropdown-menu pt-0" aria-labelledby="navbarDropdown">

		<img src="./img/cover.jpg" class="img-fluid" alt="" >

		<div class="d-flex align-items-start flex-column flex-sm-row p-3">

			<div>
				<div class="dropdown-header">Services</div>
				<a class="dropdown-item" href="#" >Développement web</a>
				<a class="dropdown-item" href="#" >Développement mobile</a>
				<a class="dropdown-item" href="#" >UX et Design</a>
				<a class="dropdown-item" href="#" >Infographie</a>
			</div>

			<div>
				<div class="dropdown-header">Technologies</div>
				<a class="dropdown-item" href="#" >HTML et CSS</a>
				<a class="dropdown-item" href="#" >BOOTSTRAP</a>
				<a class="dropdown-item" href="#" >PHP et LARAVEL</a>
				<a class="dropdown-item" href="#" >JAVASCRIPT et VUE.JS</a>
			</div>

			<div>
				<div class="dropdown-header">Outils</div>
				<a class="dropdown-item" href="#" >Visual Studio Code</a>
				<a class="dropdown-item" href="#" >Laragon</a>
				<a class="dropdown-item" href="#" >Google Chrome</a>
				<a class="dropdown-item" href="#" >Windows 10</a>
			</div>

		</div>

	</div>

</li>

Example 3: bootstrap mega menu responsive examples

<!-- first is the link in your navbar -->
<a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>

<!-- your mega menu starts here! -->
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="servicesDropdown">

<!-- the standard dropdown items --> 
 <a class="dropdown-item" href="#">What we do</a>
 <a class="dropdown-item" href="#">How we fit your needs</a>

<!-- next, a divider to tidy things up -->
 <div class="dropdown-divider"></div>

<!-- finally, using flex to create your layout -->
 <div class="d-md-flex align-items-start justify-content-start">
  
  <div>   
   <div class="dropdown-header">Development</div>
   <a class="dropdown-item" href="#">Bespoke software</a>
   <a class="dropdown-item" href="#">Mobile apps</a>
   <a class="dropdown-item" href="#">Websites</a>
  </div>
                               
  <div>
   <div class="dropdown-header">Professional Services</div>
   <a class="dropdown-item" href="#">Project rescue</a>
   <a class="dropdown-item" href="#">Source code recovery</a>
   <a class="dropdown-item" href="#">Application support & maintenance</a>
  </div>
                                
  <div>
   <div class="dropdown-header">Fixed Price Services</div>
   <a class="dropdown-item" href="#">Add cookie consent</a>
   <a class="dropdown-item" href="#">Add captcha</a>
   <a class="dropdown-item" href="#">Add core data</a>
   <a class="dropdown-item" href="#">Custom error pages</a>
   <a class="dropdown-item" href="#">Contact form creation</a>
   <a class="dropdown-item" href="#">Automated backups</a>
   <a class="dropdown-item" href="#">Image to HTML</a>
  </div>
 </div>
</div>