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

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

Related: See More


Questions / Comments: