CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Graham Charles
Graham Charles

Reputation: 9632

add text input to inline radio buttons

What's the Bootstrappy way of adding a short text INPUT to a row of inline radio buttons?

I've tried wrapping in a <div class="col-xs-2"> to the right of the list of radio buttons, but that puts it into its own grid space, of course.

Here's my bootply trying a few more variants, none of which get to the desired result of an text field inline with horizontal radios : http://www.bootply.com/95891

The only thing that sort-of works is setting an explicit pixel width on the INPUT, but that doesn't stay in the inline row as the form is sized smaller.

Upvotes: 6

Views: 21028

Answers (2)

Abram
Abram

Reputation: 41944

For bootstrap 4 you could consider adding a radio input group https://getbootstrap.com/docs/4.1/components/input-group/#checkboxes-and-radios

Upvotes: 1

zessx
zessx

Reputation: 68810

You could use .form-inline, then you won't have to fix any width on your input:text :

enter image description here

<div class="container">
  <form class="form-inline" role="form">
    <div class="form-group">
      <label class="control-label">Amount</label>
    </div>
    <div class="form-group">
      <div class="radio">
        <label class="radio-inline control-label">
          <input type="radio" id="amount_25" name="amount" value="25" checked="">
          $25.00
        </label>
      </div>
    </div>
    <div class="form-group">
      <div class="radio">
        <label class="radio-inline control-label">
          <input type="radio" id="amount_50" name="amount" value="50">
          $50.00
        </label>
      </div>
    </div>
    <div class="form-group">
      <div class="radio">
        <label class="radio-inline control-label">
          <input type="radio" id="amount_100" name="amount" value="100">
          $100.00
        </label>
      </div>
    </div>
    <div class="form-group">
      <div class="radio">
        <label class="radio-inline control-label">
          <input type="radio" id="amount_other" name="amount" value="Other: $">
          Other: $
        </label>
      </div>
    </div>
    <div class="form-group">
      <input placeholder="Amount" type="text" class="form-control" id="amount_actual" name="amount_actual" maxlength="5" data-rule-required="true" contenteditable="false">
    </div>
  </form>
</div>

Bootply

Upvotes: 11

Related Questions