Input widths on Bootstrap 3

Question

Update again  I am closing this question by selecting the top answer to keep people from adding answers without really understanding the question  In reality there is no way to do it with the build in functionality without using grid or adding extra css  Grids do not work well if you are dealing with help-block elements that need to go beyond a short input for example but they are  build-in   If that is an issue I recommend using extra css classes which you can find in the BS3 discussion here  Now that BS4 is out it is possible to use the included sizing styles to manage this so this is not going to be relevant for much longer  Thanks all for good input on this popular SO question   Update  This question remains open because it is about built-in functionality in BS to manage input width without resorting to grid  sometimes they have to be managed independently   I already use custom classes to manage this so this is not a how-to on basic css   The task is in BS feature discussion list and has yet to be addressed    Original Question  Anyone figure out a way to manage input width on BS 3   I m currently using some custom classes to add that functionality but I may have missed some non documented options   Current docs say to use  col-lg-x but that clearly doesn t work as it can only be applied to the container div which then causes all kinds of layout float issues    Here s a fiddle  Weird is that on the fiddle I can t even get the form-group to resize   http   jsfiddle net tX3ae    lt form role  form  class  row  gt       lt div class  form-group col-lg-1  gt           lt label for  code  gt Name lt  label gt           lt input type  text  class  form-control  gt       lt  div gt        lt div class  form-group col-lg-1   gt           lt label for  code  gt Email lt  label gt           lt input type  text  class  form-control input-normal  gt       lt  div gt        lt button type  submit  class  btn btn-default  gt Submit lt  button gt   lt  form gt   lt  div gt

User · Answer

You don t have to give up simple css      short   max-width  300px     lt input type  text  class  form-control short  id       gt

User · Answer

You can add the style attribute or you can add a definition for the input tag in a css file   Option 1  adding the style attribute   lt input type  text  class  form-control  id  ex1  style  width  100px   gt     Option 2  definition in css  input    width  100px     You can change the 100px in auto  I hope I could help

User · Answer

Current docs say to use  col-xs-x   no lg  Then I try in fiddle and it s seem to work     http   jsfiddle net tX3ae 225   to keep the layout maybe you can change where you put the class  row  like this     lt div class  container  gt     lt h1 gt My form lt  h1 gt     lt p gt How to make these input fields small and retain the layout  lt  p gt     lt div class  row  gt       lt form role  form  class  col-xs-3  gt          lt div class  form-group  gt           lt label for  name  gt Name lt  label gt           lt input type  text  class  form-control  id  name  name  name   gt         lt  div gt          lt div class  form-group  gt           lt label for  email  gt Email lt  label gt           lt input type  text  class  form-control  id  email  name  email  gt         lt  div gt          lt button type  submit  class  btn btn-default  gt Submit lt  button gt       lt  form gt     lt  div gt   lt  div gt    http   jsfiddle net tX3ae 226

User · Answer

ASP net MVC go to Content- Site css  and remove or comment this line   input  select  textarea         max-width  280px

User · Answer

In Bootstrap 3     All textual  lt  input     lt  textarea    and  lt  select   elements with  form-control are set to width  100   by default    http   getbootstrap com css  forms-example  It seems  in some cases  we have to set manually the max width we want for the inputs   Anyway  your example works  Just check it with a large screen  so you can see the name and email fields are getting the 2 12 of the with  col-lg-1   col-lg-1 and you have 12 columns   But if you have a smaller screen  just resize your browser   the inputs will expand until the end of the row

User · Answer

I do not know why everyone has seem to overlook the site css file in the Content folder  Look at line 22 in this file and you will see the settings for input to be controlled  It would appear that your site is not referencing this style sheet    I added this   input  select  textarea   max-width  280px    to your fiddle and it works just fine   You should never ever update bootstrap css or bootstrap min css  Doing so will set you up to fail when bootstrap gets updated  That is why the site css file is included  This is where you can make changes to site that will still give you the responsive design you are looking for    Here is the fiddle with it working

User · Answer

If you are using the Master Site template in Visual Studio 15  the base project has  Site css  which OVERRIDES the width of form-control fields   I could not get the width of my text boxes to get any wider than about 300px wide   I tried EVERYTHING and nothing worked   I found that there is a setting in Site css which was causing the problem   Get rid of this and you can get control over your field widths      Set widths on the form inputs since otherwise they re 100  wide    input type  text    input type  password    input type  email    input type  tel    input type  select         max-width  280px

User · Answer

I think you need to wrap the inputs inside a col-lg-4  and then inside the form-group and it all gets contained in a form-horizontal         lt form class  form form-horizontal  gt            lt div class  form-group  gt              lt div class  col-md-3  gt               lt label gt Email lt  label gt               lt input type  email  class  form-control  id  email  placeholder  email  gt              lt  div gt            lt  div gt                     lt  form gt    Demo on Bootply - http   bootply com 78156  EDIT  From the Bootstrap 3 docs       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    So another option is to set a specific width using CSS    form-control       width 100px      Or  apply the col-sm-  to the  form-group

User · Answer

Add and define terms for the style    to the input field  that s the easiest way to go about it  Example    lt form gt       lt div class  form-group  gt           lt label for  email  gt Email address  lt  label gt           lt input type  email  class  form-control  id  email  style  width 200px   gt       lt  div gt       lt div class  form-group  gt           lt label for  pwd  gt Password  lt  label gt           lt input type  password  class  form-control  id  pwd  style  width 200px  gt       lt  div gt       lt button type  submit  class  btn btn-default  gt Submit lt  button gt   lt  form gt

