BOOTSTRAP 5: Form Input Width CSS Utilities

Simple CSS addition to Bootstrap 5 to handle form input width. Graceful mobile response as well.

Updated July 31 2026 to use percent for width. 

.form-sm-1  { width: 8.33%;  }
.form-sm-2  { width: 16.67%; }
.form-sm-3  { width: 25%;	}
.form-sm-4  { width: 33.33%; }
.form-sm-5  { width: 41.67%; }
.form-sm-6  { width: 50%;	}
.form-sm-7  { width: 58.33%; }
.form-sm-8  { width: 66.67%; }
.form-sm-9  { width: 75%;	}
.form-sm-10 { width: 83.33%; }
.form-sm-11 { width: 91.67%; }
.form-sm-12 { width: 100%;   }
.form-sm-1-inline  { width: calc(8.33% - 0.5rem);  display: inline-block; margin-right: 0.5rem; }
.form-sm-2-inline  { width: calc(16.67% - 0.5rem); display: inline-block; margin-right: 0.5rem; }
.form-sm-3-inline  { width: calc(25% - 0.5rem);	display: inline-block; margin-right: 0.5rem; }
.form-sm-4-inline  { width: calc(33.33% - 0.5rem); display: inline-block; margin-right: 0.5rem; }
.form-sm-5-inline  { width: calc(41.67% - 0.5rem); display: inline-block; margin-right: 0.5rem; }
.form-sm-6-inline  { width: calc(50% - 0.5rem);	display: inline-block; margin-right: 0.5rem; }
.form-sm-7-inline  { width: calc(58.33% - 0.5rem); display: inline-block; margin-right: 0.5rem; }
.form-sm-8-inline  { width: calc(66.67% - 0.5rem); display: inline-block; margin-right: 0.5rem; }
.form-sm-9-inline  { width: calc(75% - 0.5rem);	display: inline-block; margin-right: 0.5rem; }
.form-sm-10-inline { width: calc(83.33% - 0.5rem); display: inline-block; margin-right: 0.5rem; }
.form-sm-11-inline { width: calc(91.67% - 0.5rem); 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;
  }
}