How to create responsive buttons in bootstrap3?

Question

I trying to display btn-sm for 768px screens but it keeps showing me btn-xs.

Here is my HTML code

<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3 col-sm-offset-3">
    <button name="magnet" class="btn btn-success btn-sm btn-xs btn-lg">
        <em class="glyphicon glyphicon-home"></em>
        Home
    </button>

    <button name="magnet" class="btn btn-danger btn-sm btn-xs">
        <em class="glyphicon glyphicon-download"></em>
        Download
    </button>
</div>

Is it possible to achieve this task without using media queries?

Answer 1

Your buttons won't magically scale with HTML-only. So you've got two options.

Option #1 : duplicates

This one is the ugliest one, but it fit to your needs as it doesn't require additionnal media queries :

<div class="container">
  <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3 col-sm-offset-3">
    <button name="magnet" class="btn btn-success btn-xs visible-xs"><em class="glyphicon glyphicon-home"></em> Home</button>
    <button name="magnet" class="btn btn-success btn-sm visible-sm"><em class="glyphicon glyphicon-home"></em> Home</button>
    <button name="magnet" class="btn btn-success btn-lg visible-md visible-lg"><em class="glyphicon glyphicon-home"></em> Home</button>

    <button name="magnet" class="btn btn-danger btn-xs visible-xs"><em class="glyphicon glyphicon-download"></em> Download</button>
    <button name="magnet" class="btn btn-danger btn-sm visible-sm"><em class="glyphicon glyphicon-download"></em> Download</button>
    <button name="magnet" class="btn btn-danger btn-lg visible-md visible-lg"><em class="glyphicon glyphicon-download"></em> Download</button>
  </div>
</div>

Bootply

Option #2 : media queries

And ya... finally. This is the right way to do this.

<div class="container">
  <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3 col-sm-offset-3">
    <button name="magnet" class="btn btn-success btn-autosize">
      <em class="glyphicon glyphicon-home"></em> 
      Home
    </button>

    <button name="magnet" class="btn btn-danger btn-autosize">
      <em class="glyphicon glyphicon-download"></em> 
      Download
    </button>
  </div>
</div>

.btn-autosize {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
@media screen and (min-width: 768px) {
  .btn-autosize {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
}
@media screen and (min-width: 992px) {
  .btn-autosize {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
  }
}

Bootply