Free Bootstrap 5 card snippet — Beautiful Card Snippet | Beautiful Article Snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
1
2<div class="container">
3 <div class="column">
4 <div class="demo-title">Latest Article </div>
5
6 <div class="post-module hover">
7 <!-- Thumbnail-->
8 <div class="thumbnail">
9 <div class="date">
10 <div class="day">29</div>
11 <div class="month">Dec</div>
12 </div><img src="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg"/>
13 </div>
14 <!-- Post Content-->
15 <div class="post-content">
16 <div class="category">Nature</div>
17 <h1 class="title">Beautiful Butterfly</h1>
18 <h2 class="sub_title">Butterfly effect is best</h2>
19 <p class="description">Blue butterfly are the best. Butterfly effect is best. Butterfly effect is best. Butterfly effect is best </p>
20 <div class="post-meta"><span class="timestamp"><i class="fa fa-clock-o"></i> 1 hour ago</span>
21 <span class="comments"><i class="fa fa-comments"></i>
22 <a href="#"> 50 comments</a></span></div>
23 </div>
24 </div>
25 </div>
26 <div class="column">
27 <div class="demo-title">Latest Article </div>
28
29 <div class="post-module hover">
30 <!-- Thumbnail-->
31 <div class="thumbnail">
32 <div class="date">
33 <div class="day">29</div>
34 <div class="month">Dec</div>
35 </div><img src="https://images.pexels.com/photos/1853103/pexels-photo-1853103.jpeg"/>
36 </div>
37 <!-- Post Content-->
38 <div class="post-content">
39 <div class="category">Nature</div>
40 <h1 class="title">Beautiful Butterfly</h1>
41 <h2 class="sub_title">Butterfly effect is best</h2>
42 <p class="description">Blue butterfly are the best. Butterfly effect is best. Butterfly effect is best. Butterfly effect is best </p>
43 <div class="post-meta"><span class="timestamp"><i class="fa fa-clock-o"></i> 1 hour ago</span>
44 <span class="comments"><i class="fa fa-comments"></i>
45 <a href="#"> 50 comments</a></span></div>
46 </div>
47 </div>
48 </div>
49 <div class="column">
50 <div class="demo-title">Latest Article </div>
51
52 <div class="post-module hover">
53 <!-- Thumbnail-->
54 <div class="thumbnail">
55 <div class="date">
56 <div class="day">29</div>
57 <div class="month">Dec</div>
58 </div><img src="https://images.pexels.com/photos/2001349/pexels-photo-2001349.jpeg"/>
59 </div>
60 <!-- Post Content-->
61 <div class="post-content">
62 <div class="category">Nature</div>
63 <h1 class="title">Beautiful Butterfly</h1>
64 <h2 class="sub_title">Butterfly effect is best</h2>
65 <p class="description">Blue butterfly are the best. Butterfly effect is best. Butterfly effect is best. Butterfly effect is best </p>
66 <div class="post-meta"><span class="timestamp"><i class="fa fa-clock-o"></i> 1 hour ago</span>
67 <span class="comments"><i class="fa fa-comments"></i>
68 <a href="#"> 50 comments</a></span></div>
69 </div>
70 </div>
71 </div>
72 <div class="column">
73 <div class="demo-title">Latest Article </div>
74
75 <div class="post-module hover">
76 <!-- Thumbnail-->
77 <div class="thumbnail">
78 <div class="date">
79 <div class="day">29</div>
80 <div class="month">Dec</div>
81 </div><img src="https://images.pexels.com/photos/1927320/pexels-photo-1927320.jpeg"/>
82 </div>
83 <!-- Post Content-->
84 <div class="post-content">
85 <div class="category">Nature</div>
86 <h1 class="title">Beautiful Butterfly</h1>
87 <h2 class="sub_title">Butterfly effect is best</h2>
88 <p class="description">Blue butterfly are the best. Butterfly effect is best. Butterfly effect is best. Butterfly effect is best </p>
89 <div class="post-meta"><span class="timestamp"><i class="fa fa-clock-o"></i> 1 hour ago</span>
90 <span class="comments"><i class="fa fa-comments"></i>
91 <a href="#"> 50 comments</a></span></div>
92 </div>
93 </div>
94 </div>
95</div>
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.