Bootstrap Snippet pricing table / information table 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
<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="card box-shadow">
                    <h4 class="card-title pricing-card-title text-center" style="margin-bottom: 0px; padding: 15px; font-size: 22px; font-weight: 100;">
                    LOREM IPSUM</h4>
                    <div class="pricing-color card-header" style="border-bottom: 0px solid rgba(0,0,0,.125); padding: 15px;">
<ul>
                  <li><i style="color:green;" class="fa fa-check"></i> Lorem Ipsum</li>
                  <li><i style="color:green;" class="fa fa-check"></i> Lorem Ipsum</li>
                  <li><i style="color:green;" class="fa fa-check"></i> Lorem Ipsum</li>
                  <li><i style="color:green;" class="fa fa-check"></i> Lorem Ipsum</li>
                  <li><i style="color:green;" class="fa fa-check"></i> Lorem Ipsum</li>
                  <li><strong><i style="color:green;" class="fa fa-check"></i> Lorem Ipsum</strong></li></ul>
                    </div>
                    <div class="card-body text-center">
                        <a style="margin-top: 0px;" class="btn type--uppercase btn--primary" href="contact.php"><i class="fa fa-angle-right"></i> Lorem Ipsum</a>
                    </div>
                  </div>
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
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 40%;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}
.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}
.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .spacing {
        padding-top: 15px;
        padding-bottom: 15px;
    }
} 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"pricing table / information table"
Bootstrap 4.1.1 Snippet by CodeDevBootstraps

Related: See More

Questions / Comments:

"pricing table / information table" Bootstrap 4.1.1 Snippet by CodeDevBootstraps

Related: See More

Questions / Comments:

"pricing table / information table"
Bootstrap 4.1.1 Snippet by CodeDevBootstraps