Timeline design example with pure CSS — a free Bootstrap 5 utility snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
1<div class="wrapper">
2 <div class="center-line">
3 <a href="#" class="scroll-icon"><i class="fas fa-caret-up"></i></a>
4 </div>
5 <div class="row row-1">
6 <section>
7 <i class="icon fas fa-home"></i>
8 <div class="details">
9 <span class="title">Title of Section 1</span>
10 <span>1st Jan 2022</span>
11 </div>
12 <p>Lorem ipsum dolor sit ameters consectetur adipisicing elit. Sed qui veroes praesentium maiores, sint eos vero sapiente voluptas debitis dicta dolore.</p>
13 <div class="bottom">
14 <a href="#">Read more</a>
15 <i>- Someone famous</i>
16 </div>
17 </section>
18 </div>
19 <div class="row row-2">
20 <section>
21 <i class="icon fas fa-star"></i>
22 <div class="details">
23 <span class="title">Title of Section 2</span>
24 <span>2nd Jan 2022</span>
25 </div>
26 <p>Lorem ipsum dolor sit ameters consectetur adipisicing elit. Sed qui veroes praesentium maiores, sint eos vero sapiente voluptas debitis dicta dolore.</p>
27 <div class="bottom">
28 <a href="#">Read more</a>
29 <i>- Someone famous</i>
30 </div>
31 </section>
32 </div>
33 <div class="row row-1">
34 <section>
35 <i class="icon fas fa-rocket"></i>
36 <div class="details">
37 <span class="title">Title of Section 3</span>
38 <span>3rd Jan 2022</span>
39 </div>
40 <p>Lorem ipsum dolor sit ameters consectetur adipisicing elit. Sed qui veroes praesentium maiores, sint eos vero sapiente voluptas debitis dicta dolore.</p>
41 <div class="bottom">
42 <a href="#">Read more</a>
43 <i>- Someone famous</i>
44 </div>
45 </section>
46 </div>
47 <div class="row row-2">
48 <section>
49 <i class="icon fas fa-globe"></i>
50 <div class="details">
51 <span class="title">Title of Section 4</span>
52 <span>4th Jan 2022</span>
53 </div>
54 <p>Lorem ipsum dolor sit ameters consectetur adipisicing elit. Sed qui veroes praesentium maiores, sint eos vero sapiente voluptas debitis dicta dolore.</p>
55 <div class="bottom">
56 <a href="#">Read more</a>
57 <i>- Someone famous</i>
58 </div>
59 </section>
60 </div>
61 <div class="row row-1">
62 <section>
63 <i class="icon fas fa-paper-plane"></i>
64 <div class="details">
65 <span class="title">Title of Section 5</span>
66 <span>5th Jan 2022</span>
67 </div>
68 <p>Lorem ipsum dolor sit ameters consectetur adipisicing elit. Sed qui veroes praesentium maiores, sint eos vero sapiente voluptas debitis dicta dolore.</p>
69 <div class="bottom">
70 <a href="#">Read more</a>
71 <i>- Someone famous</i>
72 </div>
73 </section>
74 </div>
75 <div class="row row-2">
76 <section>
77 <i class="icon fas fa-map-marker-alt"></i>
78 <div class="details">
79 <span class="title">Title of Section 6</span>
80 <span>6th Jan 2022</span>
81 </div>
82 <p>Lorem ipsum dolor sit ameters consectetur adipisicing elit. Sed qui veroes praesentium maiores, sint eos vero sapiente voluptas debitis dicta dolore.</p>
83 <div class="bottom">
84 <a href="#">Read more</a>
85 <i>- Someone famous</i>
86 </div>
87 </section>
88 </div>
89 </div>
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.