<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-8 col-xs-5"> <h4>Type inside the field areas below<small>....</small></h4> </div> </div> <div class="row"> <div class="col-md-2 col-sm-3 col-xs-5"> <div class="input-group"> <input type="text" class="form-control frm-top" aria-label="..." id="item_ln1" data-toggle="tooltip" title="Required field ..." placeholder="302" name="textline1" spellcheck="true" maxlength="4"> <span class="input-group-addon" id="NAbox_1"> <input type="checkbox" aria-label="N/A" id="item_ln1_required" name="item_ln1_required" value="aa" data-toggle="tooltip" title="Not applicable..."> N/A </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> <br /> <div class="row"> <div class="col-md-3 col-sm-4 col-xs-7"> <div class="input-group"> <input type="text" class="form-control frm-middle" aria-label="..." id="item_ln2" data-toggle="tooltip" title="Required field ..." placeholder="Room Name" name="textline2" spellcheck="true" maxlength="20"> <span class="input-group-addon" id="NAbox_2"> <input type="checkbox" aria-label="N/A" id="item_ln2_required" name="item_ln2_required" value="bb" data-toggle="tooltip" title="Not applicable..."> N/A </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> <div class="row"> <div class="col-md-3 col-sm-4 col-xs-7"> <div class="input-group"> <input type="text" class="form-control frm-bottom" aria-label="..." id="item_ln3" data-toggle="tooltip" title="Required field ..." placeholder="Line 2" name="textline3" spellcheck="true" maxlength="20"> <span class="input-group-addon" id="NAbox_3"> <input type="checkbox" aria-label="N/A" id="item_ln3_required" name="item_ln3_required" value="cc" data-toggle="tooltip" title="Not applicable..."> N/A </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> <div class="row"> <div class="col-md-3 col-sm-4 col-xs-7"> <div class="input-group"> <input type="text" class="form-control" aria-label="..." id="item_ln4" data-toggle="tooltip" title="Required field ..." placeholder="Line 3" name="textline4" spellcheck="true" maxlength="20"> <span class="input-group-addon" id="NAbox_4"> <input type="checkbox" aria-label="N/A" id="item_ln4_required" name="item_ln4_required" value="dd"> N/A </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> <h5 class="push-rgt20"><input type="checkbox" name="text_accurate" role="text_accurate"> I confirm that the text is accurate</h5> </div><!-- /.container --> <div class="col-md-4 col-sm-4"> <p class="text-center"><strong>Type inside the field areas below...</strong></p> <div class="form-group fm"> <div class="fm-bg col-md-8"> <input id="item_ln1" data-toggle="tooltip" title="Required field ..." class="form-control text-left frm-top" placeholder="302" name="textline1" spellcheck="true" maxlength="4"> </div> <div class="checkbox col-md-1" id="NAbox_1"><input type="checkbox" id="item_ln1_required" name="item_ln1_required" value="aa" /> NA</div> <br><br> <div class="fm-bg col-md-8"> <input id="item_ln2" data-toggle="tooltip" title="Required field ..." class="form-control text-left frm-top push-rgt20" placeholder="Room Name" name="textline2" spellcheck="true" maxlength="20"> </div> <div class="checkbox col-md-1" id="NAbox_2"><input type="checkbox" id="item_ln2_required" name="item_ln2_required" value="bb" /> NA</div> <div class="fm-bg col-md-8"> <input id="item_ln3" data-toggle="tooltip" title="Required field ..." class="form-control text-left frm-middle push-rgt20" placeholder="Line 2" name="textline3" spellcheck="true" maxlength="20"> </div> <div class="checkbox col-md-1" id="NAbox_3"><input type="checkbox" id="item_ln3_required" name="item_ln3_required" value="cc" /> NA</div> <div class="fm-bg col-md-8"> <input id="item_ln4" data-toggle="tooltip" title="Required field ..." class="form-control text-left frm-bottom push-rgt20" placeholder="Line 3" name="textline4" spellcheck="true" maxlength="20"> </div> <div class="checkbox col-md-1" id="NAbox_4"><input type="checkbox" id="item_ln4_required" name="item_ln4_required" value="dd" /> NA</div> <h4 class="push-rgt20"><input type="checkbox" name="text_accurate" role="text_accurate"> I confirm that the text is accurate</h4> </div> </div>

.brd {border:1px solid #ccc; width:25%; margin:20px;}