btn-xs no longer a valid option in bootstrap 4?

Question

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!

Answer 1

@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>

Answer 2

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); }