Menu
I'm experimenting a strange behavior with Bootstrap 3 input groups. When I add an input-group-addon (text or icon) to a form inside a jumbotron, the input-group height is bigger than its input height.
Here you can find a JsFiddle and an screenshot with the problem:
<div class="jumbotron"> <h1>Jumbotron with form</h1> <form> <div class="input-group"> <input type="text" class="form-control" placeholder="Username"> <span class="input-group-addon">@</span> </div> </form> </div> Live example at http://jsfiddle.net/DTcHh/
Screenshot: 
How can I fix this problem? I'm looking for a Bootstrap solution but if that's not possible would be nice if you could help me to fix it with CSS rules.
470
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.
A jumbotron indicates a big box for calling extra attention to some special content or information. A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it. Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.
input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text". Use . input-group-prepend to add the help text in front of the input, and . input-group-append to add it behind the input.
To make the jumbotron full width, and without rounded corners, add the . jumbotron-fluid modifier class and add a . container or . container-fluid within.
Last night, I had exactly the same problem. None of the fixes mentioned above worked in my context. What finally did do the job was setting the margin to 0:
.input-group .form-control { margin: 0px !important; } Perhaps this helps someone with a similar problem!
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
