Smaller `Input` in React-Bootstrap

Question

How can I make smaller Input?

Here is a default syntax:

<Input type='text' value='' placeholder='Enter Entity'/>

Which would result in:

enter image description here

Unfortunately, unlike buttons, bsSize='xsmall' does not work in this case. Any idea how to make them smaller? (like buttons here)

B_s · Accepted Answer · 2015-06-29 20:32:15Z

1

Use classes input-lg for larger inputs, or in your case input-sm for a smaller input. This is basic Bootstrap behavior.

See also this Bootstrap page for more information, where this is used with input-groups

answered Jun 29, 2015 at 20:32

B_s

3,0265 gold badges35 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

arjen Stens · Accepted Answer · 2015-06-29 20:18:18Z

0

Add this to your Css:

input{
    width: 150px;
    height: 50px;
}

answered Jun 29, 2015 at 20:18

arjen Stens

1231 silver badge7 bronze badges

So this overrides the default settings?

And I suppose you mean Input, not input

Yes, you can modify the input like a normal div.