Bootstrap snippet: Responsive Buttons

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: responsive,buttons,css,html,code,bootstrap,snippet,btn-group

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

Responsive Buttons

  Jan 13th 2015, 16:02