Bootstrap 3 & Boostrap 4 & Bootstrap 5 - input-xs (smaller than sm)

Question

I wasted a lot of time searching a way to make my own xs size (smaller than the small) for input and input group, so here's the code!

Peter Butkovic upload the bug/request to the bootstrap github:
https://github.com/twbs/bootstrap/issues/15107

with the following response from theirs:

We won't be adding it to v3 and I don't think we'll have the xs buttons even in v4, but I'll keep it in mind for that if we opt to keep it around.

Still working for Bootstrap 5

Answer 1

If you are using bootstrap-sass, then you can leverage input-size mixin:

$input-height-xs: 27px; // adjust it according to your theme.

@include input-size('.input-xs', $input-height-xs, $padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $input-border-radius-small);