Elements

These modular elements can be readily used and customized across pages and in different blocks.

    
      <form >
        <div class="row">
          <div class="form-group col-md-6">
          <input type="text" class="form-control" id="exampleInputName" aria-describedby="userName" placeholder="Enter email">
          </div>
          <div class="form-group col-md-6">
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          </div>
          <div class="form-group col-md-12">
          <input type="number" class="form-control" id="exampleInputPhone" placeholder="Phone">
          </div>
          <div class="form-group col-md-12">
          <textarea class="form-control" id="exampleTextarea" rows="5" placeholder="Your message"></textarea>
          </div>
        </div>
        <button type="submit" class="btn btn-default btn-primary">Send message</button>
      </form>

Example: 

    
      <!-- Default Checked -->
      <div class="form-check ">
        <input id="checkbox-1" class="checkbox-custom form-check-input" name="checkbox-1" type="checkbox" checked>
        <label for="checkbox-1" class="checkbox-custom-label form-check-label default-checked">Default Checked</label>
      </div>

      <!-- Unchecked -->
      <div class="form-check ">
        <input id="checkbox-2" class="checkbox-custom form-check-input" name="checkbox-2" type="checkbox">
        <label for="checkbox-2" class="checkbox-custom-label form-check-label ">Unchecked</label>
      </div>

      <!-- Checked -->
      <div class="form-check ">
        <input id="checkbox-3" class="checkbox-custom form-check-input" name="checkbox-3" type="checkbox" checked>
        <label for="checkbox-3" class="checkbox-custom-label form-check-label">Checked</label>
      </div>

      <!-- Disabled unchecked -->
      <div class="form-check ">
        <input id="checkbox-4" class="checkbox-custom form-check-input" name="checkbox-4" type="checkbox" disabled>
        <label for="checkbox-4" class="checkbox-custom-label form-check-label">Disabled unchecked</label>
      </div>

      <!-- Disabled Checked -->
      <div class="form-check ">
        <input id="checkbox-5" class="checkbox-custom form-check-input" name="checkbox-5" type="checkbox" checked disabled>
        <label for="checkbox-5" class="checkbox-custom-label form-check-label disable-checked">Disabled Checked</label>
      </div>

      <!-- Default Checked radio -->
      <div class="form-check ">
        <input id="radio-1" class="radio-custom form-check-input" name="radio-group" type="radio" checked>
        <label for="radio-1" class="radio-custom-label form-check-label default-checked">Default Checked</label>
      </div>

      <!-- Unchecked radio -->
      <div class="form-check ">
        <input id="radio-2" class="radio-custom form-check-input" name="radio-2" type="radio">
        <label for="radio-2" class="radio-custom-label form-check-label ">Unchecked</label>
      </div>

      <!-- Checked radio -->
      <div class="form-check ">
        <input id="radio-3" class="radio-custom form-check-input" name="radio-3" type="radio" checked>
        <label for="radio-3" class="radio-custom-label form-check-label">Checked</label>
      </div>

      <!-- Disabled unchecke radio -->
      <div class="form-check ">
        <input id="radio-4" class="radio-custom form-check-input" name="radio-4" type="radio" disabled>
        <label for="radio-4" class="radio-custom-label form-check-label">Disabled unchecked</label>
      </div>

      <!-- Disabled Checked radio -->
      <div class="form-check ">
        <input id="radio-5" class="radio-custom form-check-input" name="radio-5" type="radio" checked disabled>
        <label for="radio-5" class="radio-custom-label form-check-label disable-checked">Disabled Checked</label>
      </div>

Checkbox

Radio button

    
      <form  class="register">
        <div class="row">
          <div class="form-group col-md-12">
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
          </div>
          <div class="form-group col-md-12">
            <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
          </div>
        </div>
        <button type="submit" class="btn btn-default btn-primary btn-block">Log In</button>
        <div class="row">
          <div class="form-check col-md-6">
            <input id="checkbox-2" class="checkbox-custom form-check-input" name="checkbox-2" type="checkbox">
            <label for="checkbox-2" class="checkbox-custom-label form-check-label ">Remember me</label>
          </div>
          <div class="col-md-3 offset-md-3 text-right">
            <a href="" class="btn-link">Forgot password ?</a>
          </div>
        </div>
        <span class="or text-center">OR</span>
        <button type="submit" class="btn btn-default btn-facebook btn-block">Log in with Facebook</button>
        <button type="submit" class="btn btn-default btn-twitter btn-block">Log in with Twitter</button>
      </form>
      <p class="form-footer">Don’t have an Account? Sign up


      <!-- icon in the input field -->
      <div class="form-group col-md-12 input-icon">
      <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Email">
      </div>

Example

Log in your Account

Forgot password ?
OR

Don’t have an Account? Sign up

Sign Up Form

Forgot password ?
OR

Already have an Account? Log in

    
      <form class="form-inline">
        <label class="sr-only" for="uname">Username</label>
        <div class="input-group mb-2 mr-sm-2 mb-sm-0 input-icon">
          <div class="input-group-addon"><i class="fa fa-user"></i></div>
          <input type="text" class="form-control" id="uname" placeholder="Username">
        </div>
        <label class="sr-only" for="email">email</label>
        <div class="input-group mb-2 mr-sm-2 mb-sm-0 input-icon">
          <div class="input-group-addon"><i class="fa fa-envelope"></i></div>
          <input type="email" class="form-control" id="email" placeholder="Email">
        </div>
        <button type="submit" class="btn btn-primary btn-lg">Subscribe</button>
      </form>

Example

    

      <!-- Valid Field -->
      <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      </div>

      <!-- Invalid Field -->
      <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.

Example

Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.