title: Mega menu dropdown with bootstrap 4
body: <p>I try to reproduce  <a href="https://codepen.io/Omi236/pen/vZPgjz" rel="nofollow noreferrer">Codepen</a> , in Bootstrap 4. </p>
  
  <p>The following <a href="https://codepen.io/dujp/pen/bYLdyX/" rel="nofollow noreferrer">Codepen</a> is where I arrived (drop down with 2 columns), helping my tutorials on the net. </p>
  
  <p>Navbar HTML</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar navbar-dark bg-primary"&gt;
      &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
          aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class="collapse navbar-collapse" id="navbarNavDropdown"&gt;
          &lt;ul class="navbar-nav"&gt;
              &lt;li class="nav-item dropdown has-mega-menu"&gt;
                  &lt;a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                      aria-expanded="false"&gt;Dropdown&lt;/a&gt;
  
                  &lt;div class="dropdown-menu"&gt;
                      &lt;div class="px-0 container container-sm"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-6 col-md-x"&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Or a link&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="col-6 col-md-x"&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Or a link&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Or a link&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@media screen and (min-width: 576px) {
    .has-mega-menu .container-sm {
      width: 540px;
    }
  }
  
  @media screen and (min-width: 768px) {
    .has-mega-menu .container-md {
      width: 720px;
    }
  }
  
  @media screen and (min-width: 992px) {
    .has-mega-menu .container-lg {
      width: 960px;
    }
  }
  
  @media screen and (min-width: 1200px) {
    .has-mega-menu .container-xl {
      width: 1140px;
    }
  }
  </code></pre>
  
  <p>I have two problems:</p>
  
  <ul>
  <li>This design is not responsive (the two columns of the dropdown should
  be placed under each other on small screens)</li>
  <li>I would like the megamenu to occupy the full width of the navbar, as
  on the BS3 example, and be responsive</li>
  </ul>