Skip to content
This repository has been archived by the owner on Feb 1, 2022. It is now read-only.

E042

Jump to bottom
Chris Rebert edited this page Jan 2, 2016 · 4 revisions

E042

.form-control can only be used on certain HTML elements, and there are further restrictions about which types of <input> elements it can be used on.

.form-control cannot be used on non-textual <input>s, such as those whose type is: file, checkbox, radio, range, button

When used on an <input> element, .form-control can only be used on <input>s whose type is text-like, namely:

  • <input type="text">
  • <input type="password">
  • <input type="search">
  • <input type="number">
  • <input type="email">
  • <input type="url">
  • <input type="tel">
  • <input type="datetime-local">, <input type="date">, <input type="month">, <input type="week">, <input type="time">
  • <input type="color">

Contrastingly, .form-control cannot be used on non-textual <input>s, namely:

  • <input type="file">
    • Bootstrap v3 does not offer styling for these.
  • <input type="range">
    • Bootstrap v3 does not offer styling for these.
  • <input type="image">
    • Bootstrap v3 does not offer styling for these.
    • Note that this essentially turns an image into a button. It has nothing to do with letting the user choose image files to input.
  • <input type="button">, <input type="submit">, <input type="submit">
    • Instead of .form-control, use the .btn (and possibly .btn-block) classes for styling button-ish <input>s.
  • <input type="checkbox">, <input type="radio">
    • Instead of .form-control, use the .checkbox or .radio classes (which DON'T go on the <input>s themselves) for styling these.
  • <input type="hidden">
    • You shouldn't be trying to style this in the first place.

.form-control should only be used on <input>s, <textarea>s, and <select>s.

The .form-control class cannot be used on arbitrary HTML elements. It can only be used on <input>s, <textarea>s, and <select>s.

Wrong:

<button class="form-control">None of</button>
<div class="form-control">these</div>
<span class="form-control">make any</span>
<a class="form-control">sense!</a>

Right:

<input type="text" class="form-control" value="Text input" />
<textarea class="form-control">Text area</textarea>
<select class="form-control">
  <option>Option 1</option>
  <option>Option 2</option>
  ...
</select>

Bootlint documentation wiki content is licensed under the CC BY 3.0 License, and based on Bootstrap's docs which are copyright Twitter, Inc.

Clone this wiki locally