Ads by ProfitSence
Close

Customize Bootstrap checkboxes

Last Updated on Wednesday 5th Oct 2022

bootstrap checkbox style

bootstrap custom checkbox. Checks and radios Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.

bootstrap checkbox css

			
					<div class="col-md-4">
   <form>
      <h2>1. Customs Checkboxes</h2>
      <div class="custom-checkbox">
         <div class="form-check">
            <label>
            <input type="checkbox" name="check" checked> <span class="label-text">Option 01</span>
            </label>
         </div>
         <div class="form-check">
            <label>
            <input type="checkbox" name="check"> <span class="label-text">Option 02</span>
            </label>
         </div>
         <div class="form-check">
            <label>
            <input type="checkbox" name="check"> <span class="label-text">Option 03</span>
            </label>
         </div>
         <div class="form-check">
            <label>
            <input type="checkbox" name="check" disabled> <span class="label-text">Option 04</span>
            </label>
         </div>
      </div>
   </form>
</div>

			
	

			
	
	


			
					<div class="col-md-4">
  <form>
    <h2>2. Customs Radios</h2>
    <div class="custom-radio">
      <div class="form-check">
        <label>
           <input type="radio" name="radio" checked> <span class="label-text">Option 01</span>
        </label>
      </div>
      <div class="form-check">
        <label>
          <input type="radio" name="radio"> <span class="label-text">Option 02</span>
        </label>
      </div>
      <div class="form-check">
        <label>
          <input type="radio" name="radio"> <span class="label-text">Option 03</span>
        </label>
      </div>
      <div class="form-check">
        <label>
          <input type="radio" name="radio" disabled> <span class="label-text">Option 04</span>
        </label>
      </div>
    </div>
  </form>
</div>

checkbox bootstrap

Default CheckBox

			
					<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

Default Radios

			
					<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>