How To Create A Dynamic Width Column In Twitter Bootstrap

March 29, 2023 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.

<table class="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:

   <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">MamiePVillalobos@teleworm.us</div>
    </div>
        <div class="row">
      <div class="span2">100</div>
      <div class="span2">Christine</div>
      <div class="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

  <div class="row">
      <div class="spanFl">100000001 <br />
        100
      </div>
      <div class="spanFl">Joe <br/>
          Christine
      </div>
      <div class="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

<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.

Solution 3:

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

<span class="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.

Html5 Cafe