Bootstrap 5 Form-Control Width CSS Utilities
Bootstrap 5 form-control width utilities.
There is no reason to use so many div tags to simply change the width of Bootstrap 5 form inputs so here is a CSS utility addon to help make this faster.
by Scot Ranney
I love using the Bootstrap 5 CSS framework for my projects. Modules, site development, even quick pages that I want to print out and don't feel like using Libre Office.
One thing I don't like is the amount of div tagss you need to control how wide form fields are. Up to Bootstrap 3 you could use column based CSS, like col-sm-3, to control the width, but once Bootstrap 4 went to flex based grids that didn't work anymore.
So I whipped up a simple set of CSS rules that are used along side form-control to handle this. Enjoy.
/* Load this AFTER bootstrap.min.css so it wins the cascade without !important */
/* Block versions (stack vertically, same as default form-control behavior) */
.form-sm-1 { width: 4.5rem; }
.form-sm-2 { width: 6rem; }
.form-sm-3 { width: 7.5rem; }
.form-sm-4 { width: 9rem; }
.form-sm-5 { width: 10.5rem; }
.form-sm-6 { width: 12rem; }
.form-sm-7 { width: 14rem; }
.form-sm-8 { width: 16rem; }
.form-sm-9 { width: 18rem; }
.form-sm-10 { width: 20rem; }
.form-sm-11 { width: 22rem; }
.form-sm-12 { width: 100%; }
/* Inline versions (sit side-by-side, with a small gutter so they don't touch) */
.form-sm-1-inline { width: 4.5rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-2-inline { width: 6rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-3-inline { width: 7.5rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-4-inline { width: 9rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-5-inline { width: 10.5rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-6-inline { width: 12rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-7-inline { width: 14rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-8-inline { width: 16rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-9-inline { width: 18rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-10-inline { width: 20rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-11-inline { width: 22rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-12-inline { width: 100%; display: inline-block; margin-right: 0.5rem; }
Usage: Super simple, just add one of these classes after form-control.
<label class="form-label mt-2">Enter a number!</label> <input type="number" class="form-control form-sm-2" ....>
Install: If you're new to web design there are two ways to use this CSS on your site.
1. Add it inline to the global HEAD tag: Not really recommended but quick.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<style>
/* Load this AFTER bootstrap.min.css so it wins the cascade without !important */
/* Block versions (stack vertically, same as default form-control behavior) */
.form-sm-1 { width: 4.5rem; }
.form-sm-2 { width: 6rem; }
.form-sm-3 { width: 7.5rem; }
.form-sm-4 { width: 9rem; }
.form-sm-5 { width: 10.5rem; }
.form-sm-6 { width: 12rem; }
.form-sm-7 { width: 14rem; }
.form-sm-8 { width: 16rem; }
.form-sm-9 { width: 18rem; }
.form-sm-10 { width: 20rem; }
.form-sm-11 { width: 22rem; }
.form-sm-12 { width: 100%; }
/* Inline versions (sit side-by-side, with a small gutter so they don't touch) */
.form-sm-1-inline { width: 4.5rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-2-inline { width: 6rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-3-inline { width: 7.5rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-4-inline { width: 9rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-5-inline { width: 10.5rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-6-inline { width: 12rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-7-inline { width: 14rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-8-inline { width: 16rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-9-inline { width: 18rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-10-inline { width: 20rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-11-inline { width: 22rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-12-inline { width: 100%; display: inline-block; margin-right: 0.5rem; }
</style>
</head>
<body>
... body content stuff ...
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>
2. Add it as a Stylesheet (recommended)
This requires you to take the raw CSS and make a text file named something like bs5_input_widths.css
Upload the file to the css directory on your site, such as /css/bs5_input_widths.css, and then call it in the global head tag:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> <link rel="stylesheet" href="/css/bs5_input_widths.css"> </head> <body> ... body content stuff ... <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script> </body> </html>
Related Articles
These articles might be interesting for you as well: