Categories
css twitter-bootstrap

What is the bootstrap form-control class for?

I’m having trouble wrapping my brain around the strategy for how to use the form-control class offered by Bootstrap.

On one hand I have this rather bland comment from the Bootstrap documentation:

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.

Ref: https://getbootstrap.com/docs/4.0/components/forms/#form-controls

While on the other hand I have rather in-the-weeds code to look at:

.form-control {
display: block;
width: 100%;
height: $input-height;
padding: $input-padding-y $input-padding-x;
// ... 40-some lines elided ...
}

ref: https://github.com/twbs/bootstrap/blob/275cd7f91eed9f4051d85c295e5c14ef08937804/scss/_forms.scss

My question: How can I holistically approach modifying existing code or writing new code with form-control.

You add that class to text input elements (input, select, textarea), eg <input type="email" class="form-control" value="" placeholder="Your email address" /> This is Bootstrap’s way of forcing form elements to look the same.

The CSS is so long because they’re accounting for all the differences in how browsers natively render those elements.