title: How to put buttons on the leaflet map
body: <p>I am using leaflet map in my application &amp; using bootstrap for responsiveness.
  I have some buttons bellow that map.
  It looks something like this.</p>
  
  <p><img src="https://i.stack.imgur.com/Tg3gr.png" alt="enter image description here"></p>
  
  <p>But I want to overlap buttons on map like this</p>
  
  <p><img src="https://i.stack.imgur.com/kHaCg.png" alt="enter image description here"></p>
  
  <p>Here is my HTML </p>
  
  <pre><code>        &lt;div class="span9" style="height:100%"&gt;
          &lt;div id="map"&gt;&lt;/div&gt;
          &lt;div style="padding-left: 10px;padding-right: 10px"&gt;
              &lt;input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" /&gt;
              &lt;input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3" /&gt; 
              &lt;input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3" /&gt;
              &lt;span id="studentsCount" class="lblStyle span3"&gt; Ikke rutesat: &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>My css for map</p>
  
  <pre><code>html, body, #map, .row-fluid{
   height: 100%;
   }
  
   #map {
  width: 100%;
  }
  
  
  .btnStyle {
  background-color: #4D90FE; 
  background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED); 
  border: 1px solid #3079ED; 
  color: #FFFFFF;
   padding: 4px;
   margin-top: 4px;
   margin-bottom: 4px;
   width:100%
  }
  
  .lblStyle {
  color: red;
   padding: 4px;
   margin-top: 4px;
   margin-bottom: 4px;
  width: 100%;
  font-weight: bold;
  }
  </code></pre>