Cards Bootstrap 5Free+ CSS
Bootstrap 5 Creative pricing table snippets — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
2.7k views64 downloads
gosnippets.com/preview/bootstrap-5-creative-pricing-table-snippets
Source Code
1<div class="container-fluid bg-gradient p-5">
2 <div class="row m-auto text-center w-75">
3
4 <div class="col-4 princing-item red">
5 <div class="pricing-divider ">
6 <h3 class="text-light">START-UP</h3>
7 <h4 class="my-0 display-2 text-light font-weight-normal mb-3"><span class="h3">$</span> 120 <span class="h5">/mo</span></h4>
8 <svg class='pricing-divider-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1' preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'>
9 <path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
10 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z' fill='#FFFFFF' opacity='0.6'></path>
11 <path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
12 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z' fill='#FFFFFF' opacity='0.6'></path>
13 <path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
14 H42.401L43.415,98.342z' fill='#FFFFFF' opacity='0.7'></path>
15 <path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
16 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z' fill='#FFFFFF'></path>
17 </svg>
18 </div>
19 <div class="card-body bg-white mt-0 shadow">
20 <ul class="list-unstyled mb-5 position-relative">
21 <li><b>10</b> users included</li>
22 <li><b>2 GB</b> of storage</li>
23 <li><b>Free </b>Email support</li>
24 <li><b>Help center access</b></li>
25 </ul>
26 <button type="button" class="btn btn-lg w-100 btn-custom ">Sign up for free</button>
27 </div>
28 </div>
29
30
31
32
33 <div class="col-4 princing-item blue">
34 <div class="pricing-divider ">
35 <h3 class="text-light">BUSINESS</h3>
36 <h4 class="my-0 display-2 text-light font-weight-normal mb-3"><span class="h3">$</span> 250 <span class="h5">/mo</span></h4>
37 <svg class='pricing-divider-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1' preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'>
38 <path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
39 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z' fill='#FFFFFF' opacity='0.6'></path>
40 <path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
41 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z' fill='#FFFFFF' opacity='0.6'></path>
42 <path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
43 H42.401L43.415,98.342z' fill='#FFFFFF' opacity='0.7'></path>
44 <path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
45 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z' fill='#FFFFFF'></path>
46 </svg>
47 </div>
48
49 <div class="card-body bg-white mt-0 shadow">
50 <ul class="list-unstyled mb-5 position-relative">
51 <li><b>100 </b>users included</li>
52 <li><b>10 GB</b> of storage</li>
53 <li><b>Free</b>Email support</li>
54 <li><b>Help center access</b></li>
55 </ul>
56 <button type="button" class="btn btn-lg w-100 btn-custom ">Sign up for free</button>
57 </div>
58 </div>
59
60
61
62
63
64
65 <div class="col-4 princing-item green">
66 <div class="pricing-divider ">
67 <h3 class="text-light">PRO</h3>
68 <h4 class="my-0 display-2 text-light font-weight-normal mb-3"><span class="h3">$</span> 450 <span class="h5">/mo</span></h4>
69 <svg class='pricing-divider-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1' preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'>
70 <path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
71 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z' fill='#FFFFFF' opacity='0.6'></path>
72 <path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
73 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z' fill='#FFFFFF' opacity='0.6'></path>
74 <path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
75 H42.401L43.415,98.342z' fill='#FFFFFF' opacity='0.7'></path>
76 <path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
77 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z' fill='#FFFFFF'></path>
78 </svg>
79 </div>
80
81 <div class="card-body bg-white mt-0 shadow">
82 <ul class="list-unstyled mb-5 position-relative">
83 <li><b>300</b> users included</li>
84 <li><b>20 GB</b> of storage</li>
85 <li><b>Free</b> Email support</li>
86 <li><b>Help center access</b></li>
87 </ul>
88 <button type="button" class="btn btn-lg w-100 btn-custom ">Sign up for free</button>
89 </div>
90 </div>
91
92
93
94
95
96
97 </div>
98 </div>More Cards snippets
Bootstrap carousel with cards in 3 columns
Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.
CardsView →
Bootstrap 5 ecommerce product cards details template
Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
CardsView →
Bootstrap snippet Panels with nav tabs using HTML & CSS
Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
CardsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.