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?
Set the heights of input elements using classes like . input-lg and . input-sm . Set the widths of elements using grid column classes like .
For default size . form-control is used, for smaller size we can use . form-control class along with . form-control-sm and for larger size we can use .
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With