title: How can I create navbar drop-down with multiple columns in Bootstrap?
body: <p>I want to know how to create a navbar drop-down containing multiple vertical columns using Bootstrap. In my case, my links are categorized and I want one column for each category type.</p>
  
  <p>Here is an example of a Bootstrap navbar drop-down with multiple columns:</p>
  
  <p><a href="https://i.stack.imgur.com/PwDdi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PwDdi.png" alt="Example of a Bootstrap navbar drop-down with multiple columns"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
      &lt;ul class="nav navbar-nav dropdown"&gt;
          &lt;li class="active"&gt;&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Online Retailers &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                  &lt;li class="dropdown-header "&gt;&lt;h4&gt; Get 100% off on your first order. &lt;/h4&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Domino's Pizza&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Food Panda&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Mc Donalds&lt;/a&gt;&lt;/li&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 1-2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 1-3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Hey Foodies &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                  &lt;li class="dropdown-header "&gt;&lt;h4&gt; Get 100% off on your first order. &lt;/h4&gt;&lt;/li&gt;
                  &lt;li class="divider"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Domino's Pizza&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Food Panda&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Mc Donalds&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Pizza Hut&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Tasty Khana&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Tiny Owl&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;KFC&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>