Input Width In Bootstrap Table Always Using Max Width

Ok I was trying to do a table with input fields. To set the sizes of each field I understood that I had to set the col-size in the header. <

Solution 1:

Just add the "form-control" class to the inputs and bootstrap takes care of the rest.

Doing it this way makes it easier to add columns or change the width, since you only have to change in the header as opposed to every row/input.

<tableclass="table table-condensed"><thead><tr><thclass="col-sm-12 col-md-4">Large</th><thclass="col-sm-12 col-md-2">Small</th><thclass="col-sm-12 col-md-2">Small</th><thclass="col-sm-12 col-md-2">Small</th></tr></thead><tbody><tr><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td></tr></tbody></table>

Solution 2:

You need to use the class col-md-* for normal screens col-sm-* for tablet screen and col-xs-* for mobile screen, there is also col-lg-* for larger screens, you can combine all these classes to make it responsive, like:

<divclass="row"><divclass="col-sm-12"><tableclass="table table-bordered"><thead><tr><th>Very Small</th><th>Very Small</th><th>Very Small</th><th>Large</th><th>Small</th><th>Medium</th></tr></thead><tbody><tr><tdclass="col-sm-1"><inputclass="col-sm-12"placeholder="col-sm-1" /></td><tdclass="col-sm-1"><inputclass="col-sm-12"placeholder="col-sm-1" /></td><tdclass="col-sm-1"><inputclass="col-sm-12"placeholder="col-sm-1" /></td><tdclass="col-sm-4"><inputclass="col-sm-12"placeholder="col-sm-4" /></td><tdclass="col-sm-2"><inputclass="col-sm-12"placeholder="col-sm-2" /></td><tdclass="col-sm-3"><inputclass="col-sm-12"placeholder="col-sm-3" /></td></tr></tbody></table></div></div>

Solution 3:

For Bootstrap 4, you need to additionally add the d-flex class to the rows, like

<table><thead><trclass="d-flex"><thclass="col-3">3 columns wide header</th><thclass="col-sm-5">5 columns wide header</th><thclass="col-sm-4">4 columns wide header</th></tr></thead><tbody><trclass="d-flex"><tdclass="col-3">3 columns wide content</th><tdclass="col-sm-5">5 columns wide content</th><tdclass="col-sm-4">4 columns wide content</th></tr></tbody></table>