Bootstrap 4 Carousel Explained with Examples
Bootstrap 4's carousel component creates a responsive slideshow for cycling through images or content. Let me explain how it works with practical examples.
Basic Carousel Structure
A Bootstrap carousel requires these key elements:
- A container with
.carouseland.slideclasses - Inner
.carousel-innercontainer for slides - Individual
.carousel-itemelements for each slide - Navigation controls (previous/next)
- Optional indicators
Example 1: Basic Image Carousel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Carousel Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<style>
.carousel-container {
max-width: 800px;
margin: 40px auto;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
border-radius: 8px;
overflow: hidden;
}
.carousel-item {
height: 400px;
background-color: #f8f9fa;
}
.carousel-caption {
background-color: rgba(0,0,0,0.5);
border-radius: 4px;
padding: 15px;
}
.placeholder-img {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #6c757d;
font-size: 1.2rem;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container my-5">
<h2 class="text-center mb-4">Bootstrap 4 Carousel Examples</h2>
<div class="carousel-container">
<div id="basicCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#basicCarousel" data-slide-to="0" class="active"></li>
<li data-target="#basicCarousel" data-slide-to="1"></li>
<li data-target="#basicCarousel" data-slide-to="2"></li>
</ol>
<!-- Slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="placeholder-img bg-primary text-white">
Slide 1 - Nature Image
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Beautiful Nature</h5>
<p>Scenic landscapes and natural wonders</p>
</div>
</div>
<div class="carousel-item">
<div class="placeholder-img bg-success text-white">
Slide 2 - Cityscape Image
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Urban Life</h5>
<p>Cityscapes and architectural marvels</p>
</div>
</div>
<div class="carousel-item">
<div class="placeholder-img bg-info text-white">
Slide 3 - Technology Image
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Modern Technology</h5>
<p>Innovation and digital transformation</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" href="#basicCarousel" 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="#basicCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="mt-5">
<h4>Carousel Features:</h4>
<ul>
<li>Responsive design that works on all screen sizes</li>
<li>Automatic sliding with pause on hover</li>
<li>Indicator dots to show current position</li>
<li>Previous/next navigation arrows</li>
<li>Caption support for each slide</li>
<li>Touch/swipe support for mobile devices</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
</body>
</html>
Example 2: Carousel with Custom Controls and Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Carousel Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<style>
.custom-carousel {
max-width: 900px;
margin: 40px auto;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}
.custom-carousel .carousel-item {
height: 450px;
transition: transform 0.6s ease-in-out;
}
.custom-carousel .carousel-caption {
bottom: 50px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
.custom-carousel .carousel-control-prev,
.custom-carousel .carousel-control-next {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(0,0,0,0.3);
top: 50%;
transform: translateY(-50%);
opacity: 0.7;
transition: opacity 0.3s;
}
.custom-carousel .carousel-control-prev {
left: 20px;
}
.custom-carousel .carousel-control-next {
right: 20px;
}
.custom-carousel .carousel-control-prev:hover,
.custom-carousel .carousel-control-next:hover {
opacity: 0.9;
}
.custom-carousel .carousel-indicators li {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
}
.custom-slide {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container my-5">
<h2 class="text-center mb-4">Customized Bootstrap Carousel</h2>
<div class="custom-carousel">
<div id="customCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#customCarousel" data-slide-to="0" class="active"></li>
<li data-target="#customCarousel" data-slide-to="1"></li>
<li data-target="#customCarousel" data-slide-to="2"></li>
<li data-target="#customCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="custom-slide bg-gradient-primary">
Travel Destination 1
</div>
<div class="carousel-caption">
<h3>Mountain Retreat</h3>
<p>Experience the serenity of nature</p>
</div>
</div>
<div class="carousel-item">
<div class="custom-slide bg-gradient-success">
Travel Destination 2
</div>
<div class="carousel-caption">
<h3>Beach Paradise</h3>
<p>Relax on pristine sandy beaches</p>
</div>
</div>
<div class="carousel-item">
<div class="custom-slide bg-gradient-info">
Travel Destination 3
</div>
<div class="carousel-caption">
<h3>City Adventure</h3>
<p>Explore vibrant urban landscapes</p>
</div>
</div>
<div class="carousel-item">
<div class="custom-slide bg-gradient-warning">
Travel Destination 4
</div>
<div class="carousel-caption">
<h3>Cultural Experience</h3>
<p>Immerse yourself in local traditions</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#customCarousel" 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="#customCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="row mt-5">
<div class="col-md-6">
<h4>Customization Options:</h4>
<ul>
<li>Custom transition timing with CSS</li>
<li>Styled navigation controls</li>
<li>Custom indicators</li>
<li>Gradient backgrounds</li>
<li>Adjusted caption positioning</li>
<li>Control over slide interval</li>
</ul>
</div>
<div class="col-md-6">
<h4>Usage Tips:</h4>
<ul>
<li>Use high-quality images for best results</li>
<li>Keep captions concise and impactful</li>
<li>Set appropriate slide intervals (3000-5000ms)</li>
<li>Test on mobile devices for touch responsiveness</li>
<li>Consider adding fade transition for a different effect</li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
</body>
</html>
Key Features of Bootstrap 4 Carousel
- Responsive Design: Automatically adjusts to different screen sizes
- Touch Support: Supports swipe gestures on touch devices
- Automatic Cycling: Slides can transition automatically
- Pause Functionality: Hovering pauses the slideshow
- Accessibility: Built-in ARIA attributes for screen readers
- Customizable: Easy to style and modify with CSS
Usage Notes
- Always include the required Bootstrap CSS and JS files
- The
data-ride="carousel"attribute initializes the carousel automatically - Use
data-intervalto set the delay between slides (in milliseconds) - Add
data-pause="false"to disable pausing on hover - The
data-wrap="false"attribute stops cycling after the last slide
The carousel component is versatile and can be customized to fit various design needs while maintaining responsiveness and accessibility.
At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.
Terms Disclaimer About Us Contact Us
Copyright 2023-2025 © All rights reserved.