responsive design - resize buttons responsively in bootstrap

Question

I'm using bootstrap, and the CSS is responsive, so it scales down nicely on smaller devices. However, I would like buttons to shrink too when the viewport is smaller (eg. on mobile).

<button name="button" type="submit" id="edit_button-46" class="btn btn-default" value="edit" >Edit</button>

Basically on smaller devices, the class btn-xs should be added to all buttons.

I can probably accomplish this via Jquery, but was wondering if bootstrap already had this functionality?

Answer 1

You could use CSS @media queries to scale the buttons accordingly..

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

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

Demo: http://bootply.com/93706

Update for Bootstrap 4:
Bootstrap 4 responsive button size