Label on the left side instead above an input field

Question

I would like to have the labels not above the input field  but on the left side     lt form method  post  action    role  form  class  form-inline  gt     lt div class  form-group  gt       lt label for  rg-from  gt Ab   lt  label gt       lt input type  text  id  rg-from  name  rg-from  value    class  form-control  gt     lt  div gt     lt div class  form-group  gt       lt label for  rg-to  gt Bis   lt  label gt       lt input type  text  id  rg-to  name  rg-to  value    class  form-control  gt     lt  div gt     lt div class  form-group  gt       lt input type  button  value  Clear  class  btn btn-default btn-clear  gt        lt input type  submit  value  Los   class  btn btn-primary  gt     lt  div gt   lt  form gt    This code gives me     I would like to have

User · Answer

It seems adding style  width inherit   to the inputs works fine  jsfiddle demo

User · Answer

No CSS required  This should look fine on your page  You can set col-md-  as per your needs   x000D   x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  rel  stylesheet  gt  x000D   lt div class  row  gt  x000D                               lt div class  col-md-12  gt  x000D                                   lt form class  form-inline  role  form  gt  x000D                                       lt div class  col  gt  x000D                                           lt div class  form-group  gt  x000D                                               lt label for  inputEmail  class  col-sm-3  gt Email lt  label gt  x000D                                               lt input type  email  class  form-control col-sm-7  id  inputEmail  placeholder  Email  gt  x000D                                           lt  div gt  x000D                                       lt  div gt  x000D                                       lt div class  col  gt  x000D                                           lt div class  form-group  gt  x000D                                               lt label for  inputPassword  class  col-sm-3  gt Email lt  label gt  x000D                                               lt input type  password  class  form-control col-sm-7  id  inputPassword  placeholder  Email  gt  x000D                                           lt  div gt  x000D                                       lt  div gt  x000D                                       x000D                                       lt button class  btn btn-primary  gt Button 1 lt  button gt  x000D                                       amp nbsp  amp nbsp  x000D                                       lt button class  btn btn-primary  gt Button 2 lt  button gt  x000D                                   lt  form gt  x000D                               lt  div gt  x000D                           lt  div gt  x000D   x000D   x000D

User · Answer

You can see from the existing answers that Bootstrap s terminology is confusing  If you look at the bootstrap documentation  you see that the class form-horizontal is actually for a form with fields below each other  i e  what most people would think of as a vertical form  The correct class for a form going across the page is form-inline  They probably introduced the term inline because they had already misused the term horizontal   You see from some of the answers here that some people are using both of these classes in one form  Others think that they need form-horizontal when they actually want form-inline   I suggest to do it exactly as described in the Bootstrap documentation    lt form class  form-inline  gt     lt div class  form-group  gt       lt label for  nameId  gt Name lt  label gt       lt input type  text  class  form-control  id  nameId  placeholder  Jane Doe  gt     lt  div gt   lt  form gt    Which produces

User · Answer

You can use a span tag inside the label     lt div class  form-group  gt       lt label for  rg-from  gt         lt span gt Ab  lt  span gt          lt input type  text  id  rg-from  name  rg-from  value    class  form-control  gt       lt  label gt     lt  div gt

User · Answer

I had the same problem  here is my solution    lt form method  post  class  form-inline form-horizontal  role  form  gt           lt label class  control-label col-sm-5  for  jbe  gt  lt i class  icon-envelope  gt  lt  i gt  Email me things like this   lt  label gt           lt div class  input-group col-sm-7  gt               lt input class  form-control  type  email  name  email  placeholder  your email example com   gt               lt span class  input-group-btn  gt                   lt button class  btn btn-primary  type  submit  gt Submit lt  button gt               lt  span gt           lt  div gt       lt  form gt    here is the Demo

User · Answer

