Bootstrap 4 Template

This is a simple Twitter Bootstrap 4 template. To check BS4 and Bootstrap-table compatibility.

by cjhaley

HTML

<script src="http://labo.infocapagde.com/lib/bootstrap-4.0.0-alpha/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://labo.infocapagde.com/lib/bootstrap-4.0.0-alpha/css/bootstrap.css">
<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<div class="container">
   
    <table id="myTable" data-toggle="table" data-detail-view="true" data-show-columns="true" data-icons="icons" data-icons-prefix="fa" data-show-refresh="true" data-show-toggle="true">
        <thead>
            <tr>
                <th>Column A</th>
                <th data-sortable="true">Column B</th>
                <th>Column C</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>abcd &nbsp;<i class="fa fa-minus-square"></i></td>
                <td>other content</td>
                <!-- id number is generated by tt_template --> <span style="display: none;" id="desc0">
                    <strong class="bold">Description:</strong>
                    <br>
                    <pre>This is row with id=0, containing other content</pre>
                </span>

            </tr>
            <tr>
                <td>2</td>
                <td>efgh</td>
                <td>another content</td>
                <!-- id number is generated by tt_template --> <span style="display: none;" id="desc1">
                    <a href="#" data-toggle="collapse" data-target="#z1"><strong class="bold">Description:</strong></a>
                    <br>
                        <div id="z1" class="collapse"><pre>This is row with id=1, containing another content</pre></div>
                </span>
            </tr>
        </tbody>
    </table>
</div>

CSS

body {
    margin: 10px;
}

JavaScript

/**/
window.icons = {
    refresh: 'fa-refresh',
    toggle: 'fa-toggle-on fa-lg',
    columns: 'fa-th-list',
    detailOpen: 'fa-plus-square-o',
    detailClose: 'fa-minus-square-o'
};

bootstrap-table.js