Place radio and text inline

user_13762917 0
Viewed 79

I want this result like Bootstrap 5 - Place Radio Buttons Inline and a Radio Input Group next to each other But he uses bootstrap 5, I use bootstrap 3.3.7 so it does not work.

<div class="d-flex">
    <div class="form-check form-check-inline">
    <input class='form-check-input' type='radio' />
    <label class='form-check-label'>Y</label>
    </div>
    <div class="form-check form-check-inline">
    <input class='form-check-input' type='radio' />
    <label class='form-check-label text-nowrap'>N</label>
    </div>
    <div class="input-group input-group-sm">
    <label>XXX</label><input type='text' />
    </div>
</div>
Thank Gerard. But it's different from my thought.

inline css
1 Answers

You can add additional CSS to modify the alignment.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-1 col-xs-2">
    <input type='radio' />
    <label>Y</label>
  </div>
  <div class="col-md-1 col-xs-2">
    <input type='radio' />
    <label>N</label>
  </div>
  <div class="col-md-4">
    <label>XXX</label><input type='text' />
  </div>
</div>

user_31320190
Related