How to Convert Table Based Layout with Bootstrap "Row" and "Col-*-*"

Converting HTML tables to bootstrap columns - Responsive Design

It might be hard to flawlessly convert any given table to bootstrap columns. Consider that bootstrap columns only allow for up to 12 columns and a table may have more than that.

This function will convert a table to BS rows/cols, but it assumes the number of table rows is evenly divisible by 12 (if not, you'll have to adjust it to your own needs).

/**
 * Convert a table to bootstrap columns
 * @param table DOMElement
 */
function makeBSCols(table){
    var html = ["<div class='container'>"];
    $(table).find('tr').each(function(){
        var $td = $(this).find('td').length ? $(this).find('td') : $(this).find('th');
        // get the column width
        if($td.length > 12) return alert("too many columns");
        var cls = Math.floor(12/$td.length);
        if(cls!==(12/$td.length)) return alert("invalid column count");
        html.push("<div class='row'>");
        $td.each(function(){
            html.push('<div class="col-sm-'+cls+'">'+$(this).html()+'</div>');
        });
        html.push('</div>');
    });
    html.push('</div>');
    $(table).replaceWith(html.join(''));
}

Example: makeBSCols(document.getElementById('myTable')) (Fiddle)

For a more flexible solution, (assuming you're actually displaying tabular data) you might consider just using BS tables rather than BS cols/rows. This one will just add BS styles to your table and put it in a .table-responsive div which helps with responsiveness.

/**
 * Convert a regular table to bootstrap table
 * @param table DOMElement
 */
function makeBSTable(otable){
    var table = $(otable).clone(); console.log(table);
    table.addClass("table-hover table-bordered table-striped table");
    var div = $('<div class="table-responsive" />');
    $(otable).replaceWith(div);
    div.append(table);
}

Example: makeBSTable(document.getElementById('myTable')) (Fiddle)

How could we make bootstrap rows/columns look like a table?

Basic principle of Table -> row / column is that, in a particular row, columns should be of equal height whatever is the content.

You can make table -> row/columns structure using bootstrap grid but there will be a problem of equal heights column.

So, for this purpose i.e. for equal columns, you can use flexbox property. (it doesn't work in ie9 and less so be sure about its use.)

Check this fiddle here

Just add following simple CSS to a parent container (for complete demo checkout above fiddle),

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Here is the reference

How to convert Bootstrap rows to columns by Viewport size

You can put all columns in a .row and, because bootstrap grid is composable, each column can have both col-sm-4 and col-lg-12 classes.

The grid structure is:

1. namespace: col
2. screenSize: xs|sm|md|lg
3. colSpan: 1-12

So, you are able to have any mix of them:

• When screen is LG (to UP) colspan is 12: col-lg-12
• When screen is SM (to UP) colspan is 4: col-sm-4

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";

.box {  height: 50px;  background: lightcoral;  border: 1px solid green;  margin: 5px 0;}

<section class="container">  <div class="row">            <div class="col-sm-4 col-lg-12">      <div class="box"></div>    </div>        <div class="col-sm-4 col-lg-12">      <div class="box"></div>    </div>        <div class="col-sm-4 col-lg-12">      <div class="box"></div>    </div>
  </div></section>

---

Related Topics