How To Create A Dynamic Width Column In Twitter Bootstrap

March 31, 2024 Post a Comment

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 s

Solution 1:

Table like structure using the old table tag

Just kidding - or am i not.

<tableclass="table"><tr><th>Id</th><th>Name</th><th>Email address</th></tr><tr><td>100001</td><td>Joe</td><td>MamiePVillalobos@teleworm.us</td></tr><tr><td>100</td><td>Christine</td><td>ChristineJWilliams@dayrep.com</td></tr><tr><td>1001</td><td>John</td><td>JohnLMiley@dayrep.com</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:

<divclass="row"><divclass="span2">ID</div><divclass="span2">Name</div><divclass="span8">E-Mail</div></div><divclass="row"><divclass="span2">100001</div><divclass="span2">Joe</div><divclass="span8">MamiePVillalobos@teleworm.us</div></div><divclass="row"><divclass="span2">100</div><divclass="span2">Christine</div><divclass="span8">ChristineJWilliams@dayrep.com</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

<divclass="row"><divclass="spanFl">100000001 <br />
        100
      </div><divclass="spanFl">Joe <br/>
          Christine
      </div><divclass="spanFl">MamiePVillalobos@teleworm.us <br />
        ChristineJWilliams@dayrep.com
      </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?

Solution 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

<divclass="row"><divclass="col-xs-auto">Left</div><divclass="col-xs-auto-right">Right</div><divclass="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.

Solution 3:

if you don't need to limit the column size, you can just disable the width.

<spanclass="col-xs-1"style="width: inherit !important; ">unknown ...</span>

I need the bootstrap definition for the other column's properties (padding, height, etc.), so I added a col definition, but a small unit (col-xs-1).

notes:

the "!important" clause might be dropped (i'm not sure)
In my project the texts are known to be small anyway.

Solution 4:

Well according To bootstrap Documentation you can apply table-responsive css class to the table element and make it responsive. What I observed was it actually makes scroll-able.

JavaScript Site