Bootstrap: Why wars btn-xs removed

[squadwuschel]

I've tried to find a issue where a discussion was why the btn-xs was removed from Bootstrap? Its was very helpfull in Bootstrap 3 for mee in many many cases.

Condensed Tables with buttons so the text fits to the right hight, .....

would be cool if the user could decide what to use and not only to remove the Items you think the user should not use any more. Because bootstrap is used from so many ppl out there there are many pages which need the -xs

[philmayfield]

The -xs classes are all still there, they just dont have the -xs prefix any longer.

The idea being (presumably) that if you are only going to define one responsive utility to cover all screen sizes, why would you need to specify that it starts at xs?

So something like this:
<div class="col-xs-12 col-md-6 col-lg-4"> <p class="text-xs-center"></p>
becomes
<div class="col-12 col-md-6 col-lg-4"> <p class="text-center"></p>

[browner12]

I don't think that's really applicable for this issue. the xs that was removed had to do with specific screen sizes, and this has to do with the arbitrary size of an element.

for this case the no prefix options actually sits between btn-sm and btn-lg.

[squadwuschel]

not every developer is creating mobile first Apps where he must be carefull with the buttons sizes. Bootstrap is so a great ui framework I am only writing desktop websites with it.

I am just using the xs buttons e.g. in Tables they fit very good with the condensed one so that the line height looks good.

It would be nice if you had the possibility to have the xs avaiable to use it because bootstrap are using so many ppl with so many different requirements and I think the xs feature from Bootstrap one is one of my favorite features to save some space in applications where you need to place many content (its not perfekt, but you know the buisness requirements and there you don't have the choice every time).

[bardiharborow]

From https://v4-alpha.getbootstrap.com/migration/#buttons:

Dropped the .btn-xs class entirely as .btn-sm is proportionally much smaller than v3's.

Duplicate of #17029. I'm closing out as this is intentional. You can use custom CSS or adjust $btn-line-height. We have a lot of things we have to juggle and we can't keep every feature as the bloat would be massive.

[rifton007]

If it can help someone. Add this in your css file.

.btn-group-xs > .btn, .btn-xs {
    padding  : .25rem .4rem;
    font-size  : .875rem;
    line-height  : .5;
    border-radius : .2rem;
}

[hersche]

i was on that "issue" by a upgrade as well..

like @squadwuschel i need quartered symbols, and it was too width for me by only replace btn-xs with btn-sm (like no reaction).

the problem and solution: the btn-class (pure btn, no xs or sm) was there. i removed it and it worked.

would be maybe a nice notice in the migrate-guide and may it helps someone googling this.

[nikolawannabe]

Since we build our own customized version using less rather than using base CSS, I did the following to restore it:

In our variables.scss which overrides some of the items from _variables.scss:

$font-size-xs:                ($font-size-base * .75) !default;
$line-height-xs: 1.5 !default;

-- snip --
$input-btn-padding-y-xs:      .125rem !default;
$input-btn-padding-x-xs:      .25rem !default;
$input-btn-font-size-xs:      $font-size-xs !default;
$input-btn-line-height-xs:    $line-height-xs !default;

-- snip --
$btn-padding-y-xs:            $input-btn-padding-y-xs !default;
$btn-padding-x-xs:            $input-btn-padding-x-xs !default;
$btn-font-size-xs:            $input-btn-font-size-xs !default;
$btn-line-height-xs:          $input-btn-line-height-xs !default;

-- snip --
$border-radius-xs:            .1rem !default;
$btn-border-radius-xs:        $border-radius-xs !default;

then to our buttons.scss which extends _buttons.scss, I added:

.btn-xs {
  @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $btn-font-size-xs, $btn-line-height-xs, $btn-border-radius-xs);
}

[balthild]

We could use badges instead of .btn-xs in some cases.

[mledwards]

Did you used to use all of the button sizes? If not, just give .btn-sm the same values as used to give .btn-xs.

[oceceli]

I just don't understand why that beautiful useful -xs buttons deprecated and devs talking angrily about it... Just like the glyphicons..

[deadmann]

From https://v4-alpha.getbootstrap.com/migration/#buttons:

Dropped the .btn-xs class entirely as .btn-sm is proportionally much smaller than v3's.

Duplicate of #17029. I'm closing out as this is intentional. You can use custom CSS or adjust $btn-line-height. We have a lot of things we have to juggle and we can't keep every feature as the bloat would be massive.

if it become so much of a duplicate, you should consider it more :|

[deadmann]

If it can help someone. Add this in your css file.

.btn-group-xs > .btn, .btn-xs {
    padding  : .25rem .4rem;
    font-size  : .875rem;
    line-height  : .5;
    border-radius : .2rem;
}

At first it didn't feel right for me using icons and etc... so i dig up a little in old BS3 documentation, and i get properties of one btn-xs button...
It was like this:

.btn-group-xs > .btn, .btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

Now it feel more like what it was and proportion it should have