Form inline inside a form horizontal in twitter bootstrap

Question

What s the best way to design a form that looks like this  please see link below  in twitter bootstrap without any homemade classes    Is it possible to set a inner form-inline inside a form-horizontal like the below example

User · Accepted Answer

Don t nest  lt form gt  tags  that will not work  Just use Bootstrap classes     Bootstrap 3   lt form class  form-horizontal  role  form  gt       lt div class  form-group  gt         lt label for  inputType  class  col-md-2 control-label  gt Type lt  label gt         lt div class  col-md-3  gt             lt input type  text  class  form-control  id  inputType  placeholder  Type  gt         lt  div gt       lt  div gt       lt div class  form-group  gt           lt span class  col-md-2 control-label  gt Metadata lt  span gt           lt div class  col-md-6  gt               lt div class  form-group row  gt                   lt label for  inputKey  class  col-md-1 control-label  gt Key lt  label gt                   lt div class  col-md-2  gt                       lt input type  text  class  form-control  id  inputKey  placeholder  Key  gt                   lt  div gt                   lt label for  inputValue  class  col-md-1 control-label  gt Value lt  label gt                   lt div class  col-md-2  gt                       lt input type  text  class  form-control  id  inputValue  placeholder  Value  gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  form gt    You can achieve that behaviour in many ways  that s just an example  Test it on this bootply  Bootstrap 2   lt form class  form-horizontal  gt       lt div class  control-group  gt           lt label class  control-label  for  inputType  gt Type lt  label gt           lt div class  controls  gt               lt input type  text  id  inputType  placeholder  Type  gt           lt  div gt       lt  div gt       lt div class  control-group  gt           lt span class  control-label  gt Metadata lt  span gt           lt div class  controls form-inline  gt               lt label for  inputKey  gt Key lt  label gt               lt input type  text  class  input-small  placeholder  Key  id  inputKey  gt               lt label for  inputValue  gt Value lt  label gt               lt input type  password  class  input-small  placeholder  Value  id  inputValue  gt           lt  div gt       lt  div gt   lt  form gt    Note that I m using  form-inline to get the propper styling inside a  controls  You can test it on this jsfiddle

User · Answer

Since bootstrap 4 use div class  form-row  in combination with div class  form-group col-X   X is the width you need  You will get nice inline columns  See fiddle    lt form class  form-horizontal  name  FORMNAME  method  post  action  ACTION  enctype  multipart form-data  gt       lt div class  form-group  gt           lt label class  control-label col-sm-2  for  naam  gt Naam  amp nbsp   lt  label gt           lt div class  col-sm-10  gt               lt input type  text  require class  form-control  id  naam  name  Naam  placeholder  Uw naam  value   --NAAM--    gt               lt div id  naamx  class  form-error form-hidden  gt Wat is uw naam  lt  div gt           lt  div gt       lt  div gt        lt div class  form-row  gt            lt div class  form-group col-5  gt               lt label class  control-label col-sm-4  for  telefoon  gt Telefoon  amp nbsp   lt  label gt               lt div class  col-sm-12  gt                   lt input type  tel  require class  form-control  id  telefoon  name  Telefoon  placeholder  Telefoon nummer  value   --TELEFOON--    gt                   lt div id  telefoonx  class  form-error form-hidden  gt Wat is uw telefoonnummer  lt  div gt               lt  div gt           lt  div gt            lt div class  form-group col-5  gt               lt label class  control-label col-sm-4  for  email  gt E-mail   lt  label gt               lt div class  col-sm-12  gt                   lt input type  email  require class  form-control  id  email  name  E-mail  placeholder  E-mail adres  value   --E-MAIL--    gt                   lt div id  emailx  class  form-error form-hidden  gt Wat is uw e-mail adres  lt  div gt                       lt  div gt                   lt  div gt            lt  div gt        lt div class  form-group  gt           lt label class  control-label col-sm-2  for  titel  gt Titel  amp nbsp   lt  label gt           lt div class  col-sm-10  gt               lt input type  text  require class  form-control  id  titel  name  Titel  placeholder  Titel van uw vraag of aanbod  value   --TITEL--    gt               lt div id  titelx  class  form-error form-hidden  gt Wat is de titel van uw vraag of aanbod  lt  div gt           lt  div gt       lt  div gt   lt from gt

User · Answer

This uses twitter bootstrap 3 x with one css class to get labels to sit on top of the inputs   Here s a fiddle link  make sure to expand results panel wide enough to see effect   HTML      lt div class  row myform  gt        lt div class  col-md-12  gt           lt form name  myform  role  form  novalidate gt              lt div class  form-group  gt                 lt label class  control-label  for  fullName  gt Address Line lt  label gt                 lt input required type  text  name  addr  id  addr  class  form-control  placeholder  Address   gt              lt  div gt               lt div class  form-inline  gt                 lt div class  form-group  gt                    lt label gt State lt  label gt                    lt input required type  text  name  state  id  state  class  form-control  placeholder  State   gt                 lt  div gt                  lt div class  form-group  gt                    lt label gt ZIP lt  label gt                    lt input required type  text  name  zip  id  zip  class  form-control  placeholder  Zip   gt                 lt  div gt              lt  div gt               lt div class  form-group  gt                 lt label class  control-label  for  country  gt Country lt  label gt                 lt input required type  text  name  country  id  country  class  form-control  placeholder  country   gt              lt  div gt           lt  form gt        lt  div gt     lt  div gt    CSS    myform input form-control      display  block      allows labels to sit on input when inline       margin-bottom  15px     gives padding to bottom of inline inputs

User · Answer

For bootstrap 3 example above works but is overcomplicated, rather than using form-group use form-inline for the fields you want inline.

Eg:

<div class="form-group">
     <label>CVV</label>
     <input type="text" size="4" class="form-control" />
</div>

<div class="form-inline">
      <label>Expiration (MM/YYYY)</label><br>
      <input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>

User · Answer

I know this is an old answer but here is what I usually do:

CSS:

.form-control-inline {
   width: auto;
   float:left;
   margin-right: 5px;
}

Then wrap the fields you want to be inlined in a div and add .form-control-inline to the input, example:

HTML

<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>

User · Answer

to make it simple  just add a class  form-inline  before the input   example      lt div class  col-md-4 form-inline  gt    add the class here          lt label gt Lot Size  lt  label gt        lt input type  text  value    name    class  form-control   gt    lt  div gt

[html] Form inline inside a form horizontal in twitter bootstrap?

The answer is

Bootstrap 3

Bootstrap 2

Examples related to html

Examples related to forms

Examples related to twitter-bootstrap

Tags