Input

Bootstrap Input is a special field which is used in order to receive data from the user. Used mostly in a variety of web-based forms. You can use material design version or default bootstrap style.

Default Input Types

Default Input example.

html

          <div class="cs-form">
            <input type="text" class="form-control" />
            <label>Email</label>
          </div>
          <div class="cs-form">
            <input type="number" class="form-control" />
            <label class="">Number</label>
          </div>
          <div class="cs-form">
            <textarea class="form-control"></textarea>
            <label>TextArea</label>
          </div>
          <div class="form-check">
            <input
              class="form-check-input"
              type="checkbox"
              value=""
              id="defaultCheck"
            />
            <label class="form-check-label" for="defaultCheck">
              checkbox1
            </label>
          </div>

Input Sizing

html

          <div class="cs-form form-sm">
            <input type="email" class="form-control" />
            <label>Email</label>
          </div>
          <div class="cs-form">
            <input type="email" class="form-control" />
            <label class="">Email</label>
          </div>
        </div>

Input with icons

html

          <div class="cs-form">
            <i class="fa fa-user prefix"></i>
            <input type="text" class="form-control" />
            <label>Username</label>
          </div>
          <div class="cs-form">
            <i class="fa fa-lock prefix"></i>
            <input type="password" class="form-control" />
            <label>Password</label>
          </div>

Input with Different Styling

html

          <div class="cs-form">
            <input type="text" class="form-control border-info" />
            <label class="text-info">Username</label>
          </div>
          <div class="cs-form">
            <input type="password" class="form-control border-warning" />
            <label class="text-warning">Password</label>
          </div>
          <div class="cs-form">
            <input
              type="password"
              class="form-control border-success border-top-0 border-left-0 border-right-0"
            />
            <label class="text-success">Password</label>
          </div>

Placeholder

html

         <div class="cs-form">
            <input type="text" class="form-control" placeholder="Username" />
          </div>
          <div class="cs-form">
            <input type="password" class="form-control" placeholder="Email" />
          </div>