Checkbox Radio Bootstrap

Checkbox

Option one is this and that—be sure to include why it's great

Option is disabled

Option is disabled & checked

<div class="checkbox">
    <label>
        <input type="checkbox" value="">
        <i class="fa fa-2x icon-checkbox"></i>
        Option one is this and that&mdash;be sure to include why it's great
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox" value="" checked>
        <i class="fa fa-2x icon-checkbox"></i>
        Option one is this and that&mdash;be sure to include why it's great
    </label>
</div>
<div class="checkbox disabled">
    <label>
        <input type="checkbox" value="" disabled>
        <i class="fa fa-2x icon-checkbox"></i>
        Option is disabled
    </label>
</div>
<div class="checkbox disabled">
    <label>
        <input type="checkbox" value="" disabled checked>
        <i class="fa fa-2x icon-checkbox"></i>
        Option is disabled & checked
    </label>
</div>

Radio

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Option is disabled & checked

<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" checked>
        <i class="fa fa-2x icon-radio"></i>
        Option one is this and that&mdash;be sure to include why it's great
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios">
        <i class="fa fa-2x icon-radio"></i>
        Option two can be something else and selecting it will deselect option one
    </label>
</div>
<div class="radio disabled">
    <label>
        <input type="radio" name="optionsRadios" disabled>
        <i class="fa fa-2x icon-radio"></i>
        Option three is disabled
    </label>
</div>
<div class="radio disabled">
    <label>
        <input type="radio" name="optionsRadios" disabled checked>
        <i class="fa fa-2x icon-radio"></i>
        Option is disabled & checked
    </label>
</div>

Checkbox xs

Option one is this and that—be sure to include why it's great

Option is disabled

Option is disabled & checked

<div class="checkbox checkbox-xs">
    <label>
        <input type="checkbox" value="">
        <i class="fa fa-lg icon-checkbox"></i>
        Option one is this and that be sure to include why it's great
    </label>
</div>

Radio xs

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Option is disabled & checked

<div class="radio radio-xs">
    <label>
        <input type="radio" name="optionsRadios" checked>
        <i class="fa fa-lg icon-radio"></i>
        Option one is this and that be sure to include why it's great
    </label>
</div>

Checkbox - Radio indent

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ea amet quisquam odio nesciunt rerum, perspiciatis at, commodi quo harum quis illum qui, vitae ut optio suscipit distinctio ipsum pariatur.

<div class="radio indent">
    <label>
        <input type="radio" name="optionsRadios" checked>
        <i class="fa fa-2x icon-radio"></i>
        Option one is this and that be sure to include why it's great
    </label>
</div>

Checkbox-xs - Radio-xs indent

<div class="radio radio-xs indent">
    <label>
        <input type="radio" name="optionsRadios" checked>
        <i class="fa fa-lg icon-radio"></i>
        Option one is this and that be sure to include why it's great
    </label>
</div>