DashByte - Premium Dashboard Template

Forms

Text Elements

Give textual form controls like inputs and textareas an upgrade with custom styles, sizing, focus states, and more. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Basic Example

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Email address

Message

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div>
  <label for="exampleFormControlTextarea1" class="form-label">Message</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Enter message here..."></textarea>
</div>

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

<input class="form-control form-control-lg mb-2" type="text" placeholder="Large input" aria-label=".form-control-lg example">
<input class="form-control mb-2" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder="Small input" aria-label=".form-control-sm example">

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

<input class="form-control mb-2" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value.

<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>

If you want to have input readonly elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="Readonly plain text here...">

File Input

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

Default file input example

Multiple files input example

Disabled file input example

Small file input example

Large file input example