Sign in


Sign up


Bootstrap Checkbox

Bootstrap checkbox is a component used for allowing a user to make a binary choice. Broadly used in the forms and surveys.

Because of their high UX value, Checkboxes are usually present in a crowded UI designs. Thanks to the flexibility of Bootstrap, they are always perfectly positioned with an obvious use purpose.

Examples of Bootstrap checbox use:

  • Busy personal information form
  • Preference survey
  • Single choice questionary

See the following checkbox examples to see how simple to use they are.



Classic and filled-in checkbox MDB Pro component

                
<div class="form-group">
    <input type="checkbox" id="checkbox100" checked="checked">
    <label for="checkbox100">Classic checkbox</label>
</div>

<div class="form-group">
    <input type="checkbox" class="filled-in" id="checkbox101" checked="checked">
    <label for="checkbox101">Filled-in checkbox</label>
</div>
                
            

Disabled checkbox MDB Pro component

                
<div class="form-group">
    <input type="checkbox" id="checkbox102" disabled checked="checked">
    <label for="checkbox102" class="disabled">Classic checkbox</label>
</div>

<div class="form-group">
    <input type="checkbox" class="filled-in" id="checkbox103" disabled checked="checked">
    <label for="checkbox103" class="disabled">Filled-in checkbox</label>
</div>  
                
            

Inline checkbox MDB Pro component

                
<form class="form-inline">

    <div class="form-group">
        <input type="checkbox" id="checkbox104">
        <label for="checkbox104">Classic checkbox</label>
    </div>

    <div class="form-group">
        <input type="checkbox" class="filled-in" id="checkbox105" checked="checked">
        <label for="checkbox105">Filled-in checkbox</label>
    </div>

    <div class="form-group">
        <input type="checkbox" id="checkbox106">
        <label for="checkbox106">Classic checkbox</label>
    </div>

</form>
                
            

Colorful classic checkbox MDB Pro component

                
.checkbox-teal [type="checkbox"]:checked+label:before {
    border-color: transparent #009688 #009688 transparent;
}
                
            
                
<div class="form-group checkbox-teal">
    <input type="checkbox" id="checkbox8" checked>
    <label for="checkbox8">Teal</label>
</div>
                
            

Colorful filled-in checkbox MDB Pro component

                
.checkbox-warning-filled [type="checkbox"][class*='filled-in']:checked+label:after {
    border-color: #FF8800;
    background-color: #FF8800;
}
                
            
                
<div class="form-group checkbox-warning-filled">
    <input type="checkbox" id="checkbox110" class="filled-in" checked>
    <label for="checkbox110">Warning</label>
</div>
                
            

Colorful rounded checkbox MDB Pro component

                
.checkbox-rounded [type="checkbox"][class*='filled-in']+label:after {
    border-radius: 50%;
}
                
            
                
<div class="form-group checkbox-rounded checkbox-success-filled">
    <input type="checkbox" id="checkbox111" class="filled-in" checked>
    <label for="checkbox111">Success</label>
</div>
                
            

Classic checkbox buttons

                
<!--Checkbox butons-->
<div class="btn-group mr-4" data-toggle="buttons">

    <label class="btn btn-primary active">
        <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
    </label>

    <label class="btn btn-primary">
        <input type="checkbox" autocomplete="off"> Checkbox 2
    </label>

    <label class="btn btn-primary">
        <input type="checkbox" autocomplete="off"> Checkbox 3
    </label>

</div>
<!--Checkbox butons-->
                
            

Rounded checkbox buttons MDB Pro component

                
<!--Checkbox butons-->
<div class="btn-group" data-toggle="buttons">

    <label class="btn btn-pink btn-rounded active btn-md">
        <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
    </label>

    <label class="btn btn-pink btn-rounded btn-md">
        <input type="checkbox" autocomplete="off"> Checkbox 2
    </label>

    <label class="btn btn-pink btn-rounded btn-md">
        <input type="checkbox" autocomplete="off"> Checkbox 3
    </label>

</div>
<!--Checkbox butons-->
                
            

Rounded checkbox buttons with icon MDB Pro component

                
<!--Checkbox butons-->
<div class="btn-group" data-toggle="buttons">

    <label class="btn btn-warning btn-rounded active">
        <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked) <i class="fa fa-diamond ml-2"></i>
    </label>

    <label class="btn btn-warning btn-rounded">
        <input type="checkbox" autocomplete="off"> Checkbox 2 <i class="fa fa-user ml-2"></i>
    </label>

    <label class="btn btn-warning btn-rounded">
        <input type="checkbox" autocomplete="off"> Checkbox 3 <i class="fa fa-code ml-2"></i>
    </label>

</div>
<!--Checkbox butons-->
                
            
["checkbox3", "checkbox4"].forEach(checkbox => { document.getElementById(checkbox).indeterminate = true; });