CODEWITHSUNDEEP
csstwitter-bootstrap-3
z3r9
z3r9

Reputation: 177

Bootstrap 3 forms

How to create small form for Bootstrap 3?

Example 1:

<div class="well">

    <div class="form-group row">
        <div class="col-lg-2">
            <label for="city" class="control-label">City</label>
            <input type="text" class="form-control" id="city"/>
        </div>
    </div>

    <label for="price" class="control-label">Price</label>
    <div class="form-group row" id="price">
        <div class="col-lg-1">
            <input type="text" class="form-control" />
        </div>
        <div class="col-lg-1">
            <input type="text" class="form-control"/>
        </div>
    </div>

</div>

It is work. But if I add <div class="col-lg-3">, then incorrectly displays a form.

Example 2:

<div class="col-lg-3">
    <div class="well">

    <div class="form-group row">
        <div class="col-lg-2">
            <label for="city" class="control-label">City</label>
            <input type="text" class="form-control" id="city"/>
        </div>
    </div>

    <label for="price" class="control-label">Price</label>
    <div class="form-group row" id="price">
        <div class="col-lg-1">
            <input type="text" class="form-control" />
        </div>
        <div class="col-lg-1">
            <input type="text" class="form-control"/>
        </div>
    </div>

    </div>
</div>

What am I doing wrong?

Upvotes: 2

Views: 18340

Answers (1)

Bora
Bora

Reputation: 10717

Browse following codes:

<div class="col-lg-3">
    <div class="well">
      <div class="form-group row">
          <label for="city" class="col-lg-2 control-label">City</label>
          <div class="col-lg-10">
              <input type="text" class="form-control" id="city" />
          </div>
      </div>

      <div class="form-group row" id="price">
          <label for="price" class="col-lg-2 control-label">Price</label>
          <div class="col-lg-5">
              <input type="text" class="form-control" />
          </div>
          <div class="col-lg-5">
              <input type="text" class="form-control"/>
          </div>
      </div>
    </div>
</div>

Upvotes: 11

Related Questions