Carousels Bootstrap 5Free+ CSS
Add a carousel to your UI with Simple and creative About Us snippet design in Bootstrap. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
2.2k views70 downloads
gosnippets.com/preview/simple-and-creative-about-us-snippet-design-in-bootstrap
Source Code
1<section class="history-area">
2 <div class="container">
3 <div class="row">
4 <div class="col-lg-12 text-center">
5 <p class="title-bg-small wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="300ms">About us</p>
6 <h3 class="section-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="400ms">Our
7 <span>History</span></h3>
8 </div>
9 <!-- end col -->
10 </div>
11 <!-- end row -->
12 <div class="row">
13 <div class="col-lg-12">
14 <div id="history-slid" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
15 <!-- Wrapper for slides -->
16 <div class="carousel-inner">
17 <div class="carousel-item row">
18 <div class="col-lg-6 col-md-12 ps-0">
19 <div class="history-img">
20 <img class="img-fluid" src="https://i.ibb.co/CKNmhMX/blog1.jpg" alt="" />
21 </div>
22 </div>
23 <div class="col-lg-6 col-md-12 pe-0">
24 <div class="history-content">
25 <p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
26 Lorem ipsum</p>
27 <h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
28 <p>
29 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
30 tempor incididunt ut labore et dolore magna aliqua
31 </p>
32 <p>
33 Benefit of the socie where we operate. A success website obusly needs great design to be one of
34 the top 10 IT companies in India but the web design is not enough.
35 </p>
36 </div>
37 </div>
38 </div><!-- End off item-->
39 <div class="carousel-item row">
40 <div class="col-lg-6 col-md-12 ps-0">
41 <div class="history-img">
42 <img class="img-fluid" src="https://i.ibb.co/m5yGbdR/blog2.jpg" alt="" />
43 </div>
44 </div>
45 <div class="col-lg-6 col-md-12 pe-0">
46 <div class="history-content">
47 <p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
48 Lorem ipsum</p>
49 <h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
50 <p>
51 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
52 tempor incididunt ut labore et dolore magna aliqua
53 </p>
54 <p>
55 Benefit of the socie where we operate. A success website obusly needs great design to be one of
56 the top 10 IT companies in India but the web design is not enough.
57 </p>
58 </div>
59 </div>
60 </div><!-- End off item-->
61 <div class="carousel-item row">
62 <div class="col-lg-6 col-md-12 ps-0">
63 <div class="history-img">
64 <img class="img-fluid" src="https://i.ibb.co/YXV3zmh/blog3.jpg" alt="" />
65 </div>
66 </div>
67 <div class="col-lg-6 col-md-12 pe-0">
68 <div class="history-content">
69 <p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
70 Lorem ipsum</p>
71 <h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
72 <p>
73 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
74 tempor incididunt ut labore et dolore magna aliqua
75 </p>
76 <p>
77 Benefit of the socie where we operate. A success website obusly needs great design to be one of
78 the top 10 IT companies in India but the web design is not enough.
79 </p>
80 </div>
81 </div>
82 </div><!-- End off item-->
83 <div class="carousel-item row active">
84 <div class="col-lg-6 col-md-12 ps-0">
85 <div class="history-img">
86 <img class="img-fluid" src="https://i.ibb.co/CKNmhMX/blog1.jpg" alt="" />
87 </div>
88 </div>
89 <div class="col-lg-6 col-md-12 pe-0">
90 <div class="history-content">
91 <p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
92 Lorem ipsum</p>
93 <h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
94 <p>
95 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
96 tempor incididunt ut labore et dolore magna aliqua
97 </p>
98 <p>
99 Benefit of the socie where we operate. A success website obusly needs great design to be one of
100 the top 10 IT companies in India but the web design is not enough.
101 </p>
102 </div>
103 </div>
104 </div><!-- End off item-->
105 <div class="carousel-item row">
106 <div class="col-lg-6 col-md-12 ps-0">
107 <div class="history-img">
108 <img class="img-fluid" src="https://i.ibb.co/m5yGbdR/blog2.jpg" alt="" />
109 </div>
110 </div>
111 <div class="col-lg-6 col-md-12 pe-0">
112 <div class="history-content">
113 <p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
114 Lorem ipsum</p>
115 <h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
116 <p>
117 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
118 tempor incididunt ut labore et dolore magna aliqua
119 </p>
120 <p>
121 Benefit of the socie where we operate. A success website obusly needs great design to be one of
122 the top 10 IT companies in India but the web design is not enough.
123 </p>
124 </div>
125 </div>
126 </div><!-- End off item-->
127 <div class="carousel-item row">
128 <div class="col-lg-6 col-md-12 ps-0">
129 <div class="history-img">
130 <img class="img-fluid" src="https://i.ibb.co/YXV3zmh/blog3.jpg" alt="" />
131 </div>
132 </div>
133 <div class="col-lg-6 col-md-12 pe-0">
134 <div class="history-content">
135 <p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
136 Lorem ipsum</p>
137 <h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
138 <p>
139 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
140 tempor incididunt ut labore et dolore magna aliqua
141 </p>
142 <p>
143 Benefit of the socie where we operate. A success website obusly needs great design to be one of
144 the top 10 IT companies in India but the web design is not enough.
145 </p>
146 </div>
147 </div>
148 </div><!-- End off item-->
149 <div class="carousel-item row">
150 <div class="col-lg-6 col-md-12 ps-0">
151 <div class="history-img">
152 <img class="img-fluid" src="https://i.ibb.co/CKNmhMX/blog1.jpg" alt="" />
153 </div>
154 </div>
155 <div class="col-lg-6 col-md-12 pe-0">
156 <div class="history-content">
157 <p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
158 Lorem ipsum</p>
159 <h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
160 <p>
161 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
162 tempor incididunt ut labore et dolore magna aliqua
163 </p>
164 <p>
165 Benefit of the socie where we operate. A success website obusly needs great design to be one of
166 the top 10 IT companies in India but the web design is not enough.
167 </p>
168 </div>
169 </div>
170 </div><!-- End off item-->
171 <div class="carousel-item row">
172 <div class="col-lg-6 col-md-12 ps-0">
173 <div class="history-img">
174 <img class="img-fluid" src="https://i.ibb.co/m5yGbdR/blog2.jpg" alt="" />
175 </div>
176 </div>
177 <div class="col-lg-6 col-md-12 pe-0">
178 <div class="history-content">
179 <p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
180 Lorem ipsum</p>
181 <h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
182 <p>
183 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
184 tempor incididunt ut labore et dolore magna aliqua
185 </p>
186 <p>
187 Benefit of the socie where we operate. A success website obusly needs great design to be one of
188 the top 10 IT companies in India but the web design is not enough.
189 </p>
190 </div>
191 </div>
192 </div><!-- End off item-->
193 </div><!-- End off carusel inner -->
194 <!-- Indicators -->
195 <ol class="carousel-indicators text-center">
196 <li data-bs-target="#history-slid" data-bs-slide-to="0">2000</li>
197 <li data-bs-target="#history-slid" data-bs-slide-to="1">2005</li>
198 <li data-bs-target="#history-slid" data-bs-slide-to="2">2010</li>
199 <li data-bs-target="#history-slid" data-bs-slide-to="3">2015</li>
200 <li data-bs-target="#history-slid" data-bs-slide-to="4" class="active">2020</li>
201 <li data-bs-target="#history-slid" data-bs-slide-to="5">2025</li>
202 <li data-bs-target="#history-slid" data-bs-slide-to="6">2030</li>
203 <li data-bs-target="#history-slid" data-bs-slide-to="7">2035</li>
204 </ol>
205 </div>
206 </div>
207 </div>
208 </div>
209 </section>
210More Carousels snippets
Bootstrap 5 carousel with multiple cards
Free Bootstrap 5 carousel snippet — Bootstrap 5 carousel with multiple cards. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.
CarouselsView →
Sliding tabs | CSS transitions only
Sliding tabs | CSS transitions only — a free Bootstrap 5 carousel snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
CarouselsView →
Bootstrap Services in circle slider snippet
Bootstrap Services in circle slider snippet: a hand-crafted, open-source Bootstrap 5 carousel. HTML, CSS & JS included, ready to copy.
CarouselsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.