User · Answer

Bootstrap uses the class  form-input  for controlling the attributes of  input fields   Simply  add your own  form-input  class with the desired width  border  text size  etc in your css file or head section     or else  directly add the size  5  inline code in input attributes in the body section     lt script async src    jsfiddle net tX3ae embed   gt  lt  script gt

User · Answer

What you want to do is certainly achievable   What you want is to wrap each  group  in a row  not the whole form with just one row  Here    lt div class  container  gt       lt h1 gt My form lt  h1 gt       lt p gt How to make these input fields small and retain the layout  lt  p gt       lt form role  form  gt           lt div class  row  gt               lt div class  form-group col-lg-1  gt                   lt label for  code  gt Name lt  label gt                   lt input type  text  class  form-control    gt               lt  div gt           lt  div gt            lt div class  row  gt               lt div class  form-group col-lg-1   gt                   lt label for  code  gt Email lt  label gt                   lt input type  text  class  form-control input-normal    gt               lt  div gt           lt  div gt           lt div class  row  gt               lt button type  submit  class  btn btn-default  gt Submit lt  button gt           lt  div gt       lt  form gt   lt  div gt    The NEW jsfiddle I made  NEW jsfiddle  Note that in the new fiddle  I ve also added  col-xs-5  so you can see it in smaller screens too - removing them makes no difference  But keep in mind in your original classes  you are only using  col-lg-1   That means if the screen width is smaller than the  lg  media query size  then the default block behaviour is used  Basically by only applying  col-lg-1   the logic you re employing is   IF SCREEN WIDTH  lt   lg   1200px by default      USE DEFAULT BLOCK BEHAVIOUR  width 100    ELSE     APPLY  col-lg-1    95px    See Bootstrap 3 grid system for more info  I hope I was clear otherwise let me know and I d elaborate

User · Answer

In Bootstrap 3  You can simply create a custom style    form-control-inline       min-width  0      width  auto      display  inline      Then add it to form controls like so    lt div class  controls  gt       lt select id  expirymonth  class  form-control form-control-inline  gt           lt option value  01  gt 01 - January lt  option gt           lt option value  02  gt 02 - February lt  option gt           lt option value  03  gt 03 - March lt  option gt           lt option value  12  gt 12 - December lt  option gt       lt  select gt       lt select id  expiryyear  class  form-control form-control-inline  gt           lt option value  2014  gt 2014 lt  option gt           lt option value  2015  gt 2015 lt  option gt           lt option value  2016  gt 2016 lt  option gt       lt  select gt   lt  div gt    This way you don t have to put extra markup for layout in your HTML

User · Answer

I m also struggled with the same problem  and this is my solution   HTML source   lt div class  input width  gt       lt input type  text  class  form-control input-lg  placeholder  sample  gt   lt  div gt    Cover input code with another div class  CSS source   input width     width  450px      give any width or margin setting on covered div class   Bootstrap s input width is always default as 100   so width is follow that covered width   This is not the best way  but easiest and only solution that I solved the problem    Hope this helped

User · Answer

If you re looking to simply reduce or increase the width of Bootstrap s input elements to your liking  I would use max-width in the CSS   Here is a very simple example I created        lt form style  max-width 500px  gt        lt div class  form-group  gt        lt input type  text  class  form-control  id  name  placeholder  Name  gt       lt  div gt        lt div class  form-group  gt       lt input type  email  class  form-control  id  email  placeholder  Email Address  gt       lt  div gt        lt div class  form-group  gt       lt textarea class  form-control  rows  5  placeholder  Message  gt  lt  textarea gt       lt  div gt           lt button type  submit  class  btn btn-primary  gt Submit lt  button gt       lt  form gt    I ve set the whole form s maximum width to 500px  This way you won t need to use any of Bootstrap s grid system and it will also keep the form responsive

User · Answer

lt div class  form-group 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    Add the class to the form group to constraint the inputs

User · Answer

I know this is an old thread  but I experienced the same issue with an inline form  and none of the options above solved the issue  So I fixed my inline form like so -   lt form class  form-inline  action    method  post  accept-charset  UTF-8  gt       lt div class  row  gt           lt div class  form-group col-xs-7  style  padding-right  0   gt               lt label class  sr-only  for  term  gt Search lt  label gt               lt input type  text  class  form-control  style  width  100   important   name  term  id  term  placeholder  Search     autocomplete  off  gt               lt span class  help-block  gt 0 results lt  span gt           lt  div gt           lt div class  form-group col-xs-2  gt               lt button type  submit  name  search  class  btn btn-success  id  search  gt Search lt  button gt           lt  div gt       lt  div gt   lt  form gt    That was my solution  Bit hacky hack  but did the job for an inline form

User · Answer

Bootstrap 3 I achieved a nice responsive form layout using the following    lt div class  row  gt       lt div class  form-group  col-sm-4  gt           lt label for    gt  Date lt  label gt           lt input type  date  class  form-control  id  date  name  date  placeholder   date  gt       lt  div gt        lt div class  form-group  col-sm-4  gt           lt label for  hours  gt Hours lt  label gt           lt input type    class  form-control  id  hours  name  hours  placeholder  Total hours  gt       lt  div gt   lt  div gt

[css] Input widths on Bootstrap 3

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3