Form Input Text

Text input are most used input in forms. For that reason, there are various layouts and options

Append / Prepend Input

Add icons inside your input to explain which type of data is required. You can add all icons available, at the beginning or at the end of input.

Here is basic markup for append and prepend input:

<div class="prepend-icon">
      <input type="text" class="form-control">
      <i class="icon-user"></i>
</div>

<div class="append-icon">
    <input type="text" class="form-control">
    <i class="icon-user"></i>
</div>

Size of Input

You can change input size by adding input-sm class for small input or input-lg for large input.

You can choose various sizes: small, medium and large input.

Here is basic text input markup for small and large input:

<input type="text" class="form-control input-sm">
<input type="text" class="form-control input-lg">

Input Color

By default, background color is light gray. But you can change input color if you want to white or dark.

Markup of colored input text:

<input class="form-control form-white" type="text">
<input class="form-control form-dark" type="text">

It's possible to apply all background colors to input too:

For example, for a blue style input, you will have this markup:

<input class="form-control bg-blue" type="text">