title: dropdown in bootstrap + instead of a list I want X columns of list from dropdown
body: <p>Here is my <a href="https://jsfiddle.net/HattrickNZ/vj35d1cu/1/" rel="nofollow">Fiddle</a>.</p>
  
  <p>Under <code>Dropdown1</code> is a list of actions, presented in 1 column.</p>
  
  <p>I want to be able to present this list across more than 1 columns, lets say 5, or the page width.</p>
  
  <p>I am hoping there is some <code>class</code> in bootstrap CSS that I can use to achieve this, but I may have to do some CSS.</p>
  
  <p>How can I achieve this? </p>
  
  <pre><code>&lt;li class="dropdown"&gt;
    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Dropdown1 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>EDIT1</strong></p>
  
  <p><a href="https://jsfiddle.net/HattrickNZ/vj35d1cu/4/" rel="nofollow">this</a> is what I am thinking using:</p>
  
  <pre><code>.dropdown-menu {
      height: 300%;
      width: 400%;
  }
  </code></pre>
  
  <p>but his controls the dropdown area, I juest need to spread out the actions to fill this area.</p>
  
  <p><strong>EDIT2</strong></p>
  
  <p><a href="https://jsfiddle.net/HattrickNZ/vj35d1cu/5/" rel="nofollow">another</a> possible way but this presents its own problems </p>
  
  <pre><code>ul .dropdown-menu li{
      float: left;
      width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns
  }
  </code></pre>