"Responsive Table Using 'LI'"
Bootstrap 4.0.0 Snippet by abahtin

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>Responsive Tables Using LI <small>Triggers on 767px</small></h2> <ul class="responsive-table"> <li class="table-header"> <div class="col col-1">Job Id</div> <div class="col col-2">Customer Name</div> <div class="col col-3">Amount Due</div> <div class="col col-4">Payment Status</div> </li> <li class="table-row"> <div class="col col-1" data-label="Job Id">42235</div> <div class="col col-2" data-label="Customer Name">John Doe</div> <div class="col col-3" data-label="Amount">$350</div> <div class="col col-4" data-label="Payment Status">Pending</div> </li> <li class="table-row"> <div class="col col-1" data-label="Job Id">42442</div> <div class="col col-2" data-label="Customer Name">Jennifer Smith</div> <div class="col col-3" data-label="Amount">$220</div> <div class="col col-4" data-label="Payment Status">Pending</div> </li> <li class="table-row"> <div class="col col-1" data-label="Job Id">42257</div> <div class="col col-2" data-label="Customer Name">John Smith</div> <div class="col col-3" data-label="Amount">$341</div> <div class="col col-4" data-label="Payment Status">Pending</div> </li> <li class="table-row"> <div class="col col-1" data-label="Job Id">42311</div> <div class="col col-2" data-label="Customer Name">John Carpenter</div> <div class="col col-3" data-label="Amount">$115</div> <div class="col col-4" data-label="Payment Status">Pending</div> </li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
body{font-family:lato,sans-serif} .container{max-width:1000px;margin-left:auto;margin-right:auto;padding-left:10px;padding-right:10px} h2{font-size:26px;margin:20px 0;text-align:center} small{font-size:.5em} li{border-radius:3px;padding:25px 30px;display:flex;justify-content:space-between;margin-bottom:25px} .table-header{background-color:#95A5A6;font-size:14px;text-transform:uppercase;letter-spacing:.03em} .table-row{background-color:#fff;box-shadow:0 0 9px 0 rgba(0,0,0,.1)} .col-1{flex-basis:10%} .col-2{flex-basis:40%} .col-3,.col-4{flex-basis:25%} @media all and (max-width:767px){ .table-header{display:none} li{display:block} .col{flex-basis:100%;display:flex;padding:10px 0} .col:before{color:#6C7A89;padding-right:10px;content:attr(data-label);flex-basis:50%;text-align:right} }
$('#wizard').bootstrapWizard({onNext: function(tab, navigation, index) { $valid = true; $newUser = $('#newUser').data('bootstrapValidator'); //the validator $wizard = $('#wizard').data('bootstrapWizard'); //the wizard $tab = $('#wizard').find('.tab-content').children().eq($wizard.currentIndex()) $tab.find('input:text, input:password, input:file, select, textarea, input:not([type=hidden])') .each(function() { if ($newUser.options.fields[$(this).attr('name')]) { $newUser.validateField($(this).attr('name')); if ($(this).closest('.form-group').hasClass('has-error')){ $valid = false; } } }); return $valid ; }

Related: See More

BLK• Design System
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments: