Search code examples
htmlnode.jsbootstrap-4frontendreact-fullstack

What does .col-form-label class do to the label in bootstrap?


like here in first label the class is mentioned

<form>
  <div class="form-group row">
     <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
     <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" 
       value="email@example.com">
      </div>
  </div>
</form>

Solution

  • Horizontal form
    Create horizontal forms with the grid by adding the .row class to form groups and using the .col-- classes to specify the width of your labels and controls. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.

    Read all about it here.