Add a utility to your UI with Responsive Timeline with Bootstrap-5. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<section>
2<div class="container py-5">
3 <div class="row">
4 <div class="col-md-12">
5 <div class="main-timeline">
6 <div class="timeline">
7 <div class="timeline-content">
8 <div class="circle"><span class="homebox">
9 <img src="https://i.imgur.com/HcJ2oCI.png" class="img">
10 </span></div>
11 <div class="content">
12 <span class="year">No.1</span>
13 <h3 class="title h4">Heading</h3>
14 <p class="description">
15 Tristique senectus et netus et malesuada fames. Sit amet consectetur adipiscing elit pellentesque. Felis imperdiet proin fermentum leo vel orci porta non pulvinar.
16 </p>
17 <div class="icon"><span></span></div>
18 </div>
19 </div>
20 </div>
21 <div class="timeline">
22 <div class="timeline-content">
23 <div class="circle"><span class="homebox"><img src="https://i.imgur.com/HcJ2oCI.png" class="img"></span></div>
24 <div class="content">
25 <span class="year">No.2</span>
26 <h3 class="title h4">Heading</h3>
27 <p class="description">
28 Tristique senectus et netus et malesuada fames. Sit amet consectetur adipiscing elit pellentesque. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Erat nam at lectus urna duis convallis. Eget aliquet nibh praesent tristique magna. Interdum posuere lorem ipsum dolor sit amet. Elementum tempus egestas sed sed risus pretium quam. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices.
29 </p>
30 <div class="icon"><span></span></div>
31 </div>
32 </div>
33 </div>
34 <div class="timeline">
35 <div class="timeline-content">
36 <div class="circle"><span class="homebox"><img src="https://i.imgur.com/HcJ2oCI.png" class="img"></span></div>
37 <div class="content">
38 <span class="year">No.3</span>
39 <h3 class="title h4">Heading</h3>
40 <p class="description">
41 Ornare aenean euismod elementum nisi quis eleifend. Libero id faucibus nisl tincidunt eget nullam non. Suspendisse interdum consectetur libero id faucibus. Adipiscing enim eu turpis egestas pretium. Dignissim convallis aenean et tortor. Dui accumsan sit amet nulla. Duis convallis convallis tellus id interdum.
42 </p>
43 <div class="icon"><span></span></div>
44 </div>
45 </div>
46 </div>
47 <div class="timeline">
48 <div class="timeline-content">
49 <div class="circle"><span class="homebox"><img src="https://i.imgur.com/HcJ2oCI.png" class="img"></span></div>
50 <div class="content">
51 <span class="year">No.4</span>
52 <h3 class="title h4">Heading</h3>
53 <p class="description">
54 Sed blandit libero volutpat sed cras. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. Aliquam ultrices sagittis orci a. Ipsum nunc aliquet bibendum enim facilisis. Magna ac placerat vestibulum lectus mauris ultrices eros. Proin sagittis nisl rhoncus mattis rhoncus. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Et ultrices neque ornare aenean euismod elementum nisi. Ultricies mi quis hendrerit dolor magna eget est lorem.
55 </p>
56 <div class="icon"><span></span></div>
57 </div>
58 </div>
59 </div>
60 <div class="timeline">
61 <div class="timeline-content">
62 <div class="circle"><span class="homebox"><img src="https://i.imgur.com/HcJ2oCI.png" class="img"></span></div>
63 <div class="content">
64 <span class="year">No.5</span>
65 <h3 class="title 4">Heading</h3>
66 <p class="description">
67 Enim blandit volutpat maecenas volutpat blandit aliquam etiam. Tellus mauris a diam maecenas sed enim ut. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Sed sed risus pretium quam vulputate dignissim suspendisse in est.
68 </p>
69 <div class="icon"><span></span></div>
70 </div>
71 </div>
72 </div>
73 <div class="timeline">
74 <div class="timeline-content">
75 <div class="circle"><span class="homebox"><img src="https://i.imgur.com/HcJ2oCI.png" class="img"></span></div>
76 <div class="content">
77 <span class="year">No.6</span>
78 <h3 class="title h4">Heading</h3>
79 <p class="description">
80 Eu feugiat pretium nibh ipsum consequat. Et molestie ac feugiat sed lectus vestibulum mattis. Sit amet consectetur adipiscing elit duis tristique.
81 </p>
82 <div class="icon"><span></span></div>
83 </div>
84 </div>
85 </div>
86 <div class="timeline">
87 <div class="timeline-content">
88 <div class="circle"><span class="homebox"><img src="https://i.imgur.com/HcJ2oCI.png" class="img"></span></div>
89 <div class="content">
90 <span class="year">No.7</span>
91 <h3 class="title h4">Heading</h3>
92 <p class="description">
93 Egestas fringilla phasellus faucibus scelerisque eleifend donec. Vitae justo eget magna fermentum iaculis. Euismod lacinia at quis risus sed vulputate. Congue nisi vitae suscipit tellus mauris a diam.
94 </p>
95 <div class="icon"><span></span></div>
96 </div>
97 </div>
98 </div>
99 <div class="timeline">
100 <div class="timeline-content">
101 <div class="circle"><span class="homebox"><img src="https://i.imgur.com/HcJ2oCI.png" class="img"></span></div>
102 <div class="content">
103 <span class="year">No.8</span>
104 <h3 class="title h4">Heading</h3>
105 <p class="description">
106 Eget nunc scelerisque viverra mauris in aliquam. Nibh tortor id aliquet lectus.
107 </p>
108 <p class="description">
109 Semper quis lectus nulla at volutpat diam. Scelerisque purus semper eget duis at tellus at urna condimentum. Nisl suscipit adipiscing bibendum est.
110 </p>
111 <p class="description">
112 Nisi vitae suscipit tellus mauris. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Placerat orci nulla pellentesque dignissim enim sit amet venenatis urna.
113 </p>
114 <div class="icon"><span></span></div>
115 </div>
116 </div>
117 </div>
118 <div class="timeline">
119 <div class="timeline-content">
120 <div class="circle"><span class="homebox"><img src="https://i.imgur.com/HcJ2oCI.png" class="img"></span></div>
121 <div class="content">
122 <span class="year">No.9</span>
123 <h3 class="title h4">Heading</h3>
124 <p class="description">
125 Sit amet consectetur adipiscing elit ut. Dolor morbi non arcu risus quis varius quam quisque. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. </p>
126 <p class="description">
127 Elementum sagittis vitae et leo. Risus pretium quam vulputate dignissim suspendisse in est ante in.
128 </p>
129 <div class="icon"><span></span></div>
130 </div>
131 </div>
132 </div>
133 <div class="timeline">
134 <div class="timeline-content">
135 <div class="circle"><span class="homebox"><img src="https://i.imgur.com/HcJ2oCI.png" class="img"></span></div>
136 <div class="content">
137 <span class="year">No.10</span>
138 <h3 class="title h4">Heading</h3>
139
140 <p class="description">
141 Tellus in hac habitasse platea. Commodo nulla facilisi nullam vehicula ipsum a. Quis commodo odio aenean sed adipiscing. Ipsum consequat nisl vel pretium lectus. Dolor morbi non arcu risus quis varius. Mi bibendum neque egestas congue quisque egestas diam in.</p>
142 <p class="description">
143 Id eu nisl nunc mi ipsum faucibus vitae aliquet. Placerat orci nulla pellentesque dignissim enim.</p>
144
145 <div class="icon"><span></span></div>
146 </div>
147 </div>
148 </div>
149 </div>
150 </div>
151 </div>
152</div>
153</section>
154
155
156
157
158
159
160
161
162
163</body></html>
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.
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.