How to achieve Multi Level dropdowns in Bootstrap v4.1?

Question

I have used the dropdown class and want to use a button dropdown where I want to show more childs in one level of dropdown.

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"aria- 
expanded="false">Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

Answer 1

It's not supported in Bootstrap natively. So you have to do some css/javascript/html magic yourself or use a library.

Nested dropdowns aren't supported and haven't been since v3.

source

Answer 2

There is no direct native support in Bootstrap v4.1. You need to manually customize the existing coding structure in BootStrap. But if you are just learning bootstrap, that can be tricky.

A small suggestion for you: Go for newer frameworks like the one my company has developed: https://www.offra.io/components/dropdown.php

You can use Offra to achieve such multilevel dropdowns without much overheads! You can just try it yourself the below code snippet:

<div class="dropdown">
    <button class="btn" id="dropdown8" data-activity="dropdown">Drop Down</button>
    <div class="offra-dropdown  sh-3dp" data-target-dropdown="dropdown8">
       <ul>
           <li>
               <a href="#">
                   Menu1-label 1
               </a>
           </li>
           <li>
               <a href="#">
                   Menu2-label 1
               </a>
               <ul>
                   <li>
                       <a href="#">
                           Menu2-child1-label 2
                       </a>
                       <ul>
                           <li>
                               <a href="#">
                                   Menu2-child1-label 3
                               </a>
                           </li>
                           <li>
                               <a href="#">
                                  Menu2-child2-label 3
                               </a>
                           </li>
                       </ul>
                   </li>
                   <li>
                       <a href="#">
                           Menu2-child2-label 2
                       </a>
                   </li>
               </ul>
           </li>
           <li>
               <a href="#">
                   Menu3-label 1
               </a>
               <ul>
                   <li>
                       <a href="#">
                           Menu3-child1-label 2
                       </a>
                       <ul>
                           <li>
                               <a href="#">
                                   Menu3-child1-label 3
                               </a>
                           </li>
                           <li>
                               <a href="#">
                                  Menu3-child2-label 3
                               </a>
                           </li>
                       </ul>
                   </li>
                   <li>
                       <a href="#">
                           Menu3-child2-label 2
                       </a>
                   </li>
               </ul>
           </li>
           <li>
               <a href="#">
                   Menu4-label 1
               </a>
           </li>
       </ul>
    </div>
</div>