How to create a dynamic width column in Twitter Bootstrap

Question

How do you use Twitter Bootstrap to create a table-like list structure, where some columns take as much space, as required to accommodate the widest element of that column,

Answer 1

As others said, you should use regular tables where they make sense. Also, CSS3 display:table can be a good solution.

Depending on the use case, there is a different solution you could consider:
https://github.com/donquixote/bootstrap-autocolumns/blob/master/bootstrap-autocolumns.css
This is a piece of CSS that adds "col-sm-auto" in addition to "col-sm-1", "col-sm-5" etc.

(Atm, I would recommend to just copy this to a custom css file and adjust to your needs.)

Example

  
Left
  
Right
  
Middle

Here is a fiddle: http://jsfiddle.net/9wzqz/

Idea

• .col-*-auto floats to the left, with the typical padding, but without any explicit width setting.
• .col-*-auto-right floats to the right instead.
• .col-middle has display:table, which prevents it from floating around the other elements.
• Use "xs", "sm", "md", "lg" to target specific screen widths.

Limitations

The left/right columns will expand to full width, if you fill them with long text. Better use them for fixed-width stuff like images.

The middle column will only take the full available width if it has enough content in it.