title: How can I make a tile/ grid dropdown with images using Bootstrap?
body: <p>I want to make a menu like the Microsoft apps selection like the image shown in the link below:</p>
  
  <p>Microsoft Menu example:</p>
  
  <p><img src="https://i.stack.imgur.com/Utbyg.png" alt="image path"></p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  
  &lt;div class="dropdown"&gt;
      &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown"&gt;
          &lt;!--aria-label="Left Align"--&gt;
          &lt;span class="glyphicon glyphicon-th"&gt;&lt;/span&gt;
      &lt;/button&gt;
  
      &lt;ul class="dropdown-menu" aria-labelledby="dropdownmenu"&gt;
  
          &lt;div class="row-fluid"&gt;
  
              &lt;div class="col-sm-4"&gt;
  
                  &lt;li&gt;
                      &lt;a href="#" title="1"&gt;&lt;img src="1.png"&gt;&lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;a href="#" title="2"&gt;&lt;img src="2.png"&gt;&lt;/a&gt;
                  &lt;/li&gt;
  
              &lt;/div&gt;
  
              &lt;div class="col-sm-4"&gt;
  
                  &lt;li&gt;
                      &lt;a href="#" title="3"&gt;&lt;img src="3.png"&gt;&lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;a href="#" title="4"&gt;&lt;img src="4.png"&gt;&lt;/a&gt;
                  &lt;/li&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container-fluid {
      margin-top: 1%;
  }
  
  div.col-sm-4 {
      margin-right: -14%
  }
  
  img {
      position: static;
      width: 60%;
      margin: 5%;
      border-radius: 5%;
  }
  
  ul.dropdown-menu {
      max-width: 40%;
      max-height: 960%;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is what I have tried but,
  The biggest problem is that the background of the dropdown is bigger than the content(the images) and I don't know how to make the background fit the size of the images</p>
  
  <p>Thank you for your help!</p>