Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 input append trouble

Sorry for my English.

Hi, faced with a problem in the Bootstrap 3, it is impossible to make the grouping of the two text fields and a button. Prompt solution.

enter image description here

like image 377
Jeen Jay Avatar asked Dec 16 '22 04:12

Jeen Jay


1 Answers

You can do it like this, with an input group and two input fields, and adding some css:

HTML:

<div class="input-group double-input">
    <input type="text" placeholder="First" class="form-control" />
    <input type="text" placeholder="Second" class="form-control" />
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
</div><!-- /input-group -->

CSS:

.double-input .form-control {
    width: 50%;
    border-right-width: 0px;
}
.double-input .form-control:focus {
    border-right-width: 1px;
}

Check this fiddle: http://jsfiddle.net/aorcsik/TshQ7/

like image 189
aorcsik Avatar answered Dec 21 '22 23:12

aorcsik