Sign in


Sign up


Bootstrap Radio Button

Bootstrap radio buttons are option buttons, which allows users to choose one of a predefined set of two or more options. Commonly used in forms and surveys.

Because of their high UX value, radio 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 radio use:

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

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








Basic example MDB Pro component

                
<!--Radio group-->
<div class="form-group ">
    <input name="group100" type="radio" id="radio100">
    <label for="radio100">Option 1</label>
</div>

<div class="form-group">
    <input name="group100" type="radio" id="radio101" checked>
    <label for="radio101">Option 2</label>
</div>

<div class="form-group">
    <input name="group100" type="radio" id="radio102">
    <label for="radio102">Option 3</label>
</div>
<!--Radio group-->
                
            

Colorful basic radio buttons MDB Pro component

                
.radio-green [type="radio"]:checked+label:after {
    border-color: #00C851;
    background-color: #00C851;
}
/*Gap*/

.radio-green-gap [type="radio"].with-gap:checked+label:before {
    border-color: #00C851;
}

.radio-green-gap [type="radio"]:checked+label:after {
    border-color: #00C851;
    background-color: #00C851;
}
                
            
                
<!--Radio group-->
<div class="form-group radio-green">
    <input name="group101" type="radio" id="radio103">
    <label for="radio103">Option 1</label>
</div>

<div class="form-group radio-green">
    <input name="group101" type="radio" id="radio104" checked>
    <label for="radio104">Option 2</label>
</div>

<div class="form-group radio-green">
    <input name="group101" type="radio" id="radio105">
    <label for="radio105">Option 3</label>
</div>
<!--Radio group-->
                
            

Radio buttons with gap MDB Pro component

                
<!--Radio group-->
<div class="form-group">
    <input name="102" type="radio" class="with-gap" id="radio106">
    <label for="radio106">Option 1</label>
</div>

<div class="form-group">
    <input name="102" type="radio" class="with-gap" id="radio107" checked>
    <label for="radio107">Option 2</label>
</div>

<div class="form-group">
    <input name="102" type="radio" class="with-gap" id="radio108">
    <label for="radio108">Option 3</label>
</div>
<!--Radio group-->
                
            

Colorful radio buttons with gap MDB Pro component

                
.radio-pink [type="radio"]:checked+label:after {
    border-color: #e91e63;
    background-color: #e91e63;
}
/*Gap*/

.radio-pink-gap [type="radio"].with-gap:checked+label:before {
    border-color: #e91e63;
}

.radio-pink-gap [type="radio"]:checked+label:after {
    border-color: #e91e63;
    background-color: #e91e63;
}
                
            
                
<!--Radio group-->
<div class="form-group radio-pink-gap ">
    <input name="group103" type="radio" class="with-gap" id="radio109">
    <label for="radio109">Option 1</label>
</div>

<div class="form-group radio-pink-gap">
    <input name="group103" type="radio" class="with-gap" id="radio110" checked>
    <label for="radio110">Option 2</label>
</div>

<div class="form-group radio-pink-gap">
    <input name="group103" type="radio" class="with-gap" id="radio111">
    <label for="radio111">Option 3</label>
</div>
<!--Radio group-->
                
            

Inline radio buttons MDB Pro component

                
<form class="form-inline">

    <div class="form-group">
        <input name="group20" type="radio" id="radio120" checked="checked">
        <label for="radio120">Option 1</label>
    </div>

    <div class="form-group">
        <input name="group20" type="radio" id="radio121">
        <label for="radio121">Option 2</label>
    </div>

    <div class="form-group">
        <input name="group20" type="radio" id="radio122">
        <label for="radio122">Option 3</label>
    </div>

</form>
                
            

Disabled radio buttons MDB Pro component

                
<div class="form-group checkbox-warning-filled">
    <input type="checkbox" id="checkbox110" class="filled-in" checked>
    <label for="checkbox110">Warning</label>
</div>
                
            

Classic radio buttons

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

    <label class="btn btn-default active">
        <input type="radio" checked autocomplete="off"> radio 1 (pre-checked)
    </label>

    <label class="btn btn-default">
        <input type="radio" autocomplete="off"> radio 2
    </label>

    <label class="btn btn-default">
        <input type="radio" autocomplete="off"> radio 3
    </label>

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

Rounded radio buttons MDB Pro component

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

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

    <label class="btn btn-purple btn-rounded btn-md">
        <input type="radio" autocomplete="off"> radio 2
    </label>

    <label class="btn btn-purple btn-rounded btn-md">
        <input type="radio" autocomplete="off"> radio 3
    </label>

</div>
<!--Radio butons-->
                
            

Rounded radio buttons with icon MDB Pro component

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

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

    <label class="btn btn-cyan btn-rounded">
        <input type="radio" autocomplete="off"> radio 2 <i class="fa fa-user ml-2"></i>
    </label>

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

</div>
<!--Radio butons-->