CODEWITHSUNDEEP
csstwitter-bootstrap
s k
s k

Reputation: 5192

Bootstrap form-group for Radio Buttons

Can anyone please shed some light on how to format Radio Buttons in Bootstraps form-group?

It gets into problem if there are too many radios control and wrap around to the next line. The bootstrap control box will not expend to fit everything.

Attached sample below which had been simplified for illustration purposes.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group has-feedback">
  <label class="control-label" for="mRadio">Radio Test</label>
  <div id="mRadio" class="form-control">
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 1</label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 2</label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 3</label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 4</label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 5</label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 6</label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 7</label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 8</label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 9</label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 10</label>
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

Upvotes: 2

Views: 7578

Answers (1)

matthewelsom
matthewelsom

Reputation: 944

Add this css to overwrite the height set by bootstrap 

.form-control {height: auto;}

Upvotes: 3

Related Questions