How to force a bootstrap dropdown to position to another element

I'm building a mega-menu using Bootstrap 4 dropdowns. The containers are not fluid. How can I force each dropdown to be positioned and styled to take the entire width of the container? Not relative to the position of the link/button that triggered it.

So, in my horizontal list of menu nav items, no matter the position of the triggering element, every single dropdown will be the same width and start from the same left position. The left position of the dropdown should be the left position of the container (not the triggering button), and the width of the dropdown should be the full width of the container, not the full width of the body.

Btw, I'm prototyping here, so a quick hack is entirely acceptable.

The reason why the dropdown will appear right below the triggering element when you click it is because the triggering element has relative positioning and the dropdown menu has absolute positioning and 100% top and 0 left, which will push the dropdown menu down and align its left to the triggering element.

Let's say we have a class called .mega-menu that transforms a regular dropdown menu to a mega menu, and we have a structure like the following:

<li class="nav-item dropdown mega-menu">
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
        Dropdown 2
    </a>
    <div class="dropdown-menu">
        <div class="container-fluid">
            <div class="row flex-grow-1">
                <div class="col-md-6">
                    <div class="jumbotron">
                        <h2>
                            Hello World!
                        </h2>
                        <p>
                            Welcome to our mega menu!
                        </p>
                    </div>
                </div>
                <div class="col-md-6">
                    <h3>
                        Feature 1
                    </h3>
                </div>
            </div>
        </div>
    </div>
</li>

If you want the dropdown menu to align with the container and take up its full width, the first thing you would need to do is to get rid of the relative positioning on the triggering element so that the dropdown menu won't be restricted just under the triggering element.

You might wonder where it will be absolute from if it doesn't have a relative parent anymore. Luckily all the way up to the navbar, <nav class="navbar" /> has relative positioning! That's perfect!

.dropdown.mega-menu, 
.dropleft.mega-menu, 
.dropright.mega-menu, 
.dropup.mega-menu {
    position: static;
}

And then the only thing left is to set the left and right of the dropdown menu to 0 so that it will align to the container. To make it look nicer, you can have a negative margin-top so that the menu's top border will merge into the navbar:

.dropdown.mega-menu, 
.dropleft.mega-menu, 
.dropright.mega-menu, 
.dropup.mega-menu {
    position: static;
}

.mega-menu .dropdown-menu {
    left: 0;
    right: 0;
    margin-top: -1px;
}

The mega menu should be good to go!

If you want to put .container-fluid inside the mega menu, there is one more thing you need to do: put flex-grow-1 or w-100 on any row there:

<div class="dropdown-menu">
    <div class="container-fluid">
        <div class="row flex-grow-1">
            <div class="col-md-6">
...

I am not sure if this is a bug or not though, but you do have to do that in order to have the rows take up 100% width:

demo: https://jsfiddle.net/davidliang2008/y6a8qu2h/40/

Disclaimer: I didn't work on the dropdowns for mobile views.