how to create fluid bootstrap menu in TYPO3 10.4.2 ?

Fluid menu : 

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
   
        <f:for each="{mainnavigation}" as="mainnavigationItem">
            <f:if condition="{mainnavigationItem.children}">
                <f:then>
                    <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="{mainnavigationItem.title}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{mainnavigationItem.title}</a>
                </f:then>
                <f:else>
                    <li class="nav-item {f:if(condition: '{data.uid} == 4', then:'active')}{f:if(condition: mainnavigationItem.active, then:'active')}">
                    <a href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}" class="nav-link">
                        {mainnavigationItem.title}
                    </a>
                </f:else>
            </f:if>
                <f:if condition="{mainnavigationItem.children}">
                    <div class="dropdown-menu" aria-labelledby="{mainnavigationItem.title}">
                        <f:for each="{mainnavigationItem.children}" as="child">
                                <a href="{child.link}" target="{child.target}" class="dropdown-item" title="{child.title}">
                                    {child.title}</a>
                        </f:for>
                    </div>
                  </li>
                   
                </f:if>
            </li>
        </f:for>
    </ul>
     <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
    </div>
</nav>