Dividing form into two columns with twitter bootstrap

Question

What is the correct way to style form with bootstrap in the following scenario:

1. I need to use fieldset (that will be styled later)

2. I need to divide form into two columns

3. Each column has label+control, some will have label+control1+control2 etc.

I am new to bootstrap. I have come to the following solution (jsfiddle).

The question is: is this the correct way to do this? Does it not violate the bootstrap semantics?

I do not understand when to use form-group, am I using it correctly?

Should I not include some class="row" here for correct semantics?

HTML:

<div class="container">
... <some content here> ....

<form class="form-horizontal">
    <fieldset>
        <legend>Portfolio</legend>
        <div class="col-xs-6">
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label">Label1</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" placeholder="control1" />
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label">label2</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" placeholder="control2" />
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label">label3</label>
                <div class="col-xs-8 form-inline">
                    <div class="form-group col-xs-6">
                        <input type="text" class="form-control" placeholder="control1" />
                    </div>
                    <div class="form-group col-xs-6">
                        <input type="text" class="form-control" placeholder="control2" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label">Label1</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" placeholder="control1" />
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label">label2</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" placeholder="control2" />
                </div>
            </div>
        </div>
    </fieldset>
</form>
</div>

I have seen all Bootstrap form examples, but I do not get how to separate form into two columns. I have also read the whole documentation, but I feel that this is not the right way how to use col and other classes.

Answer 1

I face this problem with bootstrap 4 and I found that whenever we want to divide inside our form into many columns we should use container and row class. because the bootstrap grid take its style from its parent (.container and .row)

see this example :

  <main>
    <div class="container-fluid mt-3">
        <div class="row">
            <form  method="post">
                <div class="container-fluid">
                    <div class="row">
                     <div class="col-md-6"> 
                       <div class="input-group">
                          <div class="col-md-3">
                            <label class="form-controllabel">Full Name</label>
                          </div>
                          <div class="col-md-9">
                            <input type="text" />
                            </div>
                         </div>

                    <div class="input-group">
                          <div class="col-md-3">
                            <label class="form-controllabel">fatherName</label>
                          </div>
                          <div class="col-md-9">
                            <input type="text" />
                            </div>
                    </div>
                   <div class="input-group">
                          <div class="col-md-3">
                            <label class="form-controllabel">LastName</label>
                          </div>
                          <div class="col-md-9">
                            <input type="text" />
                            </div>
                     </div>
                            

         <div class="col-md-6">
                           
                <div class="input-group">
                          <div class="col-md-3">
                            <label class="form-controllabel">salary</label>
                          </div>
                          <div class="col-md-9">
                            <input type="text" />
                            </div>
               </div>

              <div class="input-group">
                          <div class="col-md-3">
                            <label class="form-controllabel">tax</label>
                          </div>
                          <div class="col-md-9">
                            <input type="text" />
                            </div>
               </div>
                 
                <button type="submit">save</button>   
                                    
        </div>

                            
                    </div>
                </div>
            </form>
        </div>
    </div>
</main>

I'am sure it will work!

Answer 2

Column separation happens inside container elements.
Each time you have an element you want to do grid inside it, give it class="container" and in it u can use the normal row and column classes.

Also check Bootstrap's out of the box form styles.

Below are the bare bones, add on to it what u need (like text align etc)

<form class="container">
    <div class="row">
        <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div>

        <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div>

    </div>
</form>