Form field sizing

Created by: WinterSilence

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

1. checkbox/switch, radio, range inputs and textareas don't have sizing classes as form-control-sm and form-control-lg. grouply:

<div class="form-check form-check-sm mb-3">
  <!-- + "form-check-input-sm" -->
  <input class="form-check-input" type="checkbox" id="remember-me">
  <!-- + "form-check-label-sm" -->
  <label class="form-check-label" for="remember-me">Remember me</label>
</div>

or directly:

<div class="form-check mb-3">
  <input class="form-check-input form-check-input-sm" type="checkbox" id="remember-me">
  <label class="form-check-label form-check-label-sm" for="remember-me">Remember me</label>
</div>

2. input color with sizing class form-control-* have wrong height: <input type="color" class="form-control form-control-sm form-control-color"> - 35px, <input type="text" class="form-control form-control-sm"> - 31px
3. input width (css width, min-width and max-width) by attributes minlength, maxlength or size: if maxlength="250" is width:100%, then maxlength="100" is width:40% i.e. 100 / (250 / 100) or by size(step size: 10): input[size="10"] is input{min-width:10em;}, input[size="20"] is input{min-width:20em;}
4. There are no classes that allow to set size for all controls, labels and buttons in form/fieldset by default like as:

<!-- class "form-sm" similar to adding classes to elements: -->
<form class="form-sm">
  <div class="row mb-3">
    <!-- + "col-form-label-sm" -->
    <label for="email" class="col-2 col-form-label">Email</label>
    <div class="col-10">
      <!-- + "form-control-sm" -->
      <input type="email" class="form-control" id="email">
    </div>
  </div>
  <div class="row mb-3">
    <!-- + "col-form-label-sm" -->
    <label for="password" class="col-2 col-form-label">Password</label>
    <div class="col-10">
      <!-- + "form-control-sm" -->
      <input type="password" class="form-control" id="password">
    </div>
  </div>
  <!-- + "btn-sm" -->
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Motivation and context

1. Setting size for any control, label or button in form
2. Setting size for inner controls, labels and buttons by container(form/fieldset/row) class