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 tags needed to control form fields widths. 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. For my use there is one breakpoint that makes it full width when it gets below sm.
/* 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; }
@media (max-width: 575.98px) {
.form-sm-1,
.form-sm-2,
.form-sm-3,
.form-sm-4,
.form-sm-5,
.form-sm-6,
.form-sm-7,
.form-sm-8,
.form-sm-9,
.form-sm-10,
.form-sm-11,
.form-sm-1-inline,
.form-sm-2-inline,
.form-sm-3-inline,
.form-sm-4-inline,
.form-sm-5-inline,
.form-sm-6-inline,
.form-sm-7-inline,
.form-sm-8-inline,
.form-sm-9-inline,
.form-sm-10-inline,
.form-sm-11-inline {
width: 100% !important;
display: block !important;
margin-right: 0 !important;
}
}
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 after the Bootstrap 5. Not 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; }
@media (max-width: 575.98px) {
.form-sm-1,
.form-sm-2,
.form-sm-3,
.form-sm-4,
.form-sm-5,
.form-sm-6,
.form-sm-7,
.form-sm-8,
.form-sm-9,
.form-sm-10,
.form-sm-11,
.form-sm-1-inline,
.form-sm-2-inline,
.form-sm-3-inline,
.form-sm-4-inline,
.form-sm-5-inline,
.form-sm-6-inline,
.form-sm-7-inline,
.form-sm-8-inline,
.form-sm-9-inline,
.form-sm-10-inline,
.form-sm-11-inline {
width: 100% !important;
display: block !important;
margin-right: 0 !important;
}
}
</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 after Bootstrap 5:
<!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>
Some Examples - These break down to 100% width on mobile.
form-sm-3
form-sm-6
form-sm-6-inline
