Display two fields side by side in a Bootstrap Form

Question

I am trying to display a year range input on a form that has a 2 textboxes  One for the min and one for the max and are separated by a dash    I want this all on the same line using bootstrap  but I cannot seem to get it to work correctly   Here s my code    lt form id  Form1  class  form-horizontal  role  form  runat  server  gt       lt div class  row  gt           lt div class  form-group  gt               lt label for  tbxContactPhone  class  col-sm-2 control-label  gt Year lt  label gt               lt div class  col-sm-4  gt                   lt asp TextBox ID  TextBox1  CssClass  form-control  runat  server  MaxLength  4    gt               lt  div gt               lt label class  col-sm-2 control-label  gt - lt  label gt               lt div class  col-sm-4  gt                   lt asp TextBox ID  TextBox2  CssClass  form-control  runat  server  MaxLength  4    gt               lt  div gt           lt  div gt       lt  div gt   lt  form gt    Here s what it looks like now

User · Answer

Just put two inputs inside a div with class form-group and set display flex on the div style  lt form method  quot post quot  gt   lt div class  quot form-group quot  style  quot display  flex  quot  gt  lt input type  quot text quot  class  quot form-control quot  name  quot nome quot  placeholder  quot Nome e sobrenome quot  style  quot margin-right  4px  quot    gt  lt input type  quot text quot  class  quot form-control quot  style  quot margin-left  4px  quot  name  quot cpf quot  placeholder  quot CPF quot    gt  lt  div gt   lt div class  quot form-group quot  style  quot display  flex  quot  gt  lt input type  quot email quot  class  quot form-control quot  name  quot email quot  placeholder  quot Email quot  style  quot margin-right  4px  quot    gt  lt input type  quot tel quot  class  quot form-control quot  style  quot margin-left  4px  quot  name  quot telephone quot  placeholder  quot Telefone quot    gt  lt  div gt   lt div class  quot form-group quot  gt  lt input type  quot password quot  class  quot form-control quot  name  quot password quot  placeholder  quot Password quot    gt  lt  div gt   lt div class  quot form-group quot  gt  lt input type  quot password quot  class  quot form-control quot  name  quot password-repeat quot  placeholder  quot Password  repeat  quot    gt  lt  div gt   lt div class  quot form-group quot  gt       lt div class  quot form-check quot  gt  lt label class  quot form-check-label quot  gt  lt input type  quot checkbox quot  class  quot form-check-input quot    gt I agree to the license terms  lt  label gt  lt  div gt   lt  div gt   lt div class  quot form-group quot  gt  lt button class  quot btn btn-primary btn-block quot  type  quot submit quot  gt Sign Up lt  button gt  lt  div gt  lt a class  quot already quot  href  quot   quot  gt You already have an account  Login here  lt  a gt  lt  form gt

User · Answer

For Bootstrap 4   x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt div class  input-group  gt  x000D       lt input type  text  class  form-control  placeholder  Start   gt  x000D       lt div class  input-group-prepend  gt  x000D           lt span class  input-group-text  id    gt - lt  span gt  x000D       lt  div gt  x000D       lt input type  text  class  form-control  placeholder  End   gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The problem is that  form-control class renders like a DIV element which according to the normal-flow-of-the-page renders on a new line    One way of fixing issues like this is to use display inline property  So  create a custom CSS class with display inline and attach it to your component with a  form-control class  You have to have a width for your component as well   There are other ways of handling this issue  like arranging your form-control components inside any of the  col classes   but the easiest way is to just make your  form-control an inline element  the way a span would render

User · Answer

KyleMit answer is one way to  solve this  however we may chose to avoid the undivided input fields acheived by input-group class  A better way to do this is by using form-group and row classes on a parent div and use input elements with grid-system classes provided by bootstrap    lt div class  form-group row  gt       lt input class  form-control col-md-6  type  text  gt       lt input class  form-control col-md-6  type  text  gt   lt  div gt

User · Answer

How about using an input group to style it on the same line   Here s the final HTML to use    lt div class  input-group  gt       lt input type  text  class  form-control  placeholder  Start   gt       lt span class  input-group-addon  gt - lt  span gt       lt input type  text  class  form-control  placeholder  End   gt   lt  div gt    Which will look like this     Here s a Stack Snippet Demo    x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 2 0 css bootstrap css  rel  stylesheet   gt  x000D   x000D   lt div class  input-group  gt  x000D       lt input type  text  class  form-control  placeholder  Start   gt  x000D       lt span class  input-group-addon  gt - lt  span gt  x000D       lt input type  text  class  form-control  placeholder  End   gt  x000D   lt  div gt  x000D   x000D   x000D    I ll leave it as an exercise to the reader to translate it into an asp textbox element

User · Answer

did you check boostrap website  search for  quot forms quot   lt div class  quot form-row quot  gt   lt div class  quot col quot  gt     lt input type  quot text quot  class  quot form-control quot  placeholder  quot First name quot  gt   lt  div gt   lt div class  quot col quot  gt     lt input type  quot text quot  class  quot form-control quot  placeholder  quot Last name quot  gt   lt  div gt

User · Answer

Bootstrap 3 3 7   Use form-inline   It only works on screen resolutions greater than 768px though  To test the snippet below make sure to click the  Expand snippet  link to get a wider viewing area    x000D   x000D           lt link href  http   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap css  rel  stylesheet   gt  x000D           lt form class  form-inline  gt  x000D               lt input type  text  class  form-control   gt - lt input type  text  class  form-control   gt  x000D           lt  form gt  x000D   x000D   x000D    Reference  https   getbootstrap com docs 3 3 css  forms-inline

User · Answer

KyleMit s answer on Bootstrap 4 has changed a little   lt div class  input-group  gt       lt input type  text  class  form-control  gt       lt div class  input-group-prepend  gt           lt span class  input-group-text  gt - lt  span gt       lt  div gt       lt input type  text  class  form-control  gt   lt  div gt

[html] Display two fields side by side in a Bootstrap Form

Examples related to html

Examples related to css

Examples related to asp.net

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3