Bootstrap snippet and html example. Responsive Buttons

                        
<div class="container btn-container">
    <div class="row">
       <div class="col-md-12">
            <h2>Bootstrap Responsive Buttons<p class="lead text-muted">Resize the browser to demonstrate</p></h2>
           	<button name="button" class="btn btn-default btn-responsive">Default</button>
            <button name="button" class="btn btn-primary btn-responsive">Primary</button>
         	<button name="button" class="btn btn-info btn-responsive">Info</button>
            <a class="btn btn-danger btn-responsive" href="#">Danger</a>
            <a class="btn btn-warning btn-responsive" href="#">Warning</a>
            <a class="btn btn-success btn-responsive" href="#">Success</a>
       </div> 
   </div>
   
    <div class="row">
       <div class="col-md-12">
            <div class="btn-group">
              <button class="btn btn-info btn-responsive">Left</button>
              <button class="btn btn-info btn-responsive">Middle</button>
              <button class="btn btn-info btn-responsive">Right</button>
            </div>
       </div>
   </div>
   
    <div class="row">
       <div class="col-md-12">
              <button class="btn btn-primary btn-sm btn-responsive">Small</button>
              <button class="btn btn-primary btn-responsive">Medium</button>
              <button class="btn btn-primary btn-lg btn-responsive">Large</button>
       </div>
    </div>
</div>                    

                        
  
@media (max-width: 768px) {
  .btn-responsive {
    padding:2px 4px;
    font-size:80%;
    line-height: 1;
    border-radius:3px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding:4px 9px;
    font-size:90%;
    line-height: 1.2;
  }
}

.btn-container .row {
    margin-top:30px;
}