Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Twitter Bootstrap

Bootstrap 3 2-column Form Layout

Post a Comment
I am still learning the proper use of Bootstrap 3 and was wondering if you all could help me out. I would like a layout something like this: Label Label Text

Solution 1:

As mentioned earlier, you can use the grid system to layout your inputs and labels anyway that you want. The trick is to remember that you can use rows within your columns to break them into twelfths as well.

The example below is one possible way to accomplish your goal and will put the two text boxes near Label3 on the same line when the screen is small or larger.

<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"rel="stylesheet"/><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]--></head><body><divclass="row"><divclass="col-xs-6 form-group"><label>Label1</label><inputclass="form-control"type="text"/></div><divclass="col-xs-6 form-group"><label>Label2</label><inputclass="form-control"type="text"/></div><divclass="col-xs-6"><divclass="row"><labelclass="col-xs-12">Label3</label></div><divclass="row"><divclass="col-xs-12 col-sm-6"><inputclass="form-control"type="text"/></div><divclass="col-xs-12 col-sm-6"><inputclass="form-control"type="text"/></div></div></div><divclass="col-xs-6 form-group"><label>Label4</label><inputclass="form-control"type="text"/></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script></body></html>

http://jsfiddle.net/m3u8bjv0/2/

Solution 2:

You could use the bootstrap grid system :

<divclass="col-md-6 form-group"><labelfor="textbox1">Label1</label><inputclass="form-control"id="textbox1"type="text"/></div><divclass="col-md-6 form-group"><labelfor="textbox2">Label2</label><inputclass="form-control"id="textbox2"type="text"/></div><spanclass="clearfix">

http://getbootstrap.com/css/#grid

Is that what you want to achieve?

Solution 3:

You can use the bootstrap grid system. as Yoann said

<divclass="container"><divclass="row"><formrole="form"><divclass="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4"><labelfor="exampleInputEmail1">Email address</label><inputtype="email"class="form-control"id="exampleInputEmail1"placeholder="Enter email"></div><divclass="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4"><labelfor="exampleInputEmail1">Name</label><inputtype="text"class="form-control"id="exampleInputEmail1"placeholder="Enter Name"></div><divclass="clearfix"></div><divclass="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4"><labelfor="exampleInputPassword1">Password</label><inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password"></div><divclass="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4"><labelfor="exampleInputPassword1">Confirm Password</label><inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Confirm Password"></div></form><divclass="clearfix"></div></div></div>

Post a Comment for "Bootstrap 3 2-column Form Layout"