Combining horizontal and inline form using Bootstrap 3

Question

I'm trying to combine horizontal and inline form using Bootstrap 3 without luck. What I'm trying to do is:

Invoice date:  [      ]
Customer:      [                                  V]
Items:         [product     V] [amount ] [quantity ]
               [product     V] [amount ] [quantity ]

Where invoice date and customer are typical horizontal controls. And items is tabular data for which I think form-inline class can be used.

Anyone experienced combining horizontal and inline form and has some tips for me?

Sean Ryan · Accepted Answer · 2013-11-11 02:44:39Z

I would do something like this: http://bootply.com/93346

<div class="container">
  <div class="row">
    <div class="col-sm-2">
      <label>Invoice Date</label>
    </div>
    <div class="col-sm-2">
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2">
      <label>Customer</label>
    </div>
    <div class="col-sm-6">
      <select class="form-control">
        <option>select</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2">
      <label>Items</label>
    </div>
    <div class="col-sm-2">
      <select class="form-control">
        <option>select</option>
      </select>
    </div>
    <div class="col-sm-2">
      <input type="text" class="form-control">
    </div>
    <div class="col-sm-2">
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2 col-sm-offset-2">
      <select class="form-control">
        <option>select</option>
      </select>
    </div>
    <div class="col-sm-2">
      <input type="text" class="form-control">
    </div>
    <div class="col-sm-2">
      <input type="text" class="form-control">
    </div>
  </div>
</div>

Marcel Overdijk · Accepted Answer · 2013-11-11 20:01:19Z

Thanks Sean for pointing me in the right direction. I ended up using the following:

<forn action="/invoice" method="post" class="form-horizontal">
    <div class="form-group ">
        <label for="invoiceDate" class="control-label col-lg-2 required">Date</label>
        <div class="col-lg-2">
            <input name="date" class="form-control" />
        </div>
    </div>
    <hr />
    <div class="form-group">
        <label class="control-label col-lg-2 required">Item 1</label>
        <div class="col-lg-10">
            <div class="row">
                <div class="col-sm-8">
                    <select class="form-control">
                        <option>select</option>
                    </select>
                </div>
                <div class="col-sm-2">
                    <input type="text" class="form-control">
                </div>
                <div class="col-sm-2">
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-lg-2 required">Item 2</label>
        <div class="col-lg-10">
            <div class="row">
                <div class="col-sm-8">
                    <select class="form-control">
                        <option>select</option>
                    </select>
                </div>
                <div class="col-sm-2">
                    <input type="text" class="form-control">
                </div>
                <div class="col-sm-2">
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
    </div>
    ..

Collectives™ on Stack Overflow

Combining horizontal and inline form using Bootstrap 3

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related