Split form into two columns using Twitter bootstrap

Question

How to format a form using bootstrap in the following scenario:

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

2. I need to split form into two columns

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

I am new to the initial stage. I came to the following solution (jsfiddle) .

The question is: is this the right way to do this? Doesn't that violate boot semantics?

I don’t understand when to use form-group , am I using it correctly?

Shouldn't I include some class="row" here for proper 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 examples of Bootstrap forms, but I don’t understand how to split form into two columns. I also read all the documentation , but I feel this is not the right way to use col and other classes.

Answer 1

Column separation occurs inside container elements.
Each time you have an element that you want to make with a grid inside, give it class="container" , and in it you can use the usual row and column classes.

Also check out Bootstrap from box shape styles.

Below are the bare bones, add to it what you need (e.g. text alignment, 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>