Skip to content
W3S101

Bootstrap Inputs 2

Bootstrap Form Inputs (Advanced)

Section titled “Bootstrap Form Inputs (Advanced)”

Readonly Plaintext (Static Control)

Section titled “Readonly Plaintext (Static Control)”

If you want to display data in a form-like structure but without the input field’s styling, use the .form-control-plaintext class on an <input> or other element. This is useful for displaying static information alongside form labels.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Plaintext Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
  <form>
    <div class="mb-3 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="someone@example.com">
      </div>
    </div>
    <div class="mb-3 row">
      <label for="inputPassword" class="col-sm-2 col-form-label">Password:</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword">
      </div>
    </div>
  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Bootstrap Form Control States

Section titled “Bootstrap Form Control States”
  • Input Focus: Bootstrap automatically styles focused inputs with an enhanced outline (often a box-shadow and adjusted border-color).
  • Disabled Inputs: Add the disabled boolean attribute to an input to prevent user interaction and give it a muted appearance.
  • Disabled Fieldsets: Add the disabled attribute to a &lt;fieldset&gt; to disable all controls within it.
  • Readonly Inputs: Add the readonly boolean attribute to an input to prevent modification, though the input can still be focused and its value selected/copied.
  • Validation States: Bootstrap provides classes for validation states: .is-valid and .is-invalid. These are typically applied to form controls after validation (client-side or server-side). You can provide feedback messages using .valid-feedback or .invalid-feedback (or .valid-tooltip, .invalid-tooltip for tooltip-style feedback).
  • Feedback Icons: Bootstrap can automatically add feedback icons (e.g., checkmark, exclamation) when using .is-valid or .is-invalid on form controls that are part of an input group with feedback, or by manually adding SVGs.
  • Visually Hidden Labels: Use the .visually-hidden class (formerly .sr-only) to hide labels from visual users while keeping them accessible to screen readers.

The following example demonstrates some of these form control states within a form using Bootstrap’s grid for layout (replacing the old .form-horizontal concept):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Form States Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
  <form>
    <div class="row mb-3">
      <label for="focusedInput" class="col-sm-2 col-form-label">Focused (auto)</label>
      <div class="col-sm-10">
        <input class="form-control" id="focusedInput" type="text" placeholder="Click to focus">
      </div>
    </div>


    <div class="row mb-3">
      <label for="disabledInput" class="col-sm-2 col-form-label">Disabled</label>
      <div class="col-sm-10">
        <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input" disabled>
      </div>
    </div>


    <fieldset disabled>
      <legend class="col-form-label col-sm-2 pt-0">Fieldset Disabled</legend>
      <div class="row mb-3">
        <label for="disabledTextInput" class="col-sm-2 col-form-label">Disabled Text</label>
        <div class="col-sm-10">
          <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input in fieldset">
        </div>
      </div>
      <div class="row mb-3">
        <label for="disabledSelect" class="col-sm-2 col-form-label">Disabled Select</label>
        <div class="col-sm-10">
          <select id="disabledSelect" class="form-select">
            <option>Disabled select</option>
          </select>
        </div>
      </div>
    </fieldset>


    <div class="row mb-3">
      <label for="inputValid" class="col-sm-2 col-form-label">Input with success</label>
      <div class="col-sm-10">
        <input type="text" class="form-control is-valid" id="inputValid" value="Looks good!">
        <div class="valid-feedback">
          Success! You've done it.
        </div>
      </div>
    </div>


    <div class="row mb-3">
      <label for="inputInvalid" class="col-sm-2 col-form-label">Input with error</label>
      <div class="col-sm-10">
        <input type="text" class="form-control is-invalid" id="inputInvalid" value="Oh no!">
        <div class="invalid-feedback">
          Please provide a valid input.
        </div>
      </div>
    </div>


    <div class="row mb-3">
      <label for="inputWithTooltipValid" class="col-sm-2 col-form-label">Valid (Tooltip)</label>
      <div class="col-sm-10 position-relative">
        <input type="text" class="form-control is-valid" id="inputWithTooltipValid" value="Correct">
        <div class="valid-tooltip">
          Looks good!
        </div>
      </div>
    </div>


    <div class="row mb-3">
      <label class="col-sm-2 col-form-label visually-hidden" for="hiddenLabelInput">Hidden Label</label>
      <div class="col-sm-10">
        <input class="form-control" id="hiddenLabelInput" type="text" placeholder="Input with visually hidden label">
      </div>
    </div>


  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

And here is an example of some form control states in an Inline form (using flex utilities for layout):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Inline Form States</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
  <form class="row row-cols-lg-auto g-3 align-items-center">
    <div class="col-12">
      <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-text">@</div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>


    <div class="col-12">
      <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
      <select class="form-select" id="inlineFormSelectPref" disabled>
        <option selected>Choose...</option>
        <option value="1">One (disabled)</option>
      </select>
    </div>


    <div class="col-12">
        <input type="text" class="form-control is-valid" placeholder="Valid input" aria-label="Valid input">
    </div>


    <div class="col-12">
        <input type="text" class="form-control is-invalid" placeholder="Invalid input" aria-label="Invalid input">
    </div>


    <div class="col-12">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

For comprehensive details on form validation and layout, refer to the official Bootstrap 5 documentation on Forms and Validation.