Input size smaller than "form-control-sm" in bootstrap 4 e.g. xs?

Question

Is there a class to use to size dropdowns, input fields etc with something smaller than form-control-sm? I don't see any, so custom class is needed?

I'm using the CDN for bootstrap4 css and want to use a default font size of .75em for all text, but the bootstrap inputs are getting rendered at .875em.

What is a good way to override this and make them match?

Answer 1

You'd have to go the custom way

A good way can be to cut down other things in addition to cutting down the font size from .875em to .75em; this would include the height, padding too.

 .form-control-xs { height: calc(1em + .375rem + 2px) !important; padding: .125rem .25rem !important; font-size: .75rem !important; line-height: 1.5; border-radius: .2rem; }

 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="container"> <h2>Form Control Sizing</h2> <p>Change the size of the form control with .form-control-sm or .form-control-lg:</p> <form action="/action_page.php"> <div class="form-group"> <input type="text" class="form-control form-control-xs" placeholder="Extra small form control" name="text0"> </div> <div class="form-group"> <input type="text" class="form-control form-control-sm" placeholder="Small form control" name="text1"> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Default form control" name="text2"> </div> <div class="form-group"> <input type="text" class="form-control form-control-lg" placeholder="Large form control" name="text3"> </div> </form> </div>