Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to customise input field width in bootstrap 3

After having removed critical features such as input-xlarge and input-large, what is the substitution for it in bootstrap 3?

Of course I could use col-lg-12 etc but that is giving an error in tab pane.

I could also use style = "width:30px;" but then It would loose its responsiveness unlike input-xlarge.Any suggestions etc?

like image 541
user2754528 Avatar asked Sep 19 '13 08:09

user2754528


People also ask

How do I change the width of a Bootstrap input?

Change the size of the input groups, by adding the relative form sizing classes like . input-group-lg, input-group-sm, input-group-xs to the . input-group itself.

How do you change the input field width?

Definition and UsageThe width attribute specifies the width of the <input> element. Note: The width attribute is used only with <input type="image"> . Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded.

How do I change the size of the input box in Bootstrap 5?

Just use the 'size' property of input.


1 Answers

In Bootstrap 3, .form-control (the class you give your inputs) has a width of 100%, which allows you to wrap them into col-lg-X divs for arrangement. Example from the docs:

<div class="row">   <div class="col-lg-2">     <input type="text" class="form-control" placeholder=".col-lg-2">   </div>   <div class="col-lg-3">     <input type="text" class="form-control" placeholder=".col-lg-3">   </div>   <div class="col-lg-4">     <input type="text" class="form-control" placeholder=".col-lg-4">   </div> </div> 

See under Column sizing.

It's a bit different than in Bootstrap 2.3.2, but you get used to it quickly.

like image 99
Alexander Rechsteiner Avatar answered Oct 02 '22 19:10

Alexander Rechsteiner