Bootstrap 4 Center Nav Dropdown

Question

I am using bootstrap 4 to create a navigational menu. My navigational items each contain a dropdown menu. When clicked I want this menu to display the same size and be horizontally centered on the page. Ideally, I want this dropdown menu to be the same size as the ul element. At the moment I can't figure out how to do this as I am relatively new to bootstrap.

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <nav class="navbar navbar-expand-md navbar-light bg-primary py-0"> <div class="container h-100"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse h-100" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto mx-auto h-100"> <li class="nav-item dropdown px-2"> <a class="nav-link dropdown-toggle text-white" href="/category/flat-roof-materials" id="flatRoofingDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Flat Roofing </a> <div class="dropdown-menu border border-primary row mx-auto" aria-labelledby="flatRoofingDropdown"> <div class="container"> <div class="row"> <div class="col-md-4"> <a class="dropdown-item text-primary" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a> <a class="dropdown-item" href="/category/classicbond">ClassicBond</a> <a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a> <a class="dropdown-item" href="/category/duoply">Duoply</a> <a class="dropdown-item text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a> <a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a> <a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a> <a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a> <a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a> <a class="dropdown-item" href="/category/ultraflex">Ultraflex</a> <a class="dropdown-item text-primary" href="/category/torch-on-felt">Roofing Felt</a> <a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a> <a class="dropdown-item text-primary" href="/category/timber-sheeting">Timber Sheeting</a> <a class="dropdown-item" href="/category/osb">OSB</a> </div> <div class="col-md-4"> <a class="dropdown-item text-primary" href="/category/green-roofing">Green Roof System</a> <a class="dropdown-item" href="/category/green-roofing?filter232=GrufeKit&page=1">Grufe kit</a> <a class="dropdown-item text-primary" href="/category/liquid-waterproofing-systems">Liquid Waterproofing</a> <a class="dropdown-item" href="/category/elastathane">Elastathane 25</a> <a class="dropdown-item" href="/category/hydrosil-silicone-roof-coating">Hydrosil</a> <a class="dropdown-item" href="/tools/flexitec-calculator">Liquid Rubber</a> <a class="dropdown-item text-primary" href="#">Skylights</a> <a class="dropdown-item" href="#">Flat Glass Rooflights</a> <a class="dropdown-item" href="#">Domes</a> <a class="dropdown-item text-primary" href="#">Flat Roof Outlets</a> <a class="dropdown-item" href="/category/flat-roof-outlets">Water Outlets</a> <a class="dropdown-item" href="/category/flat-roof-vents">Flat Roof Vents</a> </div> <div class="col-md-4"> <a class="dropdown-item navbar-brand text-primary h5" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a> <a class="dropdown-item" href="/category/classicbond">ClassicBond</a> <a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a> <a class="dropdown-item" href="/category/duoply">Duoply</a> <div class="dropdown-divider"></div> <a class="dropdown-item navbar-brand text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a> <a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a> <a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a> <a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a> <a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a> <a class="dropdown-item" href="/category/ultraflex">Ultraflex</a> <div class="dropdown-divider"></div> <a class="dropdown-item navbar-brand text-primary" href="/category/torch-on-felt">Roofing Felt</a> <a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a> <div class="dropdown-divider"></div> <a class="dropdown-item navbar-brand text-primary" href="/category/timber-sheeting">Timber Sheeting</a> <a class="dropdown-item" href="/category/osb">OSB</a> </div> </div> </div> </div> </li> </ul> </div> </div> </nav> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Current behaviour:

Expected outcome, centered, and the same size:

result from suggested fix:

Answer 1

Add below CSS.

 .dropdown { position: initial; } @media (min-width: 768px) {.dropdown-menu { width: 50rem; /* JUST FOR STYLING PURPOSE OF DROPDOWN */ position: absolute; left: 50%;important: transform; translateX(-50%) !important; } }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <nav class="navbar navbar-expand-md navbar-light bg-primary py-0"> <div class="container h-100"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse h-100" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto mx-auto h-100"> <li class="nav-item dropdown px-2"> <a class="nav-link dropdown-toggle text-white" href="/category/flat-roof-materials" id="flatRoofingDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Flat Roofing </a> <div class="dropdown-menu border border-primary row mx-auto" aria-labelledby="flatRoofingDropdown"> <div class="container"> <div class="row"> <div class="col-md-4"> <a class="dropdown-item text-primary" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a> <a class="dropdown-item" href="/category/classicbond">ClassicBond</a> <a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a> <a class="dropdown-item" href="/category/duoply">Duoply</a> <a class="dropdown-item text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a> <a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a> <a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a> <a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a> <a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a> <a class="dropdown-item" href="/category/ultraflex">Ultraflex</a> <a class="dropdown-item text-primary" href="/category/torch-on-felt">Roofing Felt</a> <a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a> <a class="dropdown-item text-primary" href="/category/timber-sheeting">Timber Sheeting</a> <a class="dropdown-item" href="/category/osb">OSB</a> </div> <div class="col-md-4"> <a class="dropdown-item text-primary" href="/category/green-roofing">Green Roof System</a> <a class="dropdown-item" href="/category/green-roofing?filter232=GrufeKit&page=1">Grufe kit</a> <a class="dropdown-item text-primary" href="/category/liquid-waterproofing-systems">Liquid Waterproofing</a> <a class="dropdown-item" href="/category/elastathane">Elastathane 25</a> <a class="dropdown-item" href="/category/hydrosil-silicone-roof-coating">Hydrosil</a> <a class="dropdown-item" href="/tools/flexitec-calculator">Liquid Rubber</a> <a class="dropdown-item text-primary" href="#">Skylights</a> <a class="dropdown-item" href="#">Flat Glass Rooflights</a> <a class="dropdown-item" href="#">Domes</a> <a class="dropdown-item text-primary" href="#">Flat Roof Outlets</a> <a class="dropdown-item" href="/category/flat-roof-outlets">Water Outlets</a> <a class="dropdown-item" href="/category/flat-roof-vents">Flat Roof Vents</a> </div> <div class="col-md-4"> <a class="dropdown-item navbar-brand text-primary h5" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a> <a class="dropdown-item" href="/category/classicbond">ClassicBond</a> <a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a> <a class="dropdown-item" href="/category/duoply">Duoply</a> <div class="dropdown-divider"></div> <a class="dropdown-item navbar-brand text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a> <a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a> <a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a> <a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a> <a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a> <a class="dropdown-item" href="/category/ultraflex">Ultraflex</a> <div class="dropdown-divider"></div> <a class="dropdown-item navbar-brand text-primary" href="/category/torch-on-felt">Roofing Felt</a> <a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a> <div class="dropdown-divider"></div> <a class="dropdown-item navbar-brand text-primary" href="/category/timber-sheeting">Timber Sheeting</a> <a class="dropdown-item" href="/category/osb">OSB</a> </div> </div> </div> </div> </li> </ul> </div> </div> </nav> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>