The Bootstrap 3 documentation talks about this in the CSS documentation tab in the section labelled  Requires custom widths   which states       Inputs  selects  and textareas are 100  wide by default in Bootstrap    To use the inline form  you ll have to set a width on the form   controls used within    If you use your browser and Firebug or Chrome tools to suppress or reduce the  width  style  you should see things line up they way you want  Clearly you can then create the appropriate CSS to fix the issue   However  I find it odd that I need to do this at all  I couldn t help but feel this manipulation was both annoying and in the long term  error prone  Ultimately  I used a dummy class and some JS to globally shim all my inline inputs  It was small number of cases  so not much of a concern    Nonetheless  I too would love to hear from someone who has the  right  solution  and could eliminate my shim hack   Hope this helps  and props to you for not blowing a gasket at all the people that ignored your request as a Bootstrap 3 concern

User · Answer

lt div class  control-group  gt      lt label class  control-label  for  firstname  gt First Name lt  label gt      lt div class  controls  gt       lt input type  text  id  firstname  name  firstname   gt      lt  div gt   lt  div gt    Also we can use it Simply as   lt label gt First name       lt input type  text  id  firstname  name  firstname   gt   lt  label gt

User · Answer

Like this  DEMO  HTML   lt div class  row  gt     lt form class  form-inline  gt       lt fieldset gt         lt label class  control-label  gt  lt strong gt AB   lt  strong gt  lt  label gt         lt input type  text  class  input-mini   gt         lt label class  control-label  gt  lt strong gt BIS  lt  strong gt  lt  label gt         lt input type  text  class  input-mini   gt         lt input type  button  value  Clear  class  btn btn-default btn-clear  gt         lt input type  submit  value  Los   class  btn btn-primary  gt       lt  fieldset gt     lt  form gt   lt  div gt

User · Answer

You must float left all elements like so    form-group   form-group label   form-group input   float left  display inline        give some margin to the desired elements      form-group   margin-right 5px     and set the label the same line height as the height of the fields    form-group label   line-height --px

User · Answer

Put the  lt label gt  outside the form-group    lt form class  form-inline  gt     lt label for  rg-from  gt Ab   lt  label gt     lt div class  form-group  gt       lt input type  text  id  rg-from  name  rg-from  value    class  form-control  gt     lt  div gt     lt  -- rest of form -- gt   lt  form gt

User · Answer

I managed to fix my issue with  Seems to work fine and means I dont have to add widths to all my inputs manually    form-inline  form-group input    width  auto

User · Answer

I am sure you would ve already found your answer    here is the solution I derived at   That s my CSS    field   actions       margin-bottom  15px         field label       float  left      width  30       text-align  right      padding-right  10px      margin  5px 0px 5px 0px         field input       width  70       margin  0px        And my HTML      lt h1 gt New customer lt  h1 gt   lt div class  container form-center  gt       lt form accept-charset  UTF-8  action   customers  class  new customer  id  new customer  method  post  gt       lt div style  margin 0 padding 0 display inline  gt  lt  div gt      lt div class  field  gt       lt label for  customer first name  gt First name lt  label gt       lt input class  form-control  id  customer first name  name  customer first name   type  text    gt     lt  div gt     lt div class  field  gt       lt label for  customer last name  gt Last name lt  label gt       lt input class  form-control  id  customer last name  name  customer last name   type  text    gt     lt  div gt     lt div class  field  gt       lt label for  customer addr1  gt Addr1 lt  label gt       lt input class  form-control  id  customer addr1  name  customer addr1   type  text    gt     lt  div gt     lt div class  field  gt       lt label for  customer addr2  gt Addr2 lt  label gt       lt input class  form-control  id  customer addr2  name  customer addr2   type  text    gt     lt  div gt     lt div class  field  gt       lt label for  customer city  gt City lt  label gt       lt input class  form-control  id  customer city  name  customer city   type  text    gt     lt  div gt     lt div class  field  gt       lt label for  customer pincode  gt Pincode lt  label gt       lt input class  form-control  id  customer pincode  name  customer pincode   type  text    gt     lt  div gt     lt div class  field  gt       lt label for  customer homephone  gt Homephone lt  label gt       lt input class  form-control  id  customer homephone  name  customer homephone   type  text    gt     lt  div gt     lt div class  field  gt       lt label for  customer mobile  gt Mobile lt  label gt       lt input class  form-control  id  customer mobile  name  customer mobile   type  text    gt     lt  div gt     lt div class  actions  gt       lt input class  btn btn-primary btn-large btn-block  name  commit  type  submit  value  Create Customer    gt     lt  div gt   lt  form gt   lt  div gt    You can see the working example here    http   jsfiddle net s6Ujm   PS  I am a beginner too  pro designers    feel free share your reviews

