96

I just migrated to bootstrap 4 and my xs buttons no longer seem to be extra small!

Looking at the docs for buttons in bootstrap 4 I don't see the option for extra small buttons?

Can anyone confirm this for me?

Thanks!

cvrebert
  • 9,075
  • 2
  • 38
  • 49
Dragan
  • 3,713
  • 12
  • 42
  • 59
  • As you stated from the [Docs](http://v4-alpha.getbootstrap.com/components/buttons/#sizes) and if you check the [source](https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css), nope. – vanburen Nov 25 '15 at 07:54
  • 2
    @vanburen, I guess I can just write my own css class called .btn-xs then aye – Dragan Nov 25 '15 at 07:56

7 Answers7

111

@rifton007 posted a quick fix in the GitHub issue on this subject. Add this in your css file:

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

Demo:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

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

<button class="btn btn-primary btn-xs">♡</button>
<button class="btn btn-primary btn-sm">♡</button>
<button class="btn btn-primary">♡</button>
<button class="btn btn-primary btn-lg">♡</button>

source

Edit:

later on the issue, @deadmann replied that he dig up a little in old BS3 documentation and extract the following code:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

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

<button class="btn btn-primary btn-xs">♡</button>
<button class="btn btn-primary btn-sm">♡</button>
<button class="btn btn-primary">♡</button>
<button class="btn btn-primary btn-lg">♡</button>
aloisdg
  • 22,270
  • 6
  • 85
  • 105
  • 8
    **+1** for Referencing the Original Source-Link and giving **Rifton007** his due credit. In the Source-Link **Squadwuschel** made an excellent point about how not everyone of us are writing responsive mobile apps and how sometimes you just want to slip a Button in a Grid for a Desktop experience that doesn't over-expand every row it is in. – MikeTeeVee Jul 09 '19 at 18:08
  • .btn-group-xs > .btn, .btn-xs { padding: 0.40rem .4rem; font-size: .775rem; line-height: .5; border-radius: .2rem; } – Project Mayhem Oct 04 '19 at 08:30
  • 1
    Yes, like @MikeTeeVee said, "sometimes you just want to slip a Button in a Grid for a Desktop experience that doesn't over-expand every row it is in". That's the big one. What were they thinking? – Vanity Slug - codidact.com Oct 18 '19 at 19:32
  • 1
    Validated as working with Bootsrap 5, thanks! i used this class example for a button group which worked nicely, but also I added "w-100" to the button group class which ensures that the button group expands to the full width of the parent div so it alligns up nicely. – OJB1 Oct 30 '21 at 09:00
15

Yes there is no btn-xs in Bootstrap 4, you will have to create this class your self. In the scss/mixins/_buttons.scss you will find the mixin called button-size so in you SCSS code use the following code:

.btn-xs {
  // line-height: ensure proper height of button next to extra small input 
  @include button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius);
}
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
13

you need to define your own xs style and variable this matches best for me and comes close to the bootstrap 3 btn-xs size:

Bootstrap 4 Alpha

$btn-padding-x-xs: .38rem !default;
$btn-padding-y-xs: .18rem !default;

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

Bootstrap 4 Beta 2

$btn-padding-x-xs:  .20rem !default;
$btn-padding-y-xs:  .12rem !default;
$input-btn-line-height-xs: 1.1 !default;

.btn.btn-xs {
   // line-height: ensure proper height of button next to small input
   @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $input-btn-line-height-xs, $btn-border-radius-sm);
}
squadwuschel
  • 3,328
  • 3
  • 34
  • 45
7

I have extracted CSS from the Old Version of Bootstrap. You can use the below mentioned CSS style in your custom stylesheet. With the help of class named btn-xs, you can use the old style for your button.

Good Luck.

button
{
  margin-top: 10px;
    margin-left: 10px;
}
.btn-xs
{
    padding: 1px 5px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    border-radius: 3px !important;
}
<link rel="stylesheet" href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css">

<button class="btn btn-primary btn-xs">This is Small Button</button>
John Doe
  • 123
  • 1
  • 8
4

I added this as Bass Jobsen suggested:

.btn-xs
  +button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height, $border-radius)

Using the default _variables.scss of Bootstrap and this was the result:

btn-xs

Hope it helps you.

Jorge Sampayo
  • 838
  • 9
  • 24
  • button-size() is no longer a valid function. – Routhinator Mar 08 '18 at 20:59
  • normally it is: Main repo: https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_buttons.scss#L99 Ruby repo: https://github.com/twbs/bootstrap-rubygem/blob/master/assets/stylesheets/bootstrap/mixins/_buttons.scss#L99 – Jorge Sampayo Mar 09 '18 at 22:34
  • Yeah I realized that a few hours later. Should update the answer to mention that mixin must be manually loaded before your vars to work. – Routhinator Mar 10 '18 at 00:04
2

There is no longer available the option of extra small button in bootstrap 4. Only 3 sizes are available, large, normal, small.

Rushikesh Shelke
  • 73
  • 1
  • 4
0

This works in Bootstrap 5

.btn-xs {
    @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-xs, $border-radius);
}
Iridium
  • 53
  • 5