Bootstrap Forms

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

Inputs

Default


  <form>
    <div class="row">
      <div class="col-md-6">
        <vmd-input type="email" placeholder="[email protected]" />
      </div>
      <div class="col-md-6">
        <vmd-input type="text" placeholder="Regular" disabled />
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <vmd-input type="text" placeholder="Search" icon="ni ni-zoom-split-in" iconDir=""left" />
      </div>
      <div class="col-md-6">
      <vmd-input type="text" placeholder="Search" icon="ni ni-zoom-split-in" iconDir=""right" />
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <vmd-input type="text" placeholder="Success" valid="true" />
      </div>
      <div class="col-md-6">
        <vmd-input type="text" placeholder="Success" valid="false" />
      </div>
    </div>
  </form>

Radios

Toggle this custom radio

Or toggle this other custom radio


  <div class="d-flex mb-3">
    <vmd-radio name="flexRadioDefault" id="customRadio1" />
    <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
  </div>
  <div class="d-flex">
    <vmd-radio name="flexRadioDefault" id="customRadio1" />
    <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
  </div>

Toggles

Checked switch


  <vmd-switch id="flexSwitchCheckDefault" checked="true">Checked switch</vmd-switch>