Bootstrap Snippet Bootstrap table design using HTML CSS

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.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
    <div class="container py-4">
        <div class="coE-card">
            <div class="table-responsive">
                <h2>Table/Grid</h2>
                <table class="table align-items-center table-flush table-hover table-link mb-0">
                    <thead>
                        <tr>
                            <th>Sr. No.
                            </th>
                            <th>First Name
                            </th>
                            <th>Last Name</th>
                            <th>Age</th>
                            <th>Gender</th>
                            <th>Month</th>
                            <th>Savings</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>John</td>
                            <td>Smith</td>
                            <td>23</td>
                            <td>Male</td>
                            <td>July</td>
                            <td>$33</td>
                        </tr>
                        <tr>
                            <td>2</td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
        @import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
        @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&family=Titillium+Web:wght@200;400;600;700;900&display=swap');
        body {
            height: 100%;
            font-family: 'Source Sans Pro', sans-serif, 'FontAwesome' !important;
            font-size: 14px;
        }
        .coE-card h1,
        .coE-card h2,
        .coE-card h3,
        .coE-card h4,
        .coE-card h5 {
            font-family: 'Titillium Web', sans-serif, 'FontAwesome' !important;
            font-weight: 900;
            color: #4bcd3e;
        }
        .coE-card {
            -webkit-box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
            margin-bottom: 10px;
            padding: 15px 10px;
        }
        .coE-card .table thead th {
            border-bottom: 2px solid #003b4d;
            color: #003b4d;
            border-top: 0px solid;
            padding: 6px 8px;
            border-right: 0;
            border-left: 0;
        }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap table design"
Bootstrap 4.1.1 Snippet by kanikamadaan

Related: See More

Questions / Comments:

"Bootstrap table design" Bootstrap 4.1.1 Snippet by kanikamadaan

Related: See More

Questions / Comments:

"Bootstrap table design"
Bootstrap 4.1.1 Snippet by kanikamadaan