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?

Carol Skelly · Answer 1 · 2017-07-11T23:14:27.993

38

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

edited Jul 11 '17 at 23:14

answered Nov 12 '13 at 18:55

Carol Skelly

351,302
90
710
624

score 6 · Answer 2 · edited Sep 07 '17 at 10:18

6

Expanding ZimSystem answer..

@media (max-width: 768px) {
  .btn {
    font-size:11px;
    padding:4px 6px;
  }
}

@media (min-width: 768px) {
  .btn {
    font-size:12px;
    padding:6px 12px;
  }
}

@media (min-width: 992px) {
  .btn {
    font-size:14px;
    padding:8px 12px;
  }
}

@media (min-width: 1200px) {
  .btn {
    padding:10px 16px;
    font-size:18px;
  }
}

edited Sep 07 '17 at 10:18

Stéphane Bruckert

21,706
14
92
130

answered Sep 17 '16 at 20:43

Awesome, this works perfectly! Exactly what I was after. – Sean McCarthy Jun 28 '20 at 22:55

Gene Parcellano · Answer 3 · 2017-09-25T14:29:29.047

Just wanted to add another alternative. If you're using Bootstrap's LESS you can also use the mixins.

If you look inside Bootstrap's LESS folder (bootstrap > less > mixins) you will see the buttons.less file. If you open that up you will find the .button-size() mixin.

Here is the mixin:

.button-size(
    vertical padding;
    horizontal padding;
    font size;
    line height;
    border-radius
);

Here's how you dynamically create a button:

You will need to pass certain parameters. It will brake if one is missing

.button-size(10px; 10px; 1em; 1.5em; 0);

Here's an example using the existing Bootstrap LESS variables:

    .btn {
        @media (min-width: @screen-sm-min) {
            .button-size(
                @padding-small-vertical;
                @padding-small-horizontal;
                @font-size-small;
                @line-height-base;
                @border-radius-small
            );
        }
        @media (min-width: @screen-md-min) {
            .button-size(
                @padding-large-vertical;
                @padding-large-horizontal;
                @font-size-large;
                @line-height-base;
                @border-radius-large
            );
        }
    }

resize buttons responsively in bootstrap

3 Answers3

Linked