Text box arrangement in one row

Question

I am trying to arrange text boxes in one row using bootstreap3, Problem is text boxes are overlapped I want to remove overlapping and want to show data in one row. Demo of below code is http://jsfiddle.net/xrcwrn/h5A33/

My code is

<form  id="addExpense" action="AddedExpense" method="post">
                        <div class="expenseDetails" >
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <div class="panel-info"><h4>Add Your Expenses <a href="#" id="add"><span class="glyphicon-plus" data-toggle="tooltip" data-placement="bottom" title="Click to add new expense"></span></a></h4></div>
                                </div>
                                <div class="panel-body">
                                    <div class="row" id="0">
  <div class="form-group col-xs-1 col-sm-1 col-lg-1">
     <label>Expensed Type</label>
      <input  type="text"/>
  </div>
  <div class="form-group col-xs-1 col-sm-1 col-lg-1">
 <label>Amount</label>
  <input  type="text" name="expenseList[0].value" "/>
  </div>
 <div class="form-group col-xs-1 col-sm-1 col-lg-1">
  <label>Date</label>
   <input  type="text" name="expenseList[0].dt" " cssClass="dt"/>
  </div>
  <div class="form-group col-xs-1 col-sm-1 col-lg-1">
   <label>Desc</label>
   <input  type="text" name="expenseList[0].description"/>
  </div>
 <div class="form-group col-xs-1 col-sm-1 col-lg-1">
     <label>Receipt</label>
      <input  type="text" name="expenseList[0].img" />
 </div>
 <div class="form-group col-xs-1 col-sm-1 col-lg-1 cl">
    <label >Delete</label>
    <img src="images/delete.png" class="delete"/>
 </div>
   </div>
  </div>
 </div>
                            <div class="col-xs-4 right">
                                <button type="submit" class="btn btn-success">Save</button>
                            </div>
                        </div>
                    </form>   

Answer 1

The main reason for this is you have not given your inputs the .form-control class. There's also some mistakes in your markup with errant extra quotes which you should fix, but that's not the cause for the overlap issues.

Additionally, it's unnecessary to have col-xs-1, col-sm-1, col-lg-1. Using the xs class by itself will suffice. Think of column classes as being additive. Adding col-xs-1 is sort of like saying, "make this column 1/12th at every breakpoint from this point forward until I tell you otherwise."

As you have 6 elements, I actually made each 2 grid units each below. That will help a little with the word wrapping in your labels at the smallest width devices.

HTML:

<form id="addExpense" action="AddedExpense" method="post">
    <div class="expenseDetails">
        <div class="panel panel-info">
            <div class="panel-heading">
                <div class="panel-info">
                     <h4>Add Your Expenses <a href="#" id="add"><span class="glyphicon-plus" data-toggle="tooltip" data-placement="bottom" title="Click to add new expense"></span></a></h4>

                </div>
            </div>
            <div class="panel-body">
                <div class="container">
                    <div class="row" id="0">
                        <div class="form-group col-xs-2">
                            <label>Expensed Type</label>
                            <input type="text" class="form-control" />
                        </div>
                        <div class="form-group col-xs-2">
                            <label>Amount</label>
                            <input type="text" class="form-control" name="expenseList[0].value" />
                        </div>
                        <div class="form-group col-xs-2 ">
                            <label>Date</label>
                            <input type="text " class="form-control" name="expenseList[0].dt " cssClass="dt " />
                        </div>
                        <div class="form-group col-xs-2">
                            <label>Desc</label>
                            <input type="text " class="form-control" name="expenseList[0].description " />
                        </div>
                        <div class="form-group col-xs-2">
                            <label>Receipt</label>
                            <input type="text " class="form-control" name="expenseList[0].img " />
                        </div>
                        <div class="form-group col-xs-2 cl ">
                            <label>Delete</label>
                            <img src="images/delete.png " class="delete " />
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 right">
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
            </div>
        </div>
    </div>
</form>

EDIT - Better explanation for col classes:

Column classes allow you to specify the number of grid units that a column should occupy. By default, each row can hold 12 grid units before it will wrap to the next line.

The xs, sm, md, and lg portion of the col class corresponds to a specific breakpoint.

Bootstrap 3 is mobile first, so if you specify a col class at the xs size, you only need to specify another col class if you want a different behavior on a wider screen.

For example, if you want 6 grid units (which is 2 columns or 50%) for all screens BUT you want 3 grid units (which is 4 columns or 25%) on lg screens (1200px+), you would write: class="col-xs-6 col-lg-3". The result is that on all devices that are less than 1200px, you will have 2 columns and anything over 1200px will be 4 columns.