Bootstrap - form elements of unequal width occupying a full .row

Question

I have a Bootstrap 3.3.7 project which features a search facility consisting of 3 text input fields.

The 3 inputs are placed inside .col-md-4 such that they occupy the full width of the screen. Example here: https://jsfiddle.net/8vm8m8za/6/

I have a requirement to put a button in on the right hand side (after "Field 3" on the example above). The text on this button is a single character ("A") and therefore the button doesn't take up much width. I've updated the fiddle to show how it looks: https://jsfiddle.net/8vm8m8za/7/ . To get this working I changed .col-md-4 to .col-md-3 as I understand they need to add up to 12 to take up the full width of the .row

The effect I want is between the 2 example links I posted. I want the 3 text inputs to take up all the width, but also include the button on the same row and "adjust" (don't know how else to describe it) the width such that it all fits neatly into 1 .row .

I can't understand how to implement this with Bootstrap as I believe everything has to add up to 12 to get it to take up the full row.

Answer 1

Hi I am not exactly sure is this what you are requesting for..

Try this make the first two field sets to .col-md-4 then the third to .col-md-3 and place the button in .col-md-1 that would make up the grid complete.

check this link js fiddle