title: What is the bootstrap form-control class for?
body: <p>I'm having trouble wrapping my brain around the strategy for how to use the <code>form-control</code> class offered by Bootstrap.</p>
  
  <p>On one hand I have this rather bland comment from the Bootstrap documentation:</p>
  
  <blockquote>
    <p>Textual form controls—like inputs, selects, and textareas—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.</p>
  </blockquote>
  
  <p>Ref: <a href="https://getbootstrap.com/docs/4.0/components/forms/#form-controls" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/components/forms/#form-controls</a></p>
  
  <p>While on the other hand I have rather in-the-weeds code to look at:</p>
  
  <pre><code>.form-control {
    display: block;
    width: 100%;
    height: $input-height;
    padding: $input-padding-y $input-padding-x;
    // ... 40-some lines elided ...
  }
  </code></pre>
  
  <p>ref: <a href="https://github.com/twbs/bootstrap/blob/275cd7f91eed9f4051d85c295e5c14ef08937804/scss/_forms.scss" rel="nofollow noreferrer">https://github.com/twbs/bootstrap/blob/275cd7f91eed9f4051d85c295e5c14ef08937804/scss/_forms.scss</a></p>
  
  <p>My question:  How can I holistically approach modifying existing code or writing new code with <code>form-control</code>.</p>