Custom forms

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

Bootstrap Documentation

Checkboxes

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Radios

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Timeline radio

Goodkit Exclusive

The timeline radio component that combines the custom radios and the countUp plugin. The color of the timeline radio component can be controlled with the .timeline-radio-{color} utility classes.

$ 499 /mo
<form>
  <div class="form-group timeline-radio timeline-radio-warning">

    <!-- Timeline radio -->
    <input class="timeline-radio-input" id="timelineRadioOne" data-toggle="price" data-target="#price" data-value="199" name="timelineRadio" type="radio">
    <label class="timeline-radio-label" for="timelineRadioOne">
      <small class="text-muted">1-5</small>
    </label>

    <!-- Timeline radio -->
    <input class="timeline-radio-input" id="timelineRadioTwo" data-toggle="price" data-target="#price" data-value="299" name="timelineRadio" type="radio">
    <label class="timeline-radio-label" for="timelineRadioTwo">
      <small class="text-muted">6-15</small>
    </label>

    <!-- Timeline radio -->
    <input class="timeline-radio-input" id="timelineRadioThree" data-toggle="price" data-target="#price" data-value="399" name="timelineRadio" type="radio">
    <label class="timeline-radio-label" for="timelineRadioThree">
      <small class="text-muted">16-40</small>
    </label>

    <!-- Timeline radio -->
    <input class="timeline-radio-input" id="timelineRadioFour" data-toggle="price" data-target="#price" data-value="499" name="timelineRadio" type="radio" checked>
    <label class="timeline-radio-label" for="timelineRadioFour">
      <small class="text-muted">41-100</small>
    </label>

    <!-- Timeline radio -->
    <input class="timeline-radio-input" id="timelineRadioFive" data-toggle="price" data-target="#price" data-value="599" name="timelineRadio" type="radio">
    <label class="timeline-radio-label" for="timelineRadioFive">
      <small class="text-muted">100+</small>
    </label>

  </div>
  <div class="row align-items-center">
    <div class="col-md text-center text-md-left">

      <!-- Price -->
      <div class="display-4 font-weight-bolder mb-4 mb-md-0">
        <span class="font-size-h3 align-middle">$</span>
        <span class="mx-n2" id="price">499</span>
        <span class="font-size-h2 align-middle">/mo </span>
      </div>

    </div>
    <div class="col-md-auto">

      <!-- Button -->
      <button class="btn btn-block btn-primary-dark lift">
        Start Hiring
      </button>

    </div>
  </div>
</form>