<!--Navbar-->

  <nav class="navbar navbar-expand-lg navbar-dark primary-color">

​

    <!-- Navbar brand -->

    <a class="navbar-brand" href="#">Navbar</a>

​

    <!-- Collapse button -->

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"

      aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

​

    <!-- Collapsible content -->

    <div class="collapse navbar-collapse" id="basicExampleNav">

​

      <!-- Links -->

      <ul class="navbar-nav mr-auto">

         <li class="nav-item dropdown">

              <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Four Column <b class="caret"></b></a>

              <ul class="dropdown-menu multi-column columns-4">

                <div class="row">

                  <div class="col-sm-3">

                    <ul class="multi-column-dropdown">

                      <li><a href="#">Action</a></li>

                      <li><a href="#">Another action</a></li>

                      <li><a href="#">Something else here</a></li>

                      <li class="divider"></li>

                      <li><a href="#">Separated link</a></li>

                      <li class="divider"></li>

                      <li><a href="#">One more separated link</a></li>

                    </ul>

                  </div>

                  <div class="col-sm-3">

                    <ul class="multi-column-dropdown">

                      <li><a href="#">Action</a></li>

                      <li><a href="#">Another action</a></li>

                      <li><a href="#">Something else here</a></li>

                      <li class="divider"></li>

                      <li><a href="#">Separated link</a></li>

                      <li class="divider"></li>

                      <li><a href="#">One more separated link veeeery long one</a></li>

                    </ul>

                  </div>

                  <div class="col-sm-3">

                    <ul class="multi-column-dropdown">

                      <li><a href="#">Action</a></li>

                      <li><a href="#">Another action</a></li>

                      <li><a href="#">Something else here</a></li>

                      <li class="divider"></li>

                      <li><a href="#">Separated link</a></li>

                      <li class="divider"></li>

                      <li><a href="#">One more separated link</a></li>

                    </ul>

                  </div>

                   <div class="col-sm-3">

                    <ul class="multi-column-dropdown">

                      <li><a href="#">Action</a></li>

                      <li><a href="#">Another action</a></li>

                      <li><a href="#">Something else here</a></li>

                      <li class="divider"></li>

                      <li><a href="#">Separated link</a></li>

                      <li class="divider"></li>

                      <li><a href="#">One more separated link</a></li>

                    </ul>

                  </div>

                </div>

              </ul>

          </li>

​

      </ul>

      <!-- Links -->

    </div>

    <!-- Collapsible content -->

​

  </nav>

  <!--/.Navbar-->