Responsive Buttons

This bootstrap snippet called "Responsive Buttons" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: responsive,buttons,css,html,code,bootstrap,snippet,btn-group

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


                        
<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>                    

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


                        
  
@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;
}			                                  
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.1

Created: Jan 13th 2015, 16:02

Views: 554