Add a card to your UI with 3D Parallax Flipping Cards with pure CSS. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:300,400,700'>
2<div class="wrapper">
3 <h1>3D Parallax Flipping Cards</h1>
4 <div class="cols">
5 <div class="col" ontouchstart="this.classList.toggle('hover');">
6 <div class="container">
7 <div class="front bg6">
8 <div class="inner">
9 <p>Ravi</p>
10 <span>Lorem ipsum</span>
11 </div>
12 </div>
13 <div class="back">
14 <div class="inner">
15 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
16 </div>
17 </div>
18 </div>
19 </div>
20 <div class="col" ontouchstart="this.classList.toggle('hover');">
21 <div class="container">
22 <div class="front bg4">
23 <div class="inner">
24 <p>Mukesh</p>
25 <span>Lorem ipsum</span>
26 </div>
27 </div>
28 <div class="back">
29 <div class="inner">
30 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
31 </div>
32 </div>
33 </div>
34 </div>
35 <div class="col" ontouchstart="this.classList.toggle('hover');">
36 <div class="container">
37 <div class="front bg1" >
38 <div class="inner">
39 <p>Surya</p>
40 <span>Lorem ipsum</span>
41 </div>
42 </div>
43 <div class="back">
44 <div class="inner">
45 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
46 </div>
47 </div>
48 </div>
49 </div>
50 <div class="col" ontouchstart="this.classList.toggle('hover');">
51 <div class="container">
52 <div class="front bg2">
53 <div class="inner">
54 <p>Pervez</p>
55 <span>Lorem ipsum</span>
56 </div>
57 </div>
58 <div class="back">
59 <div class="inner">
60 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
61 </div>
62 </div>
63 </div>
64 </div>
65 <div class="col" ontouchstart="this.classList.toggle('hover');">
66 <div class="container">
67 <div class="front bg3">
68 <div class="inner">
69 <p>Ram</p>
70 <span>Lorem ipsum</span>
71 </div>
72 </div>
73 <div class="back">
74 <div class="inner">
75 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
76 </div>
77 </div>
78 </div>
79 </div>
80 <div class="col" ontouchstart="this.classList.toggle('hover');">
81 <div class="container">
82 <div class="front bg4">
83 <div class="inner">
84 <p>Ved</p>
85 <span>Lorem ipsum</span>
86 </div>
87 </div>
88 <div class="back">
89 <div class="inner">
90 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
91 </div>
92 </div>
93 </div>
94 </div>
95 <div class="col" ontouchstart="this.classList.toggle('hover');">
96 <div class="container">
97 <div class="front bg5">
98 <div class="inner">
99 <p>Ajendra</p>
100 <span>Lorem ipsum</span>
101 </div>
102 </div>
103 <div class="back">
104 <div class="inner">
105 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
106 </div>
107 </div>
108 </div>
109 </div>
110 <div class="col" ontouchstart="this.classList.toggle('hover');">
111 <div class="container">
112 <div class="front bg6">
113 <div class="inner">
114 <p>Meena</p>
115 <span>Lorem ipsum</span>
116 </div>
117 </div>
118 <div class="back">
119 <div class="inner">
120 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
121 </div>
122 </div>
123 </div>
124 </div>
125 </div>
126 </div>
127 
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.
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.
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.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.