css - bootstrap input form-control display horizontally than cascading -

css - bootstrap input form-control display horizontally than cascading -

i have problem input bootstrap form-control in table column. dont want cascading ontop of each other want stacked horizontally how tables rows should be.

here problem code:

<td colspan="4"> a: <input class="form-control" id="a" type="text" value="a" /> b: <input class="form-control" id="a" type="text" value="a" /> </td>

and here illustration see problem.

http://jsfiddle.net/gv6y8/27/

you have few issues in code, should wrap inputs in form-group class, form-control automatically takes 100% width. furthermore, sounds want using form-inline.

try this:

html:

first change: add together form-inline class

<table id="paymenttable" class="table table-condensed form-inline">

second change: add together form-group , alter width of form-control

<td colspan="4"> <div class="form-group"> a: <input class="form-control table-input" id="a" type="text" value="a" /> b: <input class="form-control table-input" id="a" type="text" value="a" /> </div> </td>

add css:

.table-input { width:40%; }

updated fiddle

css twitter-bootstrap-3