html - How to creat an input group with buttons instead of radio buttons but still have only one of them selected? -

i wish emulate behaviour of radio buttons withing bootstrap form-group line in form has several buttons ("btn btn-info" example), buttons being able "selected", 1 of them can selected @ given moment.

if insert 2 input elements buttons, cannot selected, pressed.

example (that not work me...)

                    <div class="form-group row">                         <div class="col-sm-2">                             <label for="section" style="text-align:right">section</label>                         </div>                         <div class="col-sm-10">                             <label align=center>                                 <input class="btn btn-info" name="section" id="non-smoking" value="non-smoking">                             </label>                             <label>                                 <input class="btn btn-warning" name="section" id="smoking" value="smoking">                             </label>                          </div>                     </div> 

the official site suggest use button.js provided bootstrap.

take here: getbootstrap.com/javascript/#buttons-checkbox-radio

add data-toggle="buttons" .btn-group containing checkbox or radio inputs enable toggling in respective styles.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <div class="btn-group" data-toggle="buttons">    <label class="btn btn-primary active">      <input type="radio" name="options" id="option1" autocomplete="off" checked>radio 1 (preselected)    </label>    <label class="btn btn-primary">      <input type="radio" name="options" id="option2" autocomplete="off">radio 2    </label>    <label class="btn btn-primary">      <input type="radio" name="options" id="option3" autocomplete="off">radio 3    </label>  </div>

the above snippet works standard bootstrap installation.