Bootstrap4C

Floating label

Add class form-group-floating-label to the form-group wrapper.

<div class="form-group form-group-floating-label">
  <label>This is a label</label>
  <input type="text" class="form-control" placeholder="Floating label">
</div>

Input tag with type="search"

<div class="form-group">
  <input type="search" class="form-control" placeholder="I'm a placeholder..." value="Press X to delete this value">
</div>

Input tag with attribute disabled or readonly

<div class="form-group">
  <input type="text" class="form-control" placeholder="I'm a placeholder..." disabled>
</div>

Input tag with class form-control-xs

<div class="form-group">
  <input type="text" class="form-control form-control-xs" placeholder="I'm a placeholder...">
</div>

Input tag with class form-control-xl

<div class="form-group">
  <input type="text" class="form-control form-control-xl" placeholder="I'm a placeholder...">
</div>

Input tag with class form-control-icon-calendar

<div class="form-group">
  <input type="text" class="form-control form-control-icon-calendar" placeholder="Pick a date...">
</div>

Input tag with class form-control-icon-time

<div class="form-group">
  <input type="text" class="form-control form-control-icon-time" placeholder="Pick a time...">
</div>

Input tag with class form-control-monospace

<div class="form-group">
  <input type="text" class="form-control form-control-monospace form-control-monospace-focus" placeholder="________">
</div>

Input tag with class form-control-monospace-focus

<div class="form-group">
  <input type="text" class="form-control form-control-monospace-focus" placeholder="________" value="12345678">
</div>