Forms check

Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.

Checkboxes

Checkboxes and radios are improved upon with the help of .form-check. Disabled checkboxes and radios are supported, you’ll need to add the .disabled class to the parent .form-check.

<div class="form-check">
  <input id="checkbox1" class="form-check-input" type="checkbox" checked>
  <label class="form-check-label" for="checkbox1">
    Option one is this and checked
  </label>
</div>
<div class="form-check">
  <input id="checkbox2" class="form-check-input" type="checkbox">
  <label class="form-check-label" for="checkbox2">
    Option two is this and that
  </label>
</div>
<div class="form-check disabled">
  <input id="checkbox3" class="form-check-input" type="checkbox" disabled>
  <label class="form-check-label" for="checkbox3">
    Option three is disabled
  </label>
</div>

Radios

<div class="form-check">
  <input id="radios1" class="form-check-input" type="radio" name="radios">
  <label class="form-check-label" for="radios1">
    Option one is this and that
  </label>
</div>

Radios with description

<div class="form-check">
  <input id="radios1" class="form-check-input" type="radio" name="radiosdesc">
  <label class="form-check-label" for="radios1">
    Option one is this and that
  </label>
</div>
</div>

Form check inline

Switch to inline, only add .form-check-inline.

<div class="form-check-inline">
  <input id="inlineCheckbox" class="form-check-input" type="checkbox">
  <label class="form-check-label" for="inlineCheckbox">
    Option one
  </label>
</div> 
<div class="form-check-inline">
  <input id="inlineRadios1" class="form-check-input" type="radio" name="inlineRadios">
  <label class="form-check-label" for="inlineRadios1">
    Option one 
  </label>
</div>

Check card outline

Switch to inline card visual, only add .check-card-outline.

<div class="flex-md flex-nowrap flex-md-row">
  <div class="form-check-inline check-card-outline flex-item">
    <input id="checkCardOutline1" class="form-check-input" type="checkbox" checked>
    <label class="form-check-label" for="checkCardOutline1"> 
      <span class="icon icon-brand-git icon-4x mb-1 icon-muted"></span>
      <span class="form-check-title">GitHub</span>
      <span class="form-check-description">GitHub is a web-based hosting service for version control using git. It is mostly used for computer code.</span>
    </label>
  </div>
  <div class="form-check-inline check-card-outline flex-item">
    <input id="checkCardOutline3" class="form-check-input" type="checkbox" disabled>
    <label class="form-check-label" for="checkCardOutline3">
      <span class="icon icon-brand-github icon-4x mb-1 icon-muted"></span>
      <span class="form-check-title">Bitbucket</span>
      <span class="form-check-description">Bitbucket is a web-based version control repository hosting service owned by Atlassian.</span>
    </label>
  </div>
</div>

Radio card outline

Switch to inline card visual, only add .check-card-outline.

<div class="flex-md flex-nowrap flex-md-row">
  <div class="form-check-inline check-card-outline flex-item">
    <input id="radioCardOutline1" class="form-check-input" type="radio" name="radioCard" checked>
    <label class="form-check-label" for="radioCardOutline1"> 
      <span class="icon icon-brand-git icon-4x mb-1 icon-muted"></span>
      <span class="form-check-title">GitHub</span>
      <span class="form-check-description">GitHub is a web-based hosting service for version control using git.</span>
    </label>
  </div>
  <div class="form-check-inline check-card-outline flex-item">
    <input id="radioCardOutline2" class="form-check-input" type="radio" name="radioCard">
    <label class="form-check-label" for="radioCardOutline2"> 
      <span class="icon icon-brand-git icon-4x mb-1 icon-muted"></span>
      <span class="form-check-title">GitHub</span>
      <span class="form-check-description">GitHub is a web-based hosting service for version control using git.</span>
    </label>
  </div>
  <div class="form-check-inline check-card-outline flex-item">
    <input id="radioCardOutline3" class="form-check-input" type="radio" name="radioCard" disabled>
    <label class="form-check-label" for="radioCardOutline3">
      <span class="icon icon-brand-github icon-4x mb-1 icon-muted"></span>
      <span class="form-check-title">Bitbucket</span>
      <span class="form-check-description">Bitbucket is a web-based version control repository hosting service owned by Atlassian.</span>
    </label>
  </div>
</div>

Check button outline

Switch to inline button visual, only add .check-btn-outline.

<div class="form-check-inline check-btn-outline">
	<input id="checkBtnOutline" class="form-check-input" type="checkbox" checked>
	<label class="form-check-label" for="checkBtnOutline"> 
		<img src="/assets/svg/sprite-umbler/img-umblercoin-silver.svg" width="30" height="30" class="mr-2">
		Option one
	</label>
</div>

Radio button outline

<div class="form-check-inline check-btn-outline">
  <input id="radioBtnOutline" class="form-check-input" type="radio" name="radioBtnOutline">
  <label class="form-check-label" for="radioBtnOutline">
    <span class="icon icon-brand-github icon-2x text-muted"></span>
    GitHub 
  </label>
</div>

Sizing

Add .check-btn-outline-sm.

<div class="form-check-inline check-btn-outline check-btn-outline-sm">
  <input id="radioBtnOutline1" class="form-check-input" type="radio" name="radioBtnOutline">
  <label class="form-check-label" for="radioBtnOutline1">
    <span class="icon icon-brand-github icon-2x text-muted"></span>
    GitHub 
  </label>
</div>

Enable dynamically

Initialize all form check buttons on a dynamically loaded page.

$(function () { 
   $(".check-btn-outline .form-check-input").checkButtonOutline();
})