→ Anonymous
→ Carousel

Carousel

This bootstrap css example is contributed by Anonymous, on 20-Mar-2024. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Carousel

Author Anonymous

476

v.4.6

Fork Fullscreen

<div id="starryCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#starryCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#starryCarousel" data-slide-to="1"></li>
    <li data-target="#starryCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/1920x1080?text=Slide+1" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/1920x1080?text=Slide+2" class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/1920x1080?text=Slide+3" class="d-block w-100" alt="Slide 3">
    </div>
  </div>
  <a class="carousel-control-prev" href="#starryCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#starryCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

More Examples

Testimonials Carousel
showcase user testimonials

Author:
Prajwal Hallale

11 months ago

702

v.5.3
Testimonial carousel

Author:
Sofia Petrova

7 months ago

618

v.5.3
Interactive image carousel using Bootstrap 5
Full-width carousel with automatically sliding images

Author:
Prajwal Hallale

11 months ago

578

v.5.3
Elegant testimonial carousel
Interactive testimonial carousel with user avatars

Author:
Sofia Petrova

7 months ago

737

v.5.3
Image gallery in bootstrap
Responsive Image gallery

Author:
Mateo Rojas

2 months ago

790

v.5.3
Interactive Service Cards | Bootstrap 5.3
Modern Bootstrap 5.3 component with elegant card rotations and hover animations. Perfect for featuring services, products, or team members

Author:
Anonymous

2 months ago

1.4k

v.5.3
Get In Touch Form Example
Contact us form

Author:
Anonymous

4 months ago

463

v.5.3
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

5 months ago

558

v.4.6
About us section

Author:
Kemaya m

11 months ago

371

v.4.6
404 page template
with an animated illustration and a button to redirect to the homepage

Author:
Anonymous

3 weeks ago

395

v.5.3
Mobile App Landing Page with Bootstrap 5

Author:
Ankit khedkar

5 months ago

783

v.5.3
Pricing cards

Author:
Prajwal Hallale

11 months ago

495

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent