→ Shahriar Noyon
→ Bootstrap carousel

Bootstrap carousel

This bootstrap css example is contributed by Shahriar Noyon, on 15-May-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Carousel

Author Shahriar Noyon

479

v.4.6

Fork Fullscreen

<section id="aboutme" class="carousel slide" data-bs-ride="carousel">
         <div class="carousel-inner">
            <div class="carousel-item active">
               <img src="./images/img1.jpg" class="homeimg d-block w-100" alt="...">
               <div class=" carousel-caption ">
                  <h1> NOYON </h1>
                  <h2> Web Devloper </h2>
                  <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod natus maxime eaque optio possimus
                     illum consequuntur perferendis officia vitae praesentium, officiis molestiae nam voluptas veritatis
                     ex culpa aliquid delectus ut? </p>
               </div>
            </div>
            <div class="carousel-item">
               <img src="./images/img2.jpg" class="homeimg d-block w-100" alt="...">
               <div class=" carousel-caption ">
                  <h1> NOYON </h1>
                  <h2> Web Devloper </h2>
                  <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod natus maxime eaque optio possimus
                     illum consequuntur perferendis officia vitae praesentium, officiis molestiae nam voluptas veritatis
                     ex culpa aliquid delectus ut? </p>
               </div>
            </div>
            <div class="carousel-item">
               <img src="./images/img3.jpg" class="homeimg d-block w-100" alt="...">
               <div class=" carousel-caption ">
                  <h1> NOYON </h1>
                  <h2> Web Devloper </h2>
                  <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod natus maxime eaque optio possimus
                     illum consequuntur perferendis officia vitae praesentium, officiis molestiae nam voluptas veritatis
                     ex culpa aliquid delectus ut? </p>
               </div>
            </div>
         </div>
         <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
         </button>
         <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
         </button>
      </sec>

<div class="row justify-content-center text-center mb-5">
			<div class="col-lg-8">

<span class="text-primary fw-semibold">
					Career Goals
				</span>

<h2 class="display-5 fw-bold mt-2">
					Mission & Vision
				</h2>

<p class="lead text-muted">
					My career focus is to learn modern technology,
					build creative projects, and become a skilled developer.
				</p>

</div>
		</div>

<div class="row g-4">

<div class="col-md-6">
				<div class="p-4 border rounded-4 h-100 bg-white">

<h3 class="fw-bold text-primary">
						My Mission
					</h3>

<p class="text-muted mt-3">
						My mission is to improve my programming,
						web development, and problem-solving skills
						while creating useful and modern digital projects.
					</p>

</div>
			</div>

<div class="col-md-6">
				<div class="p-4 border rounded-4 h-100 bg-white">

<h3 class="fw-bold text-success">
						My Vision
					</h3>

<p class="text-muted mt-3">
						My vision is to become a successful software
						developer who inspires others through
						technology, creativity, and innovation.
					</p>

</div>
			</div>

</div>

<div class="text-center mt-5">
			<a href="" class="btn btn-primary px-4 py-2">
				Learn More
			</a>
		</div>

</div>
</section>

<div class="row justify-content-center  mb-5">
      <div class="col-lg-7 text-center">
        <h2 class="fw-bold mb-3">Our service list</h2>
        <p class="text-secondary">
          Clean modern service section built with Bootstrap.
        </p>
      </div>
    </div>

<div class="col-lg-4 col-md-6 ">
        <div class="card border-0 shadow-sm service-card h-100 p-4 position-relative overflow-hidden">

<h5 class="fw-semibold mt-4">Responsive Design</h5>

<p class="text-secondary mt-3">
            Fully responsive layouts optimized for every device and screen size.
          </p>

<a href="#" class="text-decoration-none fw-medium text-primary">
            Learn More
          </a>

</div>
      </div>

<div class="col-lg-4 col-md-6">
        <div class="card border-0 shadow-sm service-card h-100 p-4 position-relative overflow-hidden">

<h5 class="fw-semibold mt-4">Modern Layout</h5>

<p class="text-secondary mt-3">
            Minimal and clean design structure focused on better user experience.
          </p>

<a href="#" class="text-decoration-none fw-medium text-success">
            Learn More
          </a>

</div>
      </div>

<div class="col-lg-4 col-md-6">
        <div class="card border-0 shadow-sm service-card h-100 p-4 position-relative overflow-hidden">

<h5 class="fw-semibold mt-4">MERN Stack Website Create</h5>

<p class="text-secondary mt-3">
            Smart analytics and performance tools to grow your business faster.
          </p>

<a href="#" class="text-decoration-none fw-medium text-warning">
            Learn More
          </a>

</div>
      </div>

<div class="col-lg-4 col-md-6 mt-3">
        <div class="card border-0 shadow-sm service-card h-100 p-4 position-relative overflow-hidden">

<h5 class="fw-semibold mt-4">UI UX Design</h5>

<p class="text-secondary mt-3">
            Optimized workflow and lightning fast loading performance.
          </p>

<a href="#" class="text-decoration-none fw-medium text-danger">
            Learn More
          </a>

</div>
      </div>

<div class="col-lg-4 col-md-6 mt-3">
        <div class="card border-0 shadow-sm service-card h-100 p-4 position-relative overflow-hidden">

<h5 class="fw-semibold mt-4">Secure System</h5>

<p class="text-secondary mt-3">
            Secure and reliable system architecture built for modern platforms.
          </p>

<a href="#" class="text-decoration-none fw-medium text-info">
            Learn More
          </a>

</div>
      </div>

<div class="col-lg-4 col-md-6 mt-3">
        <div class="card border-0 shadow-sm service-card h-100 p-4 position-relative overflow-hidden">

<h5 class="fw-semibold mt-4">24/7 Support</h5>

<p class="text-secondary mt-3">
            Professional support team ready to assist you anytime.
          </p>

<a href="#" class="text-decoration-none fw-medium text-dark">
            Learn More
          </a>

</div>
      </div>

</div>
  </div>
</section>

<section class="feedback-section">
        <div class="container">
            
            <div class="text-center mb-5">
                <h6 class="text-primary fw-bold text-uppercase">Testimonials</h6>
                <h2 class="display-6 fw-bold">Client Feedback</h2>
                <p class="text-muted">What our partners and clients say about our collaboration.</p>
            </div>

<div class="row g-4">
                
                <div class="col-lg-4">
                    <div class="card feedback-card h-100 shadow-sm">
                        <div class="card-body">
                            <i class="bi bi-quote quote-icon"></i>
                            <p class="card-text text-muted mb-4">
                                "The project was delivered ahead of schedule with exceptional attention to detail. The
                                frontend implementation was pixel-perfect and highly responsive."
                            </p>
                            <div class="d-flex align-items-center">
                                <img src="https://images.pexels.com/photos/8801041/pexels-photo-8801041.jpeg" alt="Client" class="client-img me-3">
                                <div>
                                    <h6 class="mb-0 fw-bold">Alex Johnson</h6>
                                    <small class="text-muted">Tech Lead, InnovateCo</small>
                                    <div class="star-rating mt-1">
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="col-lg-4">
                    <div class="card feedback-card h-100 shadow-sm">
                        <div class="card-body">
                            <i class="bi bi-quote quote-icon"></i>
                            <p class="card-text text-muted mb-4">
                                "Highly impressed with the security protocols and privacy measures integrated into our
                                platform. A true professional in secure web development."
                            </p>
                            <div class="d-flex align-items-center">
                                <img src="https://images.pexels.com/photos/36514932/pexels-photo-36514932.jpeg" alt="Client" class="client-img me-3">
                                <div>
                                    <h6 class="mb-0 fw-bold">Sarah Williams</h6>
                                    <small class="text-muted">Product Manager</small>
                                    <div class="star-rating mt-1">
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="col-lg-4">
                    <div class="card feedback-card h-100 shadow-sm">
                        <div class="card-body">
                            <i class="bi bi-quote quote-icon"></i>
                            <p class="card-text text-muted mb-4">
                                "The communication was seamless throughout the development process. Technical problems
                                were handled with logic and efficiency."
                            </p>
                            <div class="d-flex align-items-center">
                                <img src="https://images.pexels.com/photos/5191346/pexels-photo-5191346.jpeg" alt="Client" class="client-img me-3">
                                <div>
                                    <h6 class="mb-0 fw-bold">Michael Chen</h6>
                                    <small class="text-muted">Founder, StartupX</small>
                                    <div class="star-rating mt-1">
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-half"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</section>

More Examples