Bootstrap Snippet Responsive Table Using 'LI' using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('#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 ;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Responsive Table Using 'LI'"
Bootstrap 4.0.0 Snippet by Siddharth Panchal

Related: See More

Questions / Comments:

"Responsive Table Using 'LI'" Bootstrap 4.0.0 Snippet by Siddharth Panchal

Related: See More

Questions / Comments:

"Responsive Table Using 'LI'"
Bootstrap 4.0.0 Snippet by Siddharth Panchal