Bootstrap inline input group - label, input-box and button

Question

I'm trying to get the cleanest HTML markup, not reliant on additional custom CSS ("bootstrap out the box") to achieve something similar to this demo I created on bootply - http://www.bootply.com/1Uy4UROiEz

The only thing wrong with the demo above is I want the go button to be attached to the the input box as shown in this other demo demo - http://www.bootply.com/yEhbA5gkdm

The problem is that I need the button and input bow to have its own size (col-md-??) so that the button can be wider.

Can anybody give me some good code that can accomplish this please?

Ian Leaman · Accepted Answer · 2014-06-18 15:35:38Z

1

You can modify the width of the go button by attaching a CSS class with width set to whatever value you want the button width to be. You can find a modified version of your example here: http://www.bootply.com/UMZt0xqvrD#.

Edit: When using form control it seems that you will have to specify one element using the bootstrap predefined widths and define another yourself. I modified the first example here http://www.bootply.com/kxMFprsSZN

edited Jun 18, 2014 at 15:35

answered Jun 18, 2014 at 14:49

Ian Leaman

1457 bronze badges

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

2 Comments

Tom Rudge Over a year ago

Thanks for your answer, please try and apply this to the first bootply link above - bootply.com/1Uy4UROiEz You will see my problem

Ian Leaman Over a year ago

When using form control it seems that you will have to specify one element using the bootstrap predefined widths and define another yourself. I modified the first example here bootply.com/kxMFprsSZN

Collectives™ on Stack Overflow

Bootstrap inline input group - label, input-box and button

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related