Bootstrap grid with one column auto width

Question

I'm using bootstrap 3 and I'm trying to make a list of items, where each row has 4 columns.. I've tried to use the bs3 grid system, but it doesn't fit all my requirements (or at least I can't make it work), since one of the columns need to use all the available space..

Example:

 _____________________________________________________________________________
|                                                                             |
|                                   Container                                 |
|Checkbox| Name (130px)| Message                                        | Date|
|Checkbox| Name (130px)| Message adasdsadsadsadsadsadasaaaaaaaaaaaaa    | Date|
|Checkbox| Name (130px)| Message adsadsadsadsadsadsadsaaaaaaaaaaaaaa... | Date|
|Checkbox| Name (130px)| Message                                        | Date|
|Checkbox| Name (130px)| Message                                        | Date|
|....                                                                         |
|_____________________________________________________________________________|

Basically, the date column should always be on the right, and the message column should use all the available width, and if the message is bigger than the available space, it should be truncated (or the overflow hidden)

Thanks

Answer 1

You could wrap your divs in one large column and then set display: table-cell on those:

Something like the snippet below.

Fiddle: http://jsfiddle.net/abhitalks/qan2khse/

Snippet:

div.table {
    border: 1px solid gray;
    border-collapse: collapse;
    display: table;
}
div.cell {
    border: 1px solid gray;
    display: table-cell;
}
div.cell:first-child, div.cell:nth-child(2)  {
    width: 10%;
}
div.cell:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div.cell:last-child {
    width: 10%;
    text-align: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <span>Caption</span>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 table">
            <div class="cell">one</div>
            <div class="cell">two</div>
            <div class="cell">three</div>
            <div class="cell">four</div>
        </div>
    </div>
</div>

Answer 2

Note that Bootstraps grid is primarily layouting purposes, what you have here is grid based content, aka, a table.

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
html,
body {
  width: 100%;
  margin: 0;
}
table {
  width: 100%;
  table-layout: fixed;
}
td:first-of-type,
td:last-of-type {
  width: 50px;
}
td:nth-of-type(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table class="table table-striped">
  <tr>
    <td>fit</td>
    <td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch
      stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td>
    <td>fit</td>
  </tr>
  <tr>
    <td>fit</td>
    <td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch
      stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td>
    <td>fit</td>
  </tr>
  <tr>
    <td>fit</td>
    <td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch
      stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td>
    <td>fit</td>
  </tr>
  <table>