CodeBlessU
learn code with examples

Bootstrap Forms Input Text, Textarea

Example links are referring to Bootstrap official site.

Bootstrap 5 Forms Input Text, Textarea

This example shows how to use bootstrap class for html input tag in form.

  • Use class="form-control" for input and textarea. Example
  • There are three sizing:
    • class="form-control" (Normal)
    • class="form-control form-control-lg" (Large)
    • class="form-control form-control-sm" (Small)
    Example
  • Use class="form-control-plaintext" for input readonly. Example
  • Use class="form-control form-control-color" for input type="color". Example

  • Bootstrap class="form-control" recognizes presence of HTML disabled attribute and defines/updates style for disabled. Example
  • HTML fieldset tag with disabled attribute makes all child component disabled. Bootstrap recognizes and update style for it.
  • Styles for custom buttons example, a class="btn btn-*" are not updated completely.

Bootstrap 5 Forms input type=""

This example shows usage of class="form-control" for various input type="" cases.

  • input type="date"
  • input type="datetime-local"
  • input type="email"
  • input type="file"
  • input type="month"
  • input type="number"
  • input type="password"
  • input type="search"
  • input type="tel"
  • input type="text"
  • input type="time"
  • input type="url"
  • input type="week"
Example (on codepen.io)
<input type="date" class="form-control">
<input type="datetime-local" class="form-control">
<input type="email" class="form-control">
<input type="file" class="form-control">
<input type="month" class="form-control">
<input type="number" class="form-control">
<input type="password" class="form-control">
<input type="search" class="form-control">
<input type="tel" class="form-control">
<input type="text" class="form-control">
<input type="time" class="form-control">
<input type="url" class="form-control">
<input type="week" class="form-control">

Bootstrap 5 Forms Textarea

This example shows usage of class="form-control" for HTML textarea tag.

  • Use class="form-control" for textarea.
Example (on Bootstrap), Example (on codepen.io)
<textarea class="form-control" rows="3"></textarea>

In this page...

Copyright © All rights reserved.