bootstrap mega menu responsive

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