Bootstrap Snippet membership plan table using HTML CSS Bootstrap

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
                <div class="row">
                    <div class="col-lg-10 col-md-10 col-sm-10 col-md-offset-1">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>Compare Membership Plans</th>
                                    <th>Platinum</th>
                                    <th>Diamond</th>
                                    <th>Gold</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>Duration</td>
                                    <td>12 months</td>
                                    <td>6 months</td>
                                    <td>3 months</td>
                                    <td>N/A</td>
                                </tr>
                                <tr>
                                    <td colspan="5">Heading text</td>
                                </tr>
                                <tr> 
                                    <td>type your text............</td></td>
                                    <td><span class="glyphicon glyphicon-remove cross"></span></td>
                                    <td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
                                    <td><span class="glyphicon glyphicon-remove cross"></span></td>
                                    <td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></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(http://fonts.googleapis.com/css?family=Roboto:400,500,700,900);
table
{
    background-color: rgba(162, 159, 159, 0.2);
   margin-top:30px;
}
table thead
{
    -webkit-transition: all .3s ease;
    text-shadow: 0px 1px 0px rgb(19, 18, 18);
    color: #FFFFFF;
    font-size: 14px;
    background-color: rgba(230, 0, 0, 0.74);
    border-top: 2px solid rgb(185, 16, 16);
    box-shadow: 0px 5px 0px rgba(50,50,50, .2) inset;
}
.table-bordered>thead>tr>th {
     border: 1px solid #B91010;
    border-bottom-width:1px;
    border-bottom-color: #E4D4D4;
    box-shadow: 0px 2px 6px rgba(19, 17, 17, 0.68);
}
.table-bordered>tbody>tr>td
{
    border: 1px solid #B91010;
    font-size:13px;
}
.table-bordered {
    border: 1px solid #CFCFCF;
}
 .table-bordered>tbody>tr:nth-child(2),
 .table-bordered>tbody>tr:nth-child(6),
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"membership plan table"
Bootstrap 3.3.0 Snippet by Vaibhav Bhuva

Related: See More

Questions / Comments:

"membership plan table" Bootstrap 3.3.0 Snippet by Vaibhav Bhuva

Related: See More

Questions / Comments:

"membership plan table"
Bootstrap 3.3.0 Snippet by Vaibhav Bhuva