Bootstrap 3 2-column form layout

Question

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 Textbox                      Textbox  Label                        Label Textbox                      Textbox  Label                        Label Textbox Textbox              Textarea   I know that if I use the  form-group it will allow me to accomplish the Label over the top of the textbox  How can I assure that this happens in a column yet allows for some inline things like the example with the two textboxes alongside each other

User · Answer

You could use the bootstrap grid system :

<div class="col-md-6 form-group">
    <label for="textbox1">Label1</label>
    <input class="form-control" id="textbox1" type="text"/>
</div>
<div class="col-md-6 form-group">
    <label for="textbox2">Label2</label>
    <input class="form-control" id="textbox2" type="text"/>
</div>
<span class="clearfix">

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

Is that what you want to achieve?

User · Answer

You can use the bootstrap grid system  as Yoann said      lt div class  container  gt       lt div class  row  gt           lt form role  form  gt              lt div class  form-group col-xs-10 col-sm-4 col-md-4 col-lg-4  gt                           lt label for  exampleInputEmail1  gt Email address lt  label gt                           lt input type  email  class  form-control  id  exampleInputEmail1  placeholder  Enter email  gt                       lt  div gt                       lt div class  form-group col-xs-10 col-sm-4 col-md-4 col-lg-4  gt                           lt label for  exampleInputEmail1  gt Name lt  label gt                           lt input type  text  class  form-control  id  exampleInputEmail1  placeholder  Enter Name  gt                       lt  div gt                       lt div class  clearfix  gt  lt  div gt                       lt div class  form-group col-xs-10 col-sm-4 col-md-4 col-lg-4  gt                           lt label for  exampleInputPassword1  gt Password lt  label gt                           lt input type  password  class  form-control  id  exampleInputPassword1  placeholder  Password  gt                       lt  div gt                       lt div class  form-group col-xs-10 col-sm-4 col-md-4 col-lg-4  gt                           lt label for  exampleInputPassword1  gt Confirm Password lt  label gt                           lt input type  password  class  form-control  id  exampleInputPassword1  placeholder  Confirm Password  gt                       lt  div gt             lt  form gt            lt div class  clearfix  gt         lt  div gt       lt  div gt   lt  div gt

User · Answer

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    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D     lt head gt  x000D       lt meta charset  utf-8  gt  x000D       lt meta http-equiv  X-UA-Compatible  content  IE edge  gt  x000D       lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 2 css bootstrap min css  rel  stylesheet   gt  x000D   x000D       lt  -- HTML5 shim and Respond js for IE8 support of HTML5 elements and media queries -- gt  x000D       lt  -- WARNING  Respond js doesn t work if you view the page via file    -- gt  x000D       lt  -- if lt IE 9  gt  x000D         lt script src  https   oss maxcdn com html5shiv 3 7 2 html5shiv min js  gt  lt  script gt  x000D         lt script src  https   oss maxcdn com respond 1 4 2 respond min js  gt  lt  script gt  x000D       lt   endif -- gt  x000D     lt  head gt  x000D     lt body gt  x000D       lt div class  row  gt  x000D           lt div class  col-xs-6 form-group  gt  x000D               lt label gt Label1 lt  label gt  x000D               lt input class  form-control  type  text   gt  x000D           lt  div gt  x000D           lt div class  col-xs-6 form-group  gt  x000D               lt label gt Label2 lt  label gt  x000D               lt input class  form-control  type  text   gt  x000D           lt  div gt  x000D           lt div class  col-xs-6  gt  x000D               lt div class  row  gt  x000D                   lt label class  col-xs-12  gt Label3 lt  label gt  x000D               lt  div gt  x000D               lt div class  row  gt  x000D                   lt div class  col-xs-12 col-sm-6  gt  x000D                       lt input class  form-control  type  text   gt  x000D                   lt  div gt  x000D                   lt div class  col-xs-12 col-sm-6  gt  x000D                       lt input class  form-control  type  text   gt  x000D                   lt  div gt  x000D               lt  div gt  x000D           lt  div gt  x000D           lt div class  col-xs-6 form-group  gt  x000D               lt label gt Label4 lt  label gt  x000D               lt input class  form-control  type  text   gt  x000D           lt  div gt  x000D       lt  div gt  x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 2 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 2 js bootstrap min js  gt  lt  script gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    http   jsfiddle net m3u8bjv0 2

[html] Bootstrap 3 2-column form layout

Examples related to html

Examples related to css

Examples related to twitter-bootstrap