6

I would like to know if its possible to create a bootstrap radio btn-group to addon to an input-group?

I know it is possible to create something like my snippet code shows, but I would like to create it where the two radio buttons are hidden and styled like the ones in the image below shows:

enter image description here

I would like them to be actual radio buttons since its standard practice to choose either. I dont want them to just be buttons.

I have tried to style the radio buttons like the image but its not working correctly for me, so any help will be great.

Thanks.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="input-group">
        <!-- class="input-group-addon" -->
        <input type="text" class="form-control" placeholder="some info here" aria-label="text input checkbox">
        <span class="input-group-addon">
        <input type="radio" aria-label="checkbox inside input group"> Female</span>
        <span class="input-group-addon">
        <input type="radio" aria-label="checkbox inside input group"> Male</span>

      </div>
    </div>
  </div>
</div>

0

2 Answers 2

10

You can try this, it seems to accomplish what your question is about.

You can just swap out btn-group with input-group-btn See Multiple Button Groups

<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <div class="row">
    <div class="col-md-6">

      <div class="input-group">

        <input type="text" class="form-control" placeholder="Hello">

        <div class="input-group-btn" data-toggle="buttons">
          <label class="btn btn-primary active">
            <input type="radio" name="options" id="option1" autocomplete="off" checked>Radio 1
          </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>

      </div>

    </div>
  </div>
</div>
<hr>

1
  • Any update for Bootstrap 5 ? I’ve shuffled this in all kind of different ways but no luck.
    – Fritzip
    Jan 10 at 15:58
0

Try this..

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="btn-group" data-toggle="buttons">
        <!-- class="input-group-addon" -->
        <label class="">
          <input type="text" id="text-input" class="form-control" placeholder="some info here" aria-label="text input checkbox">
        </label>
        <label class="btn btn-primary">
          <input type="radio" name="options" id="option1">Male
        </label>
        <label class="btn btn-primary">
          <input type="radio" name="options" id="option1">Female
        </label>

      </div>
    </div>
  </div>
</div>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.