Syed Syed - 22 days ago 10
CSS Question

Align in a straight row of DOM elements using bootstrap

I'm using bootstrap now for my design, earlier I used table, tr and td and it worked fine. But now, the design gets changed and I want to see both elements in a single row.

Here is my code

<div class="row">
<div class="col-xs-6">
<div class="input-group">
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<input type="text" class="form-control" />

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


jsfiddle is here


https://jsfiddle.net/Z4ntn/438/

On top of it I would like to build similar kind in another rows.

Plz let me know what went wrong and what needs to be updated to see both in a single row.

Answer

Bootstrap says form-inline for elements in same line

like this

<div class="row">
  <div class="col-xs-6">
     <div class="form-inline">
        <div class="radio">
          <label><input type="radio" name="optradio">Option 1</label>
        </div>
        <input type="text" class="form-control"/>

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

EDIT

Bootply: Form-inline