User · Answer

You can use form-inline class for each form-group       lt form gt                             lt div class  form-group form-inline  gt                                       lt label for  exampleInputEmail1  gt Email address lt  label gt               lt input type  email  class  form-control  id  exampleInputEmail1  placeholder  Email  gt       lt  div gt   lt  form gt

User · Answer

I think this is what you want  from the bootstrap documentation  Horizontal form Use Bootstrap s predefined grid classes to align labels and groups of form controls in a horizontal layout by adding  form-horizontal to the form  Doing so changes  form-groups to behave as grid rows  so no need for  row   So    lt form class  form-horizontal  role  form  gt   lt div class  form-group  gt     lt label for  inputEmail3  class  col-sm-2 control-label  gt Email lt  label gt   lt div class  col-sm-10  gt     lt input type  email  class  form-control  id  inputEmail3  placeholder  Email  gt   lt  div gt   lt  div gt   lt div class  form-group  gt     lt label for  inputPassword3  class  col-sm-2 control-label  gt Password lt  label gt     lt div class  col-sm-10  gt       lt input type  password  class  form-control  id  inputPassword3  placeholder  Password  gt     lt  div gt   lt  div gt   lt div class  form-group  gt     lt div class  col-sm-offset-2 col-sm-10  gt       lt div class  checkbox  gt         lt label gt           lt input type  checkbox  gt  Remember me        lt  label gt       lt  div gt     lt  div gt   lt  div gt   lt div class  form-group  gt     lt div class  col-sm-offset-2 col-sm-10  gt       lt button type  submit  class  btn btn-default  gt Sign in lt  button gt     lt  div gt   lt  div gt   lt  form gt    Fiddle  http   jsfiddle net beewayne B9jj2 29

User · Answer

You can create such form where label and form control are side using two method -  1  Inline form layout   lt form class  form-inline  role  form  gt       lt div class  form-group  gt           lt label for  inputEmail  gt Email lt  label gt           lt input type  email  class  form-control  id  inputEmail  placeholder  Email  gt       lt  div gt       lt div class  form-group  gt           lt label for  inputPassword  gt Password lt  label gt           lt input type  password  class  form-control  id  inputPassword  placeholder  Password  gt       lt  div gt       lt button type  reset  class  btn btn-default  gt Reset lt  button gt       lt button type  submit  class  btn btn-primary  gt Login lt  button gt   lt  form gt    2  Horizontal Form Layout   lt form class  form-horizontal  gt       lt div class  row  gt           lt div class  col-sm-4  gt               lt div class  form-group  gt                   lt label for  inputEmail  class  control-label col-xs-3  gt Email lt  label gt                   lt div class  col-xs-9  gt                       lt input type  email  class  form-control  id  inputEmail  placeholder  Email  gt                   lt  div gt               lt  div gt           lt  div gt           lt div class  col-sm-5  gt               lt div class  form-group  gt                   lt label for  inputPassword  class  control-label col-xs-3  gt Password lt  label gt                   lt div class  col-xs-9  gt                       lt input type  password  class  form-control  id  inputPassword  placeholder  Password  gt                   lt  div gt               lt  div gt           lt  div gt           lt div class  col-sm-3  gt               lt button type  reset  class  btn btn-default  gt Reset lt  button gt               lt button type  submit  class  btn btn-primary  gt Login lt  button gt           lt  div gt       lt  div gt   lt  form gt    You can check out this page for more information and live demo - http   www tutorialrepublic com twitter-bootstrap-tutorial bootstrap-forms php

[css] Label on the left side instead above an input field

Examples related to css

Examples related to twitter-bootstrap-3