Syed Syed - 19 days ago 4
CSS Question

vertically align textbox using bootstrap classes

I've made 5 rows using bootstrap, they got placed neatly, but there is a small issue. The rows are getting in contact without leaving any gap. I should not use
, this will bring a big gap, and the textboxes in each row should be vertically align, if there is no radio button in that row, that corresponding place should be kept empty and textbox should get aligned properly with all rows. The starting textbox in all rows should start at the same place where the first row textbox has started. Here is my code

<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<div class="radio" style="width: 100px;">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" />

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

<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<div class="radio" style="width: 100px;">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
<div class="form-group">
<label for="sel1">Select list:</label> <select
class="form-control" id="sel1">
<option>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<input type="text" class="form-control" /> <input type="text"
class="form-control" /> <input type="text" class="form-control" />
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<div class="radio" style="width: 100px;">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
<div class="form-group">
<label for="sel1">Select list:</label> <select
class="form-control" id="sel1">
<option>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<input type="text" class="form-control" /> <input type="text"
class="form-control" /> <input type="text" class="form-control" />
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
</div>
</div>
</div>
</div>


Please check in browser not in fiddle because it changes alignments .

Answer

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="form-inline form-group">
                <div class="radio" style="width:95px;" >
                    <label><input type="radio" name="optradio" style="vertical-align:middle;"> &nbsp; Option
                        1</label>
                </div>
                <input type="text" class="form-control" />

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

    <div class="row">
        <div class="col-xs-12">
            <div class="form-inline form-group">
                <div class="radio" style="width:95px;" >
                    <label><input type="radio" name="optradio">Option
                        1</label>
                </div>
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" />
                <div class="form-group">
                    <label for="sel1">Select list:</label> <select
                        class="form-control" id="sel1">
                        <option>Apple</option>
                        <option>Mango</option>
                        <option>Orange</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 col-md-offset-1">
            <div class="form-inline form-group">
          
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" /> <input type="text" class="form-control" />
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="form-inline form-group">
                <div class="radio" style="width:95px;">
                    <label><input type="radio" name="optradio">Option
                        1</label>
                </div>
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" />
                <div class="form-group">
                    <label for="sel1">Select list:</label> <select
                        class="form-control" id="sel1">
                        <option>Apple</option>
                        <option>Mango</option>
                        <option>Orange</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 col-md-offset-1">
            <div class="form-inline form-group">
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" /> <input type="text" class="form-control" />
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" />
            </div>
        </div>
    </div>
</div> 

Here is JSFIDDLE