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, and a single column takes the remaining space?

For example:

Id    |Name     |Email address                 100001|Joe      |[email protected] 100   |Christine|[email protected] 1001  |John     |[email protected] 

the Id column takes just enough space to accommodate the 100001 id, which is the longest id.

The Name column takes just enough space to accommodate the name Christine.

The Email column takes the remaining space.

Answer 1

Table like structure using the old table tag

Just kidding - or am i not.

<table class="table">   <tr><th>Id</th>     <th>Name</th>      <th>Email address</th></tr>   <tr><td>100001</td> <td>Joe</td>       <td>[email protected]</td></tr>   <tr><td>100</td>    <td>Christine</td> <td>[email protected]</td></tr>   <tr><td>1001</td>   <td>John</td>      <td>[email protected]</td></tr> </table> 

Using the grid system

In the documentation about the bootstrap grid system i could not find any auto-width building blocks. Everything out of the box has a certain width and a fixed number of columns:

   <div class="row">       <div class="span2">ID</div>       <div class="span2">Name</div>       <div class="span8">E-Mail</div>     </div>     <div class="row">       <div class="span2">100001</div>       <div class="span2">Joe</div>       <div class="span8">[email protected]</div>     </div>         <div class="row">       <div class="span2">100</div>       <div class="span2">Christine</div>       <div class="span8">[email protected]</div>     </div> 

Therefore i assume that you have to build your own version for a 3-column-table with auto-size.

In my demo the grid-column wraps if the space is to narrow or, if the space is too wide, the columns are stretched.

Update with creative markup

I updated my demo with a custom class. The creative markup comes close to what you are looking for

  <div class="row">       <div class="spanFl">100000001 <br />         100       </div>       <div class="spanFl">Joe <br/>           Christine       </div>       <div class="spanFl">[email protected] <br />         [email protected]       </div>   </div>     

Using css-3 display table

On tutsplus i found an article using css-3 display:table to set up a table like layout. Unless you use three divs for each row it does not solve row wrapping issues.

#content {       display: table;   }   #mainContent {       display: table-cell;       width: 620px;       padding-right: 22px;   }   aside {       display: table-cell;       width: 300px;   }   

Bootstrap responsive design

As far as i understood the bootstrap documentation there is no built-in soultion for a 3-column layout with auto and remaining width. To Quote the responsive design page on bootstrap: "Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries."

Could you elaborate more why you can not use a table?

Answer 2

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

<div class="row">   <div class="col-xs-auto">Left</div>   <div class="col-xs-auto-right">Right</div>   <div class="col-middle">Middle</div> </div> 

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.