bootstrap mega menu full width

1<li class="nav-item dropdown">
2
3	<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
4	Mega Dropdown
5	</a>
6
7	<div class="dropdown-menu pt-0" aria-labelledby="navbarDropdown">
8
9		<img src="./img/cover.jpg" class="img-fluid" alt="" >
10
11		<div class="d-flex align-items-start flex-column flex-sm-row p-3">
12
13			<div>
14				<div class="dropdown-header">Services</div>
15				<a class="dropdown-item" href="#" >Développement web</a>
16				<a class="dropdown-item" href="#" >Développement mobile</a>
17				<a class="dropdown-item" href="#" >UX et Design</a>
18				<a class="dropdown-item" href="#" >Infographie</a>
19			</div>
20
21			<div>
22				<div class="dropdown-header">Technologies</div>
23				<a class="dropdown-item" href="#" >HTML et CSS</a>
24				<a class="dropdown-item" href="#" >BOOTSTRAP</a>
25				<a class="dropdown-item" href="#" >PHP et LARAVEL</a>
26				<a class="dropdown-item" href="#" >JAVASCRIPT et VUE.JS</a>
27			</div>
28
29			<div>
30				<div class="dropdown-header">Outils</div>
31				<a class="dropdown-item" href="#" >Visual Studio Code</a>
32				<a class="dropdown-item" href="#" >Laragon</a>
33				<a class="dropdown-item" href="#" >Google Chrome</a>
34				<a class="dropdown-item" href="#" >Windows 10</a>
35			</div>
36
37		</div>
38
39	</div>
40
41</li>

1<!-- first is the link in your navbar -->
2<a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
3
4<!-- your mega menu starts here! -->
5<div class="dropdown-menu dropdown-menu-right" aria-labelledby="servicesDropdown">
6
7<!-- the standard dropdown items --> 
8 <a class="dropdown-item" href="#">What we do</a>
9 <a class="dropdown-item" href="#">How we fit your needs</a>
10
11<!-- next, a divider to tidy things up -->
12 <div class="dropdown-divider"></div>
13
14<!-- finally, using flex to create your layout -->
15 <div class="d-md-flex align-items-start justify-content-start">
16  
17  <div>   
18   <div class="dropdown-header">Development</div>
19   <a class="dropdown-item" href="#">Bespoke software</a>
20   <a class="dropdown-item" href="#">Mobile apps</a>
21   <a class="dropdown-item" href="#">Websites</a>
22  </div>
23                               
24  <div>
25   <div class="dropdown-header">Professional Services</div>
26   <a class="dropdown-item" href="#">Project rescue</a>
27   <a class="dropdown-item" href="#">Source code recovery</a>
28   <a class="dropdown-item" href="#">Application support & maintenance</a>
29  </div>
30                                
31  <div>
32   <div class="dropdown-header">Fixed Price Services</div>
33   <a class="dropdown-item" href="#">Add cookie consent</a>
34   <a class="dropdown-item" href="#">Add captcha</a>
35   <a class="dropdown-item" href="#">Add core data</a>
36   <a class="dropdown-item" href="#">Custom error pages</a>
37   <a class="dropdown-item" href="#">Contact form creation</a>
38   <a class="dropdown-item" href="#">Automated backups</a>
39   <a class="dropdown-item" href="#">Image to HTML</a>
40  </div>
41 </div>
42</div>
43

1<nav class="navbar navbar-light bg-light navbar-expand-lg" id="myNavbar">
2 
3 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
4  <span class="navbar-toggler-icon"></span>
5 </button>
6 
7 <a href="#" class="navbar-brand">Navbar Brand</a>
8 <div class="collapse navbar-collapse" id="mainNav">
9  <ul class="navbar-nav ml-auto nav-fill">
10   
11   <li class="nav-item px-4">
12    <a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
13   </li>
14   
15   <li class="nav-item px-4 dropdown">
16    <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
17    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="servicesDropdown">
18     <a class="dropdown-item" href="#">What we do</a>
19     <a class="dropdown-item" href="#">How we fit your needs</a>
20     <div class="dropdown-divider"></div>
21     <div class="d-md-flex align-items-start justify-content-start">
22      <div>   
23       <div class="dropdown-header">Development</div>
24       <a class="dropdown-item" href="#">Bespoke software</a>
25       <a class="dropdown-item" href="#">Mobile apps</a>
26       <a class="dropdown-item" href="#">Websites</a>
27      </div>
28      <div>
29       <div class="dropdown-header">Professional Services</div>
30       <a class="dropdown-item" href="#">Project rescue</a>
31       <a class="dropdown-item" href="#">Source code recovery</a>
32       <a class="dropdown-item" href="#">Application support &amp; maintenance</a>
33      </div>
34      <div>
35       <div class="dropdown-header">Fixed Price Services</div>
36       <a class="dropdown-item" href="#">Add cookie consent</a>
37       <a class="dropdown-item" href="#">Add captcha</a>
38       <a class="dropdown-item" href="#">Add core data</a>
39       <a class="dropdown-item" href="#">Custom error pages</a>
40       <a class="dropdown-item" href="#">Contact form creation</a>
41       <a class="dropdown-item" href="#">Automated backups</a>
42       <a class="dropdown-item" href="#">Image to HTML</a>
43      </div>
44     </div>
45    </div>
46   </li>
47   <li class="nav-item px-4">
48    <a href="#" class="nav-link">Contact</a>
49   </li>
50   <li class="nav-item px-4">
51    <a href="#" class="nav-link">Blog</a>
52   </li>
53  </ul>
54 </div>
55</nav>