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

Table like structure using the old table tag

Just kidding - or am i not.

  
Id
     
Name
      
Email address
  
100001
 
Joe
       
MamiePVillalobos@teleworm.us
  
100
    
Christine
 
ChristineJWilliams@dayrep.com
  
1001
   
John
      
JohnLMiley@dayrep.com

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:

   

      
ID
      
Name
      
E-Mail
    
    

      
100001
      
Joe
      
MamiePVillalobos@teleworm.us
    
        

      
100
      
Christine
      
ChristineJWilliams@dayrep.com
    

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

  

      
100000001 

        100
      
      
Joe 

          Christine
      
      
MamiePVillalobos@teleworm.us 

        ChristineJWilliams@dayrep.com
      
  
    

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?