Answers for "bootstrap mega menu full width"

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>

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>

bootstrap mega menu full width

<nav class="navbar navbar-light bg-light navbar-expand-lg" id="myNavbar">
 
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
 </button>
 
 <a href="#" class="navbar-brand">Navbar Brand</a>
 <div class="collapse navbar-collapse" id="mainNav">
  <ul class="navbar-nav ml-auto nav-fill">
   
   <li class="nav-item px-4">
    <a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
   </li>
   
   <li class="nav-item px-4 dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="servicesDropdown">
     <a class="dropdown-item" href="#">What we do</a>
     <a class="dropdown-item" href="#">How we fit your needs</a>
     <div class="dropdown-divider"></div>
     <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 &amp; 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>
   </li>
   <li class="nav-item px-4">
    <a href="#" class="nav-link">Contact</a>
   </li>
   <li class="nav-item px-4">
    <a href="#" class="nav-link">Blog</a>
   </li>
  </ul>
 </div>
</nav>