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.

Option one is this and checked

Option two is this and that

Option three is disabled

<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>

Inline

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

Option one

Option two

Option three

<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>

Card outline

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

GitHub GitHub is a web-based hosting service for version control using git. It is mostly used for computer code.

Bitbucket Bitbucket is a web-based version control repository hosting service owned by Atlassian.

<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="form-check-icon 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>

Button outline

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

Option one

Option two

Option three

<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>

Radios

Option one is this and that

Option two can be something else

Option three is disabled

<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>

Inline

Option one

Option two

Option three

<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>

Radios with description

Option one is this and that

Nulla interdum vulputate nunc, posuere elementum sem rhoncus in. Quisque ullamcorper quis lacus vel pharetra.

Option two can be something else

Nulla interdum vulputate nunc, posuere elementum sem rhoncus in. Quisque ullamcorper quis lacus vel pharetra.

Option three

Nulla interdum vulputate nunc, posuere elementum sem rhoncus in. Quisque ullamcorper quis lacus vel pharetra.

<div class="form-check">
  <input id="radios1" class="form-check-input" type="radio" name="radiosdesc">
  <label class="form-check-label" for="radios1d">
    Option one is this and that
    <p class="form-check-desc">Nulla interdum vulputate nunc, posuere elementum sem rhoncus in.</p>
  </label>
</div>
</div>

Radios image

Add class .check-btn-img on .form-check-inline radio group.

<div class="form-check-inline check-btn-img">
  <input id="id1" class="form-check-input" type="radio" name="name" value="" checked>
  <label class="form-check-label" for="id1">
    <svg class="img-svg img-4x">
      <use xlink:href="//design.umbler.com//assets/svg/sprite-logos.svg#worpdress"></use>
    </svg>  
  </label>
</div> 
<div class="form-check-inline check-btn-img">
  <input id="id2" class="form-check-input" type="radio" name="name" value="">
  <label class="form-check-label" for="id2">
    <svg class="img-svg img-4x">
      <use xlink:href="//design.umbler.com//assets/svg/sprite-logos.svg#prestashop"></use>
    </svg>  
  </label>
</div> 
<div class="form-check-inline check-btn-img">
  <input id="id3" class="form-check-input" type="radio" name="name" value="" disabled>
  <label class="form-check-label" for="id3">
    <svg class="img-svg img-4x">
      <use xlink:href="//design.umbler.com//assets/svg/sprite-logos.svg#moodle"></use>
    </svg>  
  </label>
</div>

Card outline

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

GitHub GitHub is a web-based hosting service for version control using git.

Bitbucket Bitbucket is a web-based version control repository hosting service owned by Atlassian.

<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="form-check-icon 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="form-check-icon 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>

Radio button outline

GitHub

Bitbucket

Dropbox

<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.

GitHub

Bitbucket

Dropbox

<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();
})

Sizes

Add .form-check-lg.

Option one is this and that

Option two can be something else

Option three is disabled

<div class="form-check form-check-lg">
  <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>

Card outline without check

Add .form-check-no.

GitHub GitHub is a web-based hosting service for version control using git.

<div class="flex-md flex-nowrap flex-md-row">
  <div class="form-check-inline check-card-outline form-check-no flex-item">
    <input id="radioCardOutline10" class="form-check-input" type="radio" name="radioCardNoCheck" checked>
    <label class="form-check-label" for="radioCardOutline10"> 
      <span class="form-check-icon 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 form-check-no flex-item">
    <input id="radioCardOutline20" class="form-check-input" type="radio" name="radioCardNoCheck">
    <label class="form-check-label" for="radioCardOutline20"> 
      <span class="form-check-icon 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>