How to create a carousel in Bootstrap 5.3

To create a carousel in 5.3, you can include Bootstrap’s production-ready CSS and JavaScript via CDN without the need for any bold steps. With npm packages such as Vite, Parcel, and Webpack, you can install Bootstrap 5.3 as a dependency. Once you have done these steps, you can copy the carousel template from the component panel and customize it.

How can I make Bootstrap 5.3 carousel responsive?

Bootstrap 5.3 carousel template is built for responsive, mobile-first sites. By default, Bootstrap has breakpoints. Each breakpoint represents different screen sizes, such as mobile phones, tablets, desktops, and larger screens. These breakpoints can be applied to carousels to make them responsive as they load on a mobile device and other larger-scale devices like tablets and desktops.

Can I customize Bootstrap 5.3 carousels?

Bootstrap carousel components such as control buttons, control indicators, sliders, and play/pause buttons can be customized. Custom font icons, images, videos, and third-party libraries can be used to customize carousels in Bootstrap. You can change font sizes, colors, and how elements respond on different screen sizes. This helps create consistency across the UI elements on the website.

Does Bootstrap 5.3 carousel support older browsers?

Bootstrap 5.3 removed support for older browsers in favor of modern browsers. That means some new features in your carousel components might not function well in older browsers. However, Bootstrap provided guidelines on fixing these using polyfills and vendor prefixes for better browser compatibility.

Web Development LambdaTest Experiments

35 Best Bootstrap Carousel Examples for 2024

Alex Anie

Posted On: December 28, 2023

150903 Views

27 Min Read

Home
>
Blog
>
35 Best Bootstrap Carousel Examples for 2024

Organizing web content can be overwhelming, especially when the types of content you want to add to your web page are in groups and contain text, images, or videos.

Think of a scenario where you want to buy a product online, and every product on the web page is stacked on top of one another (vertically), making you keep scrolling just to find the one you want to buy or having to navigate between multiple pages to search for related items you wish to purchase. This can be a tedious and unpleasant user experience for the users.

To fix these, we can implement or design each element on the web page as a carousel, where all elements can be categorized based on their similarities. This will enable users to select items and navigate between relative items with ease on the web page.

However, carousels can be time-consuming when implemented from scratch on the web. This is due to the endless cross browser testing required for elements to be browser-compatible and the need for each carousel component, such as button controls, picker controls, and sliders, to function across different screen sizes correctly.

Additionally, responsiveness must be achieved across different screen resolutions for a better user experience on different platforms such as TV, desktop, tablets, and mobile. This is where the Bootstrap carousel can be implemented.

In this blog post, we will explore 35 Bootstrap carousel examples for 2024.

These Bootstrap carousel examples will be from various websites and mobile applications so you can get inspiration for your project. We’ll also provide code snippets so that you can easily incorporate them into your projects.

By the end of the blog on Bootstrap carousel examples, you should be able to create and customize your own Bootstrap carousel from scratch and implement it on your website.

TABLE OF CONTENTS

What are Bootstrap Carousels?
Keys Areas to Consider Before Designing Bootstrap Carousels
Best Bootstrap Carousels Examples
Why Are Testing Bootstrap Carousels Important?
Conclusion
Frequently Asked Questions (FAQs)

What are Bootstrap Carousels?

Bootstrap carousels are ways web developers and designers can create beautiful and eye-catching carousel components using Bootstrap CSS template.

They provide out-of-the-box functionality such as auto-rotating slides, slider controls, picker controls, CSS breakpoints, random transition effects, animations, and responsive layouts on different screen resolutions. They can be highly customizable with other Bootstrap template components such as accordions, alerts, badges, breadcrumbs, cards, buttons, navbars, pagination, and models.

In the next section of this blog on Bootstrap carousel examples, we will discuss some factors to consider when designing carousels.

Keys Areas to Consider Before Designing Bootstrap Carousels

Bootstrap comes with advanced carousel features that can improve how users interact with carousels on the web page. From beautiful fancy animations and transition effects to responsive components and browser-compatible properties, the list of what we can do is endless. However, there are important things to consider before designing a Bootstrap carousel, which are:

Auto-rotation: This will enable carousel sliders to repeat their sequence after completion continuously.
Manual-rotation: This is when the carousel control buttons are used as a way to navigate the slides.
Draggable sliders: This feature lets each slider element function as a draggable control for navigating the carousel elements left and right.
Breakpoints: By default, Bootstrap components are responsive. However, at every breakpoint (different screen sizes), we can determine or realign components of the carousel for better responsiveness.
Single or multiple carousel view: Carousels can either be single view (only one element showing at a time) or multiple view (more than one element showing at a time).

These are some key areas you can consider before designing a carousel, as this can improve performance and user experience. In the section below, we will discuss the best Bootstrap carousel examples.

Best Bootstrap Carousels Examples

We’ve seen some key areas that need to be considered before designing a carousel. However, some Bootstrap carousel examples are worth noting due to their high usage across multiple websites and mobile applications.

Let’s look at the best Bootstrap carousel examples!

Background Carousel

Background carousel sliders are one of the popular Bootstrap carousel examples designed to run automatically as background-image sliders. This enables other elements to be positioned around it while the sliders navigate smoothly on the background as a slideshow. The background carousel sliders can be found majorly on eCommerce and movie listing websites such as Amazon and Netflix.

The above Bootstrap carousel example is a background carousel slider made with a Bootstrap 5.3 template. In this Bootstrap carousel example, we positioned a three-column card display over a Bootstrap background carousel. This enabled the carousel to function as a slideshow below the card items. So, users can easily navigate across different carousel slides while interacting with the card components at the same time.

HTML:

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/Bootstrap@5.0.2/dist/css/Bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Background Carousel</title>
  </head>
<body>
<main class="carousel-container">
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
          <!-- Image One -->
          <div class="carousel-item active">
            <img src="https://user-images.githubusercontent.com/78242022/282570803-1407fdb3-1799-4f77-9690-10939e41aca7.jpg" class="d-block w-100" alt="...">
          </div>

          <!-- Image Two -->
          <div class="carousel-item">
            <img src="https://user-images.githubusercontent.com/78242022/282570839-ceb5e58a-692e-4bb0-a619-90cca31fe2ba.jpg" class="d-block w-100" alt="...">
          </div>

          <!-- Image Three -->
          <div class="carousel-item">
            <img src="https://user-images.githubusercontent.com/78242022/282570850-e5f2d5eb-789c-433d-8698-e9f87d4722ce.jpg" class="d-block w-100" alt="...">
          </div>
        </div>

        <!-- Carousel Control Previous -->
        <div class="button-wrapper">
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>

            <!-- Carousel Control Next -->
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
      </div>
    </div>
</main> <!--[End of Carousel controls]-->

<main class="card-container container">
    <section class="card-wrapper">
        <!-- [First Group] -->
        <div class="row gap-3">
        <!-- Card One -->
        <div class="card col-12 col-lg-3 col-md-4 p-2">
          <img src="https://user-images.githubusercontent.com/78242022/275325801-46647930-1af3-404b-83e0-17d9cc6d25ee.png" class="card-img-top" alt="...">
          <div class="card-body">
          <h5 class="card-title">Apple TV 4K</h5>

            <p class="card-text">
              From $999 or $41.62/mo.per month for 24 mo.months Footnote.</p>
            <a href="#" class="btn btn-primary">Shop Now</a>
          </div>
        </div>
        

        <!-- Card Two -->
        <div class="card col-12 col-lg-3 col-md-4 p-2">
          <img src="https://user-images.githubusercontent.com/78242022/275325804-b50e03a8-20f9-46d1-a437-ff661fbcc22f.png" alt="...">
          <div class="card-body">
          <h5 class="card-title">Apple iPad</h5>
           
            <p class="card-text">
              From $799or $66.58/mo.per month for 12 mo.monthsFootnote</p>
            <a href="#" class="btn btn-primary">Shop Now</a>
          </div>
        </div>

        <!-- Card Three -->
        <div class="card col-12 col-lg-3 col-md-4 p-2">
          <img src="https://user-images.githubusercontent.com/78242022/275325807-1c855f6a-cb67-41e5-95bc-d08f2a259535.png" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">iPhone </h5>
            <p class="card-text">
              From $799or $33.29/mo.per month for 24 mo.monthsFootnote*
              Buy</p>
            <a href="#" class="btn btn-primary">Shop Now</a>
          </div>
        </div>

           <!-- Card Four -->
        <div class="card col-12 col-lg-3 col-md-4 p-2">
          <img src="https://user-images.githubusercontent.com/78242022/275325809-96a5012a-34e6-45a4-9952-2cd66e32866f.png" class="card-img-top" alt="...">
          <div class="card-body">
          <h5 class="card-title">Apple Watch Ultra 2</h5>
            <p class="card-text">From $799or $66.58/mo. per month for 12 mo.monthsFootnote*</p>
            <a href="#" class="btn btn-primary">Shop Now</a>
          </div>
        </div>

        <!-- Card Five -->
        <div class="card col-12 col-lg-3 col-md-4 p-2" >
          <img src="https://user-images.githubusercontent.com/78242022/275325810-01d95b79-2cd6-4319-88a3-c9a565800956.png" class="card-img-top" alt="...">
          <div class="card-body">
          <h5 class="card-title">Mac</h5>
            <p class="card-text">
              From $249or $20.75/mo. per month for 12 mo. months Footnote</p>
            <a href="#" class="btn btn-primary">Shop Now</a>
          </div>
        </div>

        <!-- Card Six -->
          <div class="card col-12 col-lg-3 col-md-4 p-2">
            <img src="https://user-images.githubusercontent.com/78242022/275325803-3133f022-23fd-4f6b-97a9-6e82365b2b74.png" class="card-img-top" alt="...">
            <div class="card-body">
            <h5 class="card-title">HomePod Access</h5>
              <p class="card-text">
                From $999 or $41.62/mo.per month for 24 mo.months Footnote.</p>
              <a href="#" class="btn btn-primary">Shop Now</a>
            </div>
          </div>
        </div>
        </div>
    </section>
</main>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">

    </script>
    <script src="https://cdn.jsdelivr.net/npm/Bootstrap@5.0.2/dist/js/Bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

<head>

<title>Background Carousel</title>

</head>

<body>

</div>

</div>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

</main>

<h5 class="card-title">Apple TV 4K</h5>

From $999 or $41.62/mo.per month for 24 mo.months Footnote.</p>

</div>

<h5 class="card-title">Apple iPad</h5>

From $799or $66.58/mo.per month for 12 mo.monthsFootnote</p>

</div>

<h5 class="card-title">iPhone </h5>

From $799or $33.29/mo.per month for 24 mo.monthsFootnote*

Buy</p>

</div>

<h5 class="card-title">Apple Watch Ultra 2</h5>

<p class="card-text">From $799or $66.58/mo. per month for 12 mo.monthsFootnote*</p>

</div>

From $249or $20.75/mo. per month for 12 mo. months Footnote</p>

</div>

<h5 class="card-title">HomePod Access</h5>

From $999 or $41.62/mo.per month for 24 mo.months Footnote.</p>

</div>

</section>

</main>

</script>

</body>

</html>

CSS:

html {
        overflow-x: hidden;
      }
        body {
          position: relative;
        }

        .carousel-item {
          width: 100vw;
          height: 100vh;
        }

        .carousel-item img {
          width: 100vw;
          object-fit: cover;
        }

     .card-container {
        position: absolute;
        top: 200px;
        left: 10%;
     }

     .card {
      width: 15rem;
     }

     .card img {
        width: 100%;
     }
    

     @media (max-width: 576px) {
        .carousel-item img {
          width: 100vw;
        }

        .card {
          width: 12em;
        }

        .carousel-control-prev,
        .carousel-control-next {
          position: absolute;
          top: -300px;
        }

      .card-container {
        position: absolute;
        top: 200px;
        left: 20%;
      }
    }

    @media (max-width: 500px) {
      .card-container {
        position: absolute;
        left: 1ch;
      }
    }


    @media (max-width: 360px) {
        .carousel-item img {
          width: 100vw;
        }

        .card {
          width: 10em;
        }

        .carousel-control-prev,
        .carousel-control-next {
          position: absolute;
          top: -500px;
        }

      .card-container {
        position: absolute;
        top: 100px;
        left: 18%;
  }
}

html {

overflow-x: hidden;

}

body {

position: relative;

}

.carousel-item {

width: 100vw;

height: 100vh;

}

.carousel-item img {

width: 100vw;

object-fit: cover;

}

.card-container {

position: absolute;

top: 200px;

left: 10%;

}

.card {

width: 15rem;

}

.card img {

width: 100%;

}

@media (max-width: 576px) {

.carousel-item img {

width: 100vw;

}

.card {

width: 12em;

}

.carousel-control-prev,

.carousel-control-next {

position: absolute;

top: -300px;

}

.card-container {

position: absolute;

top: 200px;

left: 20%;

}

@media (max-width: 500px) {

.card-container {

position: absolute;

left: 1ch;

}

@media (max-width: 360px) {

.carousel-item img {

width: 100vw;

}

.card {

width: 10em;

}

.carousel-control-prev,

.carousel-control-next {

position: absolute;

top: -500px;

}

.card-container {

position: absolute;

top: 100px;

left: 18%;

}

See the Pen
Bootstrap background carousel by Ocxigin (@ocxigin)
on CodePen.

Bootstrap 5 Banner Sliders Carousel

Banner carousels are very common types of carousels found mainly on eCommerce websites. This banner carousel displays ads and is usually placed directly below the navbar. This allows visitors to view the carousel ads as soon as they log into the web page.

A typical Bootstrap carousel example of a slider banner can be found on websites like Walmart, Amazon, eBay, Best Buy, and others. When a banner carousel is well implemented, it can send a good message to the user about the brand.

HTML:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/Bootstrap@5.0.2/dist/css/Bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Banner Carousel</title>
  </head>
    <style>
    </style>
<body>
    <main>
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
              <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
              <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
              <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
              <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
              <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
            </div>

            <!-- Image Sliders -->
            <div class="carousel-inner">
            <!-- Image one-->
              <div class="carousel-item active">
                <img src="https://user-images.githubusercontent.com/78242022/273443252-b034e050-3d70-48ef-9f0f-2d77ef9b2604.jpg" class="d-block w-100" alt="...">
              </div>

              <!-- image two -->
              <div class="carousel-item">
                <img src="https://user-images.githubusercontent.com/78242022/282697437-bb8d7140-128f-44e9-a11f-d0d5c8d29f87.png" class="d-block w-100" alt="...">
              </div>

              <!-- Image Three -->
              <div class="carousel-item">
                <img src="https://user-images.githubusercontent.com/78242022/273443248-130249b5-87b7-423d-9281-48d810bcd30d.jpg" class="d-block w-100" alt="...">
              </div>

              <!-- Image Four -->
              <div class="carousel-item">
                <img src="https://user-images.githubusercontent.com/78242022/273443251-9c210d6f-35ba-4861-885e-9b2e684ab339.jpg" class="d-block w-100" alt="...">
              </div>

              <!-- Image Five -->
              <div class="carousel-item">
                <img src="https://user-images.githubusercontent.com/78242022/282697428-7690f46f-5446-475a-be69-dbf5d8ccfacd.png" class="d-block w-100" alt="...">
              </div>
            </div>

            <!-- Carousel Controls -->
           <section>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
              </button>
           </section>
          </div>
    </main>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">

    </script>
    <script src="https://cdn.jsdelivr.net/npm/Bootstrap@5.0.2/dist/js/Bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  </body>
</html>

<!doctype html>

<head>

<title>Banner Carousel</title>

</head>

<style>

</style>

<body>

<main>

</div>

</div>

</div>

</div>

</div>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</section>

</div>

</main>

</script>

</body>

</html>

See the Pen
Bootstrap 5 Banner Carousel Sliders by Ocxigin (@ocxigin)
on CodePen.

Product Review Carousel

Product review carousel is one of the best Bootstrap carousel examples that can be used to review different sections, angles, use cases of a particular item. Depending on the item or items being reviewed, a product review carousel can be implemented across multiple websites for different reasons.

For example, an eCommerce website will display a mobile phone for review with other snapshots of the same products. This allows users to click through every image to see the phone from a different angle.

HTML:

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/Bootstrap@5.0.2/dist/css/Bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  </head>
<body>
<main class="carousel-container">
    <section class="carousel-wrapper">
        
        <aside class="buttons">

          <div class="carousel-btn btn1 bg-primary shadow-sm rounded">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"> 
              <img src="https://user-images.githubusercontent.com/78242022/282707979-d7fe3128-58fc-47b9-bcf7-9150b311a403.png" class="d-block w-100" alt="...">
            </button>
          </div>

          <div class="carousel-btn btn2 bg-primary shadow-sm rounded">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" class="">
              <img src="https://user-images.githubusercontent.com/78242022/282707987-d7bf8524-eb9c-441d-85e6-e53df7b4fa89.png" class="d-block w-100" alt="...">
            </button>
          </div>

          <div class="carousel-btn btn3 bg-primary shadow-sm rounded">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">
              <img src="https://user-images.githubusercontent.com/78242022/282707992-e7980555-a6b1-48f5-9416-079f9a7ca8fe.png" class="d-block" alt="...">
            </button>
          </div>

          <div class="carousel-btn btn4 bg-primary shadow-sm rounded"> 
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4">
              <img src="https://user-images.githubusercontent.com/78242022/282707999-8d9ee011-b0da-4512-9d46-42f5e774cf5d.png" class="d-block" alt="...">
            </button>
          </div>
        </aside>

        <!-- Carousel -->
        <aside class="carousel" id="carouselExampleIndicators" class="carousel slide carousel-wrapper d-flex flex-row" data-bs-ride="carousel">
            <section class="carousel-inner">

            <div class="carousel-box box1 carousel-item active bg-primary shadow-sm rounded">
              <img src="https://user-images.githubusercontent.com/78242022/282707979-d7fe3128-58fc-47b9-bcf7-9150b311a403.png" class="d-block w-100" alt="...">
            </div>

            <div class="carousel-box box2 carousel-item bg-primary shadow-sm rounded"> 
              <img src="https://user-images.githubusercontent.com/78242022/282707987-d7bf8524-eb9c-441d-85e6-e53df7b4fa89.png" class="d-block w-100" alt="...">
            </div>

            <div class="carousel-box box3 carousel-item bg-primary shadow-sm rounded">
              <img src="https://user-images.githubusercontent.com/78242022/282707992-e7980555-a6b1-48f5-9416-079f9a7ca8fe.png" class="d-block" alt="...">
            </div>

            <div class="carousel-box box4 carousel-item bg-primary shadow-sm rounded">
              <img src="https://user-images.githubusercontent.com/78242022/282707999-8d9ee011-b0da-4512-9d46-42f5e774cf5d.png" class="d-block" alt="...">
            </div>
          </section>
        </aside>
    </section>
</main>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">

    </script>
    <script src="https://cdn.jsdelivr.net/npm/Bootstrap@5.0.2/dist/js/Bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  </body>
</html>

<head>

</head>

<body>

</button>

</div>

</button>

</div>

</button>

</div>

</button>

</div>

</aside>

</div>

</div>

</div>

</div>

</section>

</aside>

</section>

</main>

</script>

</body>

</html>

CSS:

    *,*::after,*::before {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      main {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

        .carousel-btn {
          width: 40px;
          height: 40px;
          margin: 5px;
          cursor: pointer;
        }
        
        button {
          background: none;
          border: none;
        }

        button img {
          width: 100%;
          object-fit: contain;
          padding:0;
        }

        .carousel-box {
          width: 400px;
          height: 400px;
          margin: 5px;
        }

        .carousel-wrapper {
          display: flex;
        }

        .carousel {
          display: flex;
        }

        .carousel-box img {
          width: 100%;
          object-fit: contain;
        }

        @media screen and (max-width: 499px) {
          .carousel-box {
            width: 180px;
            height: 180px;
            margin: 5px;
        }
        }

*,*::after,*::before {

box-sizing: border-box;

padding: 0;

margin: 0;

}

main {

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

height: 100vh;

}

.carousel-btn {

width: 40px;

height: 40px;

margin: 5px;

cursor: pointer;

}

button {

background: none;

border: none;

}

button img {

width: 100%;

object-fit: contain;

padding:0;

}

.carousel-box {

width: 400px;

height: 400px;

margin: 5px;

}

.carousel-wrapper {

display: flex;

}

.carousel {

display: flex;

}

.carousel-box img {

width: 100%;

object-fit: contain;

}

@media screen and (max-width: 499px) {

.carousel-box {

width: 180px;

height: 180px;

margin: 5px;

}

See the Pen
Bootstrap 5 Product review carousel by Ocxigin (@ocxigin)
on CodePen.

Flicker Image Carousel

Flicker image carousel is a type of carousel that adds quick fade in and fade out transition effects between two images as the user clicks through the carousel control buttons. This is very useful in cases where a series of images is made as a post, forming a carousel. The flicker effects can trigger smooth transitions as users navigate between image sliders.

Here, we used Bootstrap to create a flicker image carousel that fades in and out as users navigate the carousel sliders.

HTML:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/Bootstrap@5.3.2/dist/css/Bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>
  <body>
   <main>
        <div id="carouselExampleFade" class="carousel slide carousel-fade">

            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="https://user-images.githubusercontent.com/78242022/284473812-eda73791-83d8-47db-bb4f-21de64621094.jpg" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="https://user-images.githubusercontent.com/78242022/284473830-babc90af-7e73-4ee8-813b-7d87c4fae908.jpg" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="https://user-images.githubusercontent.com/78242022/284473823-1d713ee7-af6a-4913-b4e4-01d2d78c7e2d.jpg" class="d-block w-100" alt="...">
              </div>
            </div>

            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
                <i class="fa-solid fa-arrow-left"></i>
              <span class="carousel-control-prev-icon visually-hidden" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
             <i class="fa-solid fa-arrow-right"></i>
              <span class="carousel-control-next-icon visually-hidden" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
  </main>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/Bootstrap@5.3.2/dist/js/Bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
  </body>
</html>

<head>

<title>Bootstrap demo</title>

</head>

<body>

<main>

</div>

</div>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

</main>

</body>

</html>

CSS:

.carousel-inner {
        width: 100vw;
        height: 100vh;
    }

    .carousel-inner .carousel-item {
        width: 100%;
        height: 100%;
    }

    .carousel-inner .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    i {
        background-color: black;
        padding: 30px;
        border-radius: 100px;
    }

.carousel-inner {

width: 100vw;

height: 100vh;

}

.carousel-inner .carousel-item {

width: 100%;

height: 100%;

}

.carousel-inner .carousel-item img {

width: 100%;

height: 100%;

object-fit: cover;

}

i {

background-color: black;

padding: 30px;

border-radius: 100px;

}

See the Pen
Bootstrap Flicker image Carousel by Ocxigin (@ocxigin)
on CodePen.

Team Profile Dark Mode Carousel

Team profile carousels is yet another best Bootstrap carousel example that enables organizations to display the names, roles and sometimes social handles of their teams. This makes it easy for users or potential employees to know who to contact when seeking assistance in an organization.

Team profiles showcase the name and title of each team member, making them a great way to interact with other team members in the same role.

HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/Bootstrap@5.3.2/dist/css/Bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>
<body class="text-bg-dark">
    <main>
      <section>

        <div id="carouselExampleCaptions" class="carousel slide">
          <section>
            <p>The Team</p>
        </section>
            <div class="carousel-indicators">
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
            </div>
            
            <div class="carousel-inner"><!--The Carousel Container-->

              <div class="carousel-item active"><!--The Carousel Slider-->
                <aside class="card team1 text-bg-dark">
                    <img src="https://user-images.githubusercontent.com/78242022/283794686-a8370c0c-e16a-49d0-8461-35ec129ebcb3.jpg" alt="">
                    <h2 class="name">Tim Spence</h2>
                    <p class="role">Head of Marketing</p>
                    <p class="work-at">Markson Inc</p>
                </aside>
              </div>

              <div class="carousel-item">
                <aside class="card team1 text-bg-dark">
                    <img src="https://user-images.githubusercontent.com/78242022/283794635-76fb11ee-73d7-4d46-a3f0-d80f0a2c9a9b.jpg" alt="">
                    <h2 class="name">Alan Shin</h2>
                    <p class="role">Co-Founder</p>
                    <p class="work-at">Duper Duper</p>
                </aside>
              </div>

              <div class="carousel-item">
                <aside class="card team1 text-bg-dark">
                  <img src="https://user-images.githubusercontent.com/78242022/283794566-f2111e6a-b8be-47c0-a12f-d4db30793ebf.jpg" alt="">
                  <h2 class="name">Daniel Peng</h2>
                  <p class="role">Head of Corporate</p>
                  <p class="work-at">Development, MCX</p>
              </aside>
              </div>

              <div class="carousel-item">
                <aside class="card team1 text-bg-dark">
                  <img src="https://user-images.githubusercontent.com/78242022/283794629-41fd9ca3-2483-4bb1-a040-d9b1b03434eb.jpg" alt="">
                  <h2 class="name">Brandy Ahn</h2>
                  <p class="role">Overseas Sales</p>
                  <p class="work-at">Newness Golf</p>
                </aside>
              </div>

            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
    </section>
    
  </main>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/Bootstrap@5.3.2/dist/js/Bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
  </body>
</html>

<!doctype html>

<head>

<title>Bootstrap demo</title>

</head>

<main>

</section>

</div>

<h2 class="name">Tim Spence</h2>

<p class="role">Head of Marketing</p>

<p class="work-at">Markson Inc</p>

</aside>

</div>

<p class="role">Co-Founder</p>

<p class="work-at">Duper Duper</p>

</aside>

</div>

<h2 class="name">Daniel Peng</h2>

<p class="role">Head of Corporate</p>

<p class="work-at">Development, MCX</p>

</aside>

</div>

<h2 class="name">Brandy Ahn</h2>

<p class="role">Overseas Sales</p>

<p class="work-at">Newness Golf</p>

</aside>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

</section>

</main>

</body>

</html>

CSS:

  *,*::after, *::before {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        main {
          width: 100vw;
          height: 100vh;
          flex-direction: row;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        #carouselExampleCaptions {
          width: 40vw;
          height: 100%;

          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        #carouselExampleCaptions::before {
          width: 100%;
          height: 100%;
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(90deg, #fff 30%, black 100%);
          z-index: 1;
          mix-blend-mode: multiply;
        }

        #carouselExampleCaptions::after {
          width: 100%;
          height: 100%;
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(-90deg, #fff 30%, black 100%);
          z-index: -1;
          mix-blend-mode: multiply;
        }

        .carousel-inner {
          width: 60%;
        }

        .card {
            width: 80%;
            height: 400px;
            border-radius: 10px;
            border: none;
            transition: filter 0.5s ease;
        }

        .card img {
            filter: grayscale(100%);
            width: 100%;
            height: 16em;
            object-fit: cover;
            object-position: 0% 20%;
            border-radius: inherit;
        }

        .card:hover img {
          filter: grayscale(0);
        }

        .card .name {
            font-size: 1.5em;
            font-weight: 900;
            text-transform: uppercase;
            margin: 0;
            text-align: center;
        }

        .card .role {
            font-size: 1.2em;
            margin: 0;
            text-align: center;
        }

        .card .work-at {
            font-size: 1em;
            text-align: center;
        }

      @media screen and (max-width: 900px){
        #carouselExampleCaptions {
          width: 70vw;
          height: 70vw;
        }

        #carouselExampleCaptions::before {
          background: linear-gradient(90deg, #fff 60%, black 100%);
        }

        #carouselExampleCaptions::after {
          background: linear-gradient(-90deg, #fff 60%, black 100%);
        }

        .card img {
            width: 100%;
            height: 10em;
        }

        .card .name {
          margin-top: 1em;
            font-size: 1em;
            font-weight: 700;
        }

        .card .role {
            font-size: 0.8em;
        }

        .card .work-at {
            font-size: 0.6em;
        }
     }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

*,*::after, *::before {

box-sizing: border-box;

margin: 0;

padding: 0;

}

main {

width: 100vw;

height: 100vh;

flex-direction: row;

display: flex;

justify-content: center;

align-items: center;

}

#carouselExampleCaptions {

width: 40vw;

height: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

#carouselExampleCaptions::before {

width: 100%;

height: 100%;

content: "";

position: absolute;

inset: 0;

background: linear-gradient(90deg, #fff 30%, black 100%);

z-index: 1;

mix-blend-mode: multiply;

}

#carouselExampleCaptions::after {

width: 100%;

height: 100%;

content: "";

position: absolute;

inset: 0;

background: linear-gradient(-90deg, #fff 30%, black 100%);

z-index: -1;

mix-blend-mode: multiply;

}

.carousel-inner {

width: 60%;

}

.card {

width: 80%;

height: 400px;

border-radius: 10px;

border: none;

transition: filter 0.5s ease;

}

.card img {

filter: grayscale(100%);

width: 100%;

height: 16em;

object-fit: cover;

object-position: 0% 20%;

border-radius: inherit;

}

.card:hover img {

filter: grayscale(0);

}

.card .name {

font-size: 1.5em;

font-weight: 900;

text-transform: uppercase;

margin: 0;

text-align: center;

}

.card .role {

font-size: 1.2em;

margin: 0;

text-align: center;

}

.card .work-at {

font-size: 1em;

text-align: center;

}

@media screen and (max-width: 900px){

#carouselExampleCaptions {

width: 70vw;

height: 70vw;

}

#carouselExampleCaptions::before {

background: linear-gradient(90deg, #fff 60%, black 100%);

}

#carouselExampleCaptions::after {

background: linear-gradient(-90deg, #fff 60%, black 100%);

}

.card img {

width: 100%;

height: 10em;

}

.card .name {

margin-top: 1em;

font-size: 1em;

font-weight: 700;

}

.card .role {

font-size: 0.8em;

}

.card .work-at {

font-size: 0.6em;

}

See the Pen
Bootstrap Team Profile Dark Mode by Ocxigin (@ocxigin)
on CodePen.

Team Profile Light Mode Carousel

Another latest Bootstrap carousel example is light mode carousel. For making a simplistic UI, this can be very useful in cases where we need to offer an alternative design outlook to dark mode.

Here is a simple and minimal light-mode team profile carousel effect with Bootstrap.

HTML:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
<body>
    <main>
      <section>
        <div id="carouselExampleCaptions" class="carousel slide">
          <section>
            <p>The Team</p>
        </section>
            <div class="carousel-indicators">
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5" aria-label="Slide 6"></button>
            </div>
            
            <div class="carousel-inner"><!--The Carousel Container-->

              <div class="carousel-item active"><!--The Carousel Slider-->
                <aside class="card team1">
                    <img src="https://user-images.githubusercontent.com/78242022/283794558-047ca72b-9fe0-42f7-8d8e-09c77d48d3c0.jpg" alt="">
                    <h2 class="name">Tim Spence</h2>
                    <p class="role">Head of Marketing</p>
                    <p class="work-at">Markson Inc</p>
                </aside>
              </div>

              <div class="carousel-item">
                <aside class="card team1">
                    <img src="https://user-images.githubusercontent.com/78242022/283794539-fc01d463-7bad-4887-a02a-2b9c3eed891f.jpg" alt="">
                    <h2 class="name">Alan Shin</h2>
                    <p class="role">Co-Founder</p>
                    <p class="work-at">Duper Duper</p>
                </aside>
              </div>

              <div class="carousel-item">
                <aside class="card team1">
                  <img src="https://user-images.githubusercontent.com/78242022/283794643-4cea087e-3214-4331-84f8-fde21a8f22db.jpg" alt="">
                  <h2 class="name">Laurel Peng</h2>
                  <p class="role">Head of Corporate</p>
                  <p class="work-at">Development, MCX</p>
              </aside>
              </div>

              <div class="carousel-item">
                <aside class="card team1">
                  <img src="https://user-images.githubusercontent.com/78242022/283794585-346ab892-20b2-45b5-9c70-5e99e149e65a.jpg" alt="">
                  <h2 class="name">Brandy Ahn</h2>
                  <p class="role">Overseas Sales</p>
                  <p class="work-at">Newness Golf</p>
                </aside>
              </div>

              <div class="carousel-item">
                <aside class="card team1">
                  <img src="https://user-images.githubusercontent.com/78242022/283794595-9f1358ea-5af5-4b69-8295-bde8961fed84.jpg" alt="">
                  <h2 class="name">JoJo Kinis</h2>
                  <p class="role">DevOps Engineer</p>
                  <p class="work-at">Ylyeer</p>
                </aside>
              </div>

              <div class="carousel-item">
                <aside class="card team1">
                  <img src="https://user-images.githubusercontent.com/78242022/242978218-d0e4eba2-62f7-4464-b2fb-c89835b6e592.jpg" alt="">
                  <h2 class="name">Alex Anie</h2>
                  <p class="role">Fronted Developer</p>
                  <p class="work-at">Freelancer</p>
                </aside>
              </div>

            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
              <i class="fa-solid fa-arrow-left"></i>
              <span class="carousel-control-prev-icon visually-hidden" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
              <i class="fa-solid fa-arrow-right"></i>
              <span class="carousel-control-next-icon visually-hidden" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
    </section>
  </main>
  </body>
</html>

<head>

</head>

<body>

<main>

</section>

</div>

<h2 class="name">Tim Spence</h2>

<p class="role">Head of Marketing</p>

<p class="work-at">Markson Inc</p>

</aside>

</div>

<p class="role">Co-Founder</p>

<p class="work-at">Duper Duper</p>

</aside>

</div>

<h2 class="name">Laurel Peng</h2>

<p class="role">Head of Corporate</p>

<p class="work-at">Development, MCX</p>

</aside>

</div>

<h2 class="name">Brandy Ahn</h2>

<p class="role">Overseas Sales</p>

<p class="work-at">Newness Golf</p>

</aside>

</div>

<h2 class="name">JoJo Kinis</h2>

<p class="role">DevOps Engineer</p>

<p class="work-at">Ylyeer</p>

</aside>

</div>

<p class="role">Fronted Developer</p>

<p class="work-at">Freelancer</p>

</aside>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

</section>

</main>

</body>

</html>

CSS:

    *,*::after, *::before {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
          background-color: rgb(241 245 249);
        }

        main {
          width: 100vw;
          height: 100vh;
          flex-direction: row;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        #carouselExampleCaptions {
          width: 40vw;
          height: 100%;

          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .carousel-inner {
            width: 60%;
        }

        .card {
            width: 100%;
            height: 400px;
            border-radius: 10px;
            border: none;
            transition: filter 0.5s ease;
            box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
        }

        .card img {
            filter: grayscale(100%);
            width: 100%;
            height: 16em;
            object-fit: cover;
            object-position: 0% 20%;
            border-radius: inherit;
        }

        .card:hover img {
          filter: grayscale(0);
        }

        .card .name {
            font-size: 1.5em;
            font-weight: 900;
            text-transform: uppercase;
            margin: 0;
            text-align: center;
        }

        .card .role {
            font-size: 1.2em;
            margin: 0;
            text-align: center;
        }

        .card .work-at {
            font-size: 1em;
            text-align: center;
        }

        i.fa-arrow-right,
       i.fa-arrow-left {
          background: orangered;
          padding: 10px;
          border-radius: 100%;
        }

        .carousel-indicators [data-bs-target] {
          background-color: orangered;
          width: 10px;
          height: 10px;
          border-radius: 100%;
          transition: opacity, width .6s ease;
        }

        .carousel-indicators .active {
            opacity: 1;
            width: 20px;
        }

      @media screen and (max-width: 900px){
        #carouselExampleCaptions {
          width: 70vw;
          height: 70vh;
        }

        #carouselExampleCaptions::before {
          background: linear-gradient(90deg, #fff 60%, black 100%);
        }

        #carouselExampleCaptions::after {
          background: linear-gradient(-90deg, #fff 60%, black 100%);
        }

        .card img {
            width: 100%;
            height: 10em;
        }

        .card .name {
          margin-top: 1em;
            font-size: 1em;
            font-weight: 700;
        }

        .card .role {
            font-size: 0.8em;
        }

        .card .work-at {

            font-size: 0.6em;
        }
      }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

*,*::after, *::before {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

background-color: rgb(241 245 249);

}

main {

width: 100vw;

height: 100vh;

flex-direction: row;

display: flex;

justify-content: center;

align-items: center;

}

#carouselExampleCaptions {

width: 40vw;

height: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.carousel-inner {

width: 60%;

}

.card {

width: 100%;

height: 400px;

border-radius: 10px;

border: none;

transition: filter 0.5s ease;

box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);

}

.card img {

filter: grayscale(100%);

width: 100%;

height: 16em;

object-fit: cover;

object-position: 0% 20%;

border-radius: inherit;

}

.card:hover img {

filter: grayscale(0);

}

.card .name {

font-size: 1.5em;

font-weight: 900;

text-transform: uppercase;

margin: 0;

text-align: center;

}

.card .role {

font-size: 1.2em;

margin: 0;

text-align: center;

}

.card .work-at {

font-size: 1em;

text-align: center;

}

i.fa-arrow-right,

i.fa-arrow-left {

background: orangered;

padding: 10px;

border-radius: 100%;

}

.carousel-indicators [data-bs-target] {

background-color: orangered;

width: 10px;

height: 10px;

border-radius: 100%;

transition: opacity, width .6s ease;

}

.carousel-indicators .active {

opacity: 1;

width: 20px;

}

@media screen and (max-width: 900px){

#carouselExampleCaptions {

width: 70vw;

height: 70vh;

}

#carouselExampleCaptions::before {

background: linear-gradient(90deg, #fff 60%, black 100%);

}

#carouselExampleCaptions::after {

background: linear-gradient(-90deg, #fff 60%, black 100%);

}

.card img {

width: 100%;

height: 10em;

}

.card .name {

margin-top: 1em;

font-size: 1em;

font-weight: 700;

}

.card .role {

font-size: 0.8em;

}

.card .work-at {

font-size: 0.6em;

}

See the Pen
Bootstrap Team Profile Light Mode by Ocxigin (@ocxigin)
on CodePen.

Bootstrap Multi-Columns Carousel Products

At times, we might require carousels to be grouped into sections to help display similar projects, images, products, or members of a similar role in a single group. For this, we have another popular Bootstrap carousel example – a multi-column carousel.

This will help distinguish carousel sliders from other sliders, as each group will be in the same section and swipe together.

Here, we create a Bootstrap multi-column carousel slider. The first slider is a group of shoes, the second slider is a group of iPhone products, and the third section is a group of headsets. This makes it easy for users to navigate based on interest to decide what to buy from a website.

Bootstrap Multi-Columns Carousel Products

HTML:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
<body>
    <main>
      <section>
        <div id="carouselExampleCaptions" class="carousel slide">
          <section>
            <p>Select from the product Catalogue</p>
        </section>
            <div class="carousel-indicators">
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            
            <div class="carousel-inner"><!--The Carousel Container-->

              <div class="carousel-item carousel-item-1 active"><!--The Carousel item 1-->
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                    <div class="col">
                        <div class="card shadow-sm mx-8 my-5">
                            <small class="text-bg-warning px-5 rounded text-bg-light new">new</small>
                            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                                <image href="https://source.unsplash.com/unpaired-red-nike-sneaker-164_6wVEHfI" height="100%" width="100%" />
                            </svg>
                            <div class="card-body">
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                              <p class="card-text">Nike</p>
                              <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                  <button type="button" class="btn btn-sm btn-outline-warning">View</button>
                                  <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button>
                                </div>
                                <small class="text-bg-warning px-2 rounded">$800.00</small>
                              </div>
                              
                            </div>
                          </div><!--[end of card]-->
                    </div>
                    
                    <div class="col">
                        <div class="card shadow-sm mx-8 my-5">
                            <small class="text-bg-warning px-5 rounded text-bg-light new">new</small>
                            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                                <image href="https://source.unsplash.com/white-adidas-low-top-sneakers-JM-qKEd1GMI" height="100%" width="100%" />
                            </svg>
                            <div class="card-body">
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                              <p class="card-text">Adidas</p>
                              <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                  <button type="button" class="btn btn-sm btn-outline-warning">View</button>
                                  <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button>
                                </div>
                                <small class="text-bg-warning px-2 rounded">$600.00</small>
                              </div>
                            </div>
                          </div><!--[end of card]-->
                    </div>
                    
                    <div class="col">
                        <div class="card shadow-sm mx-8 my-5">
                            <small class="text-bg-warning px-5 rounded text-bg-light new">new</small>
                            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                                <image href="https://source.unsplash.com/white-and-black-nike-air-force-1-low-XZ3EmAIWuz0" height="100%" width="100%" />
                            </svg>
                            <div class="card-body">
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                              <p class="card-text">Slat Sole Show</p>
                              <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                  <button type="button" class="btn btn-sm btn-outline-warning">View</button>
                                  <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button>
                                </div>
                                <small class="text-bg-warning px-2 rounded">$500.00</small>
                              </div>
                              
                            </div>
                          </div><!--[end of card]-->
                    </div>
                </div><!--[End of Carousel Item 1]-->
              </div>

              <!-- Carousel Item 2 -->
              <div class="carousel-item carousel-item-2">
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                    <div class="col">
                        <div class="card shadow-sm mx-8 my-5">
                            <small class="text-bg-warning px-5 rounded text-bg-light new">new</small>
                            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                                <image href="https://source.unsplash.com/flatlay-photography-of-wireless-headphones-PDX_a_82obo" height="100%" width="100%" />
                            </svg>
                            <div class="card-body">
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                              <p class="card-text">Black Glass Headset</p>
                              <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                  <button type="button" class="btn btn-sm btn-outline-warning">View</button>
                                  <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button>
                                </div>
                                <small class="text-bg-warning px-2 rounded">$200.00</small>
                              </div>
                              
                            </div>
                          </div><!--[end of card]-->
                    </div>

                    <div class="col">
                        <div class="card shadow-sm mx-8 my-5">
                            <small class="text-bg-warning px-5 rounded text-bg-light new">new</small>
                            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                                <image href="https://source.unsplash.com/gray-and-brown-corded-headphones-GI6L2pkiZgQ" height="100%" width="100%" />
                            </svg>
                            <div class="card-body">
                                <i class="fa-regular fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                              <p class="card-text">Nano Stripe Headset</p>
                              <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                  <button type="button" class="btn btn-sm btn-outline-warning">View</button>
                                  <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button>
                                </div>
                                <small class="text-bg-warning px-2 rounded">$300.00</small>
                              </div>
                              
                            </div>
                          </div><!--[end of card]-->
                    </div>
      
                    <div class="col">
                        <div class="card shadow-sm mx-8 my-5">
                            <small class="text-bg-warning px-5 rounded text-bg-light new">new</small>
                            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                                <image href="https://source.unsplash.com/black-and-silver-sony-headphones-aiWjNA46Urc" height="100%" width="100%" />
                            </svg>
                            <div class="card-body">
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                                <i class="fa-regular fa-star text-warning"></i>
                              <p class="card-text">Steelseries</p>
                              <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                  <button type="button" class="btn btn-sm btn-outline-warning">View</button>
                                  <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button>
                                </div>
                                <small class="text-bg-warning px-2 rounded">$500.00</small>
                              </div>
                            </div>
                          </div><!--[end of card]-->
                    </div>
                </div>
            </div> <!--[carousel-item-2]-->

             <!-- Carousel Item 3 -->
             <div class="carousel-item carousel-item-2">
              <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                  <div class="col">
                      <div class="card shadow-sm mx-8 my-5">
                          <small class="text-bg-warning px-5 rounded text-bg-light new">new</small>
                          <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                              <image href="https://source.unsplash.com/space-gray-iphone-x-with-box-K1MxhTd6SKo" height="100%" width="100%" />
                          </svg>
                          <div class="card-body">
                              <i class="fa-solid fa-star text-warning"></i>
                              <i class="fa-solid fa-star text-warning"></i>
                              <i class="fa-solid fa-star text-warning"></i>
                              <i class="fa-solid fa-star text-warning"></i>
                              <i class="fa-solid fa-star text-warning"></i>
                            <p class="card-text">iPhone 15</p>
                            <div class="d-flex justify-content-between align-items-center">
                              <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-warning">View</button>
                                <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button>
                              </div>
                              <small class="text-bg-warning px-2 rounded">$2000.00</small>
                            </div>
                            
                          </div>
                        </div><!--[end of card]-->
                  </div>

                  <div class="col">
                      <div class="card shadow-sm mx-8 my-5">
                          <small class="text-bg-warning px-5 rounded text-bg-light new">new</small>
                          <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                              <image href="https://source.unsplash.com/silver-iphone-6-on-silver-macbook-gQ6NlDvRngU" height="100%" width="100%" />
                          </svg>
                          <div class="card-body">
                              <i class="fa-solid fa-star text-warning"></i>
                              <i class="fa-solid fa-star text-warning"></i>
                              <i class="fa-regular fa-star text-warning"></i>
                              <i class="fa-regular fa-star text-warning"></i>
                              <i class="fa-regular fa-star text-warning"></i>
                            <p class="card-text">iPhone 14 Pro Max</p>
                            <div class="d-flex justify-content-between align-items-center">
                              <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-warning">View</button>
                                <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button>
                              </div>
                              <small class="text-bg-warning px-2 rounded">$1500.00</small>
                            </div>
                            
                          </div>
                        </div><!--[end of card]-->
                  </div>
    
                  <div class="col">
                      <div class="card shadow-sm mx-8 my-5">
                          <small class="text-bg-warning px-5 rounded text-bg-light new">new</small>
                          <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                              <image href="https://source.unsplash.com/black-iphone-7-with-white-and-black-dice-YLNMXzXk8zs" height="100%" width="100%" />
                          </svg>
                          <div class="card-body">
                              <i class="fa-solid fa-star text-warning"></i>
                              <i class="fa-solid fa-star text-warning"></i>
                              <i class="fa-solid fa-star text-warning"></i>
                              <i class="fa-regular fa-star text-warning"></i>
                              <i class="fa-regular fa-star text-warning"></i>
                            <p class="card-text">iPhone 14</p>
                            <div class="d-flex justify-content-between align-items-center">
                              <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-warning">View</button>
                                <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button>
                              </div>
                              <small class="text-bg-warning px-2 rounded">$1200.00</small>
                            </div>
                          </div>
                        </div><!--[end of card]-->
                  </div>
              </div>
          </div> <!--[carousel-item-3]-->
          </div><!--[End of Container]-->

          <div class="control-btn">
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
              <i class="fa-solid fa-arrow-right"></i>

              <span class="carousel-control-next-icon visually-hidden" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>

            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
              <span class="carousel-control-prev-icon visually-hidden" aria-hidden="true"></span>
              <i class="fa-solid fa-arrow-left"></i>
              <span class="visually-hidden">Previous</span>
            </button>
        </div>
    </section> 
  </main>
  </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

<head>

<title>Bootstrap demo</title>

</head>

<body>

<main>

<p>Select from the product Catalogue</p>

</section>

</div>

</svg>

</div>

</div>

</div>

</div>

</svg>

<p class="card-text">Adidas</p>

</div>

</div>

</div>

</div>

</svg>

</div>

</div>

</div>

</div>

</div>

</div>

</svg>

<p class="card-text">Black Glass Headset</p>

</div>

</div>

</div>

</div>

</svg>

<p class="card-text">Nano Stripe Headset</p>

</div>

</div>

</div>

</div>

</svg>

<p class="card-text">Steelseries</p>

</div>

</div>

</div>

</div>

</div>

</svg>

<p class="card-text">iPhone 15</p>

</div>

</div>

</div>

</div>

</svg>

<p class="card-text">iPhone 14 Pro Max</p>

</div>

</div>

</div>

</div>

</svg>

<p class="card-text">iPhone 14</p>

</div>

</div>

</div>

</div>

</div>

</div>

</button>

<span class="visually-hidden">Previous</span>

</button>

</div>

</section>

</main>

</body>

</html>

CSS:

*,*::after, *::before {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
          background-color: rgb(241 245 249);
        }

        main {
          width: 100vw;
          height: 100vh;
          flex-direction: row;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
        }

        #carouselExampleCaptions {
          width: 80vw;
          height: 100%;

          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .carousel-inner {
            width: 100%;
        }

        .new {
            position: absolute;
            top: 10px;
            right: 10px;
            display: inline;
        }

        /* Controls */
        i.fa-arrow-right,
        i.fa-arrow-left {
          background: none;
          border: 2px solid #ffc107;
          color: black;
          padding: 10px;
          border-radius: 100%;
          transition: background .6s ease;
        }

        .control-btn  {
            position: absolute;
            top: -1em;
            right: 5em;
        }

        .carousel-item .card {
            height: 20em;
            height: fit-content;
        }

        .control-btn i.fa-arrow-left {
            position: absolute;
            right: 6em;
        } 

        i.fa-arrow-right:hover,
       i.fa-arrow-left:hover {
          background: #ffc107;
          color: black;
        }

        .carousel-control-next {
            margin: 0 3em;
        }

        /* Indicators */

        .carousel-indicators [data-bs-target] {
          width: 10px;
          height: 10px;
          border-radius: 100%;
          border: 2px solid #ffc107;
        }

        .carousel-indicators .active {
            opacity: 1;
            background-color:  #ffc107;
        }

      @media screen and (max-width: 900px){
        #carouselExampleCaptions {
          width: 70vw;
          height: 70vw;
        }

        .card img {
            width: 100%;
        }

        .card .name {
          margin-top: 1em;
            font-size: 1em;
            font-weight: 700;
        }

        .card .role {
            font-size: 0.8em;
        }

        .card .work-at {
            font-size: 0.6em;
        }
        }
      
      @media screen and (max-width: 576px) {
        #carouselExampleCaptions {
          width: 70vw;
          height: 70vh;
        }
        
    .carousel-item .card .card-body {
       position: absolute;
       bottom: 20px;
       left: 10px;
       background-color: rgba(255, 255, 255, 0.9);
       border-radius: 10px;
     }

 }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

*,*::after, *::before {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

background-color: rgb(241 245 249);

}

main {

width: 100vw;

height: 100vh;

flex-direction: row;

display: flex;

justify-content: center;

align-items: center;

position: relative;

}

#carouselExampleCaptions {

width: 80vw;

height: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.carousel-inner {

width: 100%;

}

.new {

position: absolute;

top: 10px;

right: 10px;

display: inline;

}

/* Controls */

i.fa-arrow-right,

i.fa-arrow-left {

background: none;

border: 2px solid #ffc107;

color: black;

padding: 10px;

border-radius: 100%;

transition: background .6s ease;

}

.control-btn {

position: absolute;

top: -1em;

right: 5em;

}

.carousel-item .card {

height: 20em;

height: fit-content;

}

.control-btn i.fa-arrow-left {

position: absolute;

right: 6em;

}

i.fa-arrow-right:hover,

i.fa-arrow-left:hover {

background: #ffc107;

color: black;

}

.carousel-control-next {

margin: 0 3em;

}

/* Indicators */

.carousel-indicators [data-bs-target] {

width: 10px;

height: 10px;

border-radius: 100%;

border: 2px solid #ffc107;

}

.carousel-indicators .active {

opacity: 1;

background-color: #ffc107;

}

@media screen and (max-width: 900px){

#carouselExampleCaptions {

width: 70vw;

height: 70vw;

}

.card img {

width: 100%;

}

.card .name {

margin-top: 1em;

font-size: 1em;

font-weight: 700;

}

.card .role {

font-size: 0.8em;

}

.card .work-at {

font-size: 0.6em;

}

@media screen and (max-width: 576px) {

#carouselExampleCaptions {

width: 70vw;

height: 70vh;

}

.carousel-item .card .card-body {

position: absolute;

bottom: 20px;

left: 10px;

background-color: rgba(255, 255, 255, 0.9);

border-radius: 10px;

}

See the Pen
Bootstrap 5 Multi-Column Carousel Products by Ocxigin (@ocxigin)
on CodePen.

Bootstrap Multi-Columns Team Carousel

Multi-columns carousel is not only limited to product items. We can also separate team members based on their roles. This makes it easy for other team members to know who they share similar roles with.

Here, we create a Bootstrap multi-columns carousel that group team members based on their roles. In this Bootstrap carousel example, the first slide shows team members with marketing roles, while the second shows team members with engineering roles.

HTML:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
<body class="">
    <main>
      <section>
        <div id="carouselExampleCaptions" class="carousel slide">
          <section>
            <p>MEET OUR TEAM</p>
        </section>
            <div class="carousel-indicators">
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
             
            </div>
            
            <div class="carousel-inner"><!--The Carousel Container-->

              <div class="carousel-item carousel-item-1 active"><!--The Carousel Slider-->
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                    <div class="col">
                    <aside class="card team1">
                        <img src="https://user-images.githubusercontent.com/78242022/283794670-008f009c-7a9c-41a0-a9bc-38826bfbe9f1.jpg" alt="">
                       <div class="caption">
                        <h2 class="name">Tim Spence</h2>
                        <p class="role">Head of Marketing</p>
                        <p class="work-at">Markson Inc</p>
                       </div>
                    </aside>
                    </div>
                    
                    <div class="col">
                    <aside class="card team2">
                        <img src="https://user-images.githubusercontent.com/78242022/283794663-5447181d-8621-4a1d-8b4f-15a10917be12.jpg" alt="">
                        <div class="caption">
                          <h2 class="name">Alan Shin</h2>
                        <p class="role">Co-Founder</p>
                        <p class="work-at">Duper Duper</p>
                        </div>
                       
                    </aside>
                    </div>
                    
                    <div class="col">
                    <aside class="col card team3 ">
                        <img src="https://user-images.githubusercontent.com/78242022/283794643-4cea087e-3214-4331-84f8-fde21a8f22db.jpg" alt="">
                        <div class="caption">
                        <h2 class="name">Laurel Peng</h2>
                        <p class="role">Head of Corporate</p>
                        <p class="work-at">Development, MCX</p>
                        </div>
                    </aside>
                    </div>
                </div>
              </div>


            
              <div class="carousel-item carousel-item-2">
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                    <div class="col">
                    <aside class="card team4">
                        <img src="https://user-images.githubusercontent.com/78242022/283794606-8b10b1c2-16e0-431d-88ca-3d6c9fca4839.jpg" alt="">
                        <div class="caption">
                          <h2 class="name">Alex Kovosksky</h2>
                          <p class="role">Overseas Sales</p>
                          <p class="work-at">Newness Golf</p>
                        </div>
                      </aside>
                    </div>

                    <div class="col">
                      <aside class="card team5">
                          <img src="https://user-images.githubusercontent.com/78242022/283794595-9f1358ea-5af5-4b69-8295-bde8961fed84.jpg" alt="">
                          <div class="caption">
                            <h2 class="name">JoJo Kinis</h2>
                            <p class="role">DevOps Engineer</p>
                            <p class="work-at">Ylyeer</p>
                          </div>
                        </aside>
                    </div>
      
                    <div class="col">
                        <aside class="card team6">
                          <img src="https://user-images.githubusercontent.com/78242022/283794700-f2f6cadc-0652-4f82-a77a-5bd8286fec42.jpg" alt="">
                          <div class="caption">
                            <h2 class="name">Violet Dynk</h2>
                            <p class="role">Content Writer</p>
                            <p class="work-at">GreenShock</p>
                          </div>
                        </aside>
                </div>
              </div>
            </div>
          </div>

          <div class="control-btn">
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
              <i class="fa-solid fa-arrow-right"></i>

              <span class="carousel-control-next-icon visually-hidden" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>

            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
              <span class="carousel-control-prev-icon visually-hidden" aria-hidden="true"></span>
              <i class="fa-solid fa-arrow-left"></i>
              <span class="visually-hidden">Previous</span>
            </button>
        </div>

      </section>
    
  </main>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
  </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<head>

<title>Bootstrap demo</title>

</head>

<main>

</section>

</div>

<h2 class="name">Tim Spence</h2>

<p class="role">Head of Marketing</p>

<p class="work-at">Markson Inc</p>

</div>

</aside>

</div>

<p class="role">Co-Founder</p>

<p class="work-at">Duper Duper</p>

</div>

</aside>

</div>

<h2 class="name">Laurel Peng</h2>

<p class="role">Head of Corporate</p>

<p class="work-at">Development, MCX</p>

</div>

</aside>

</div>

<h2 class="name">Alex Kovosksky</h2>

<p class="role">Overseas Sales</p>

<p class="work-at">Newness Golf</p>

</div>

</aside>

</div>

<h2 class="name">JoJo Kinis</h2>

<p class="role">DevOps Engineer</p>

<p class="work-at">Ylyeer</p>

</div>

</aside>

</div>

<h2 class="name">Violet Dynk</h2>

<p class="role">Content Writer</p>

<p class="work-at">GreenShock</p>

</div>

</aside>

</div>

</button>

<span class="visually-hidden">Previous</span>

</button>

</div>

</section>

</main>

</body>

</html>

CSS:

*,*::after, *::before {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
          background-color: rgb(241 245 249);
        }

        main {
          width: 100vw;
          height: 100vh;
          flex-direction: row;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
        }

        #carouselExampleCaptions {
          width: 80vw;
          height: 100%;

          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .carousel-inner {
            width: 100%;
        }

        .card {
            width: 100%;
            height: 400px;
            border-radius: 10px;
            border: none;
            transition: filter 0.5s ease;
            background: none;
        }

        .card img {
            width: 100%;
            height: 16em;
            object-fit: cover;
            object-position: 0% 20%;
            border-radius: inherit;
        }

        .card .name {
            font-size: 1.5em;
            font-weight: 500;
            text-transform: uppercase;
            margin-top: 10px;
        }

        .card .role {
            font-size: 1.2em;
            margin: 0;
        }

        .card .work-at {
            font-size: 1em;
        }

        /* Controls */

        i.fa-arrow-right,
       i.fa-arrow-left {
          background: none;
          border: 2px solid rgb(110, 6, 110);
          color: rgb(110, 6, 110);
          padding: 10px;
          border-radius: 100%;
          transition: background .6s ease;
        }

        i.fa-arrow-right:hover,
       i.fa-arrow-left:hover {
          background: rgb(110, 6, 110);
          color: white;
        }

        .carousel-control-next {
            margin: 0 3em;
        }

        .control-btn {
            position: absolute;
            top: -1em;
            right: 5em;
        }

        .control-btn i.fa-arrow-left {
            position: absolute;
            right: 6em;
        } 


        /* Indicators */

        .carousel-indicators [data-bs-target] {
          width: 10px;
          height: 10px;
          border-radius: 100%;
          border: 2px solid  rgb(110, 6, 110);
        }

        .carousel-indicators .active {
            opacity: 1;
            background-color: rgb(110, 6, 110)
        }

      @media screen and (max-width: 900px){
        #carouselExampleCaptions {
          width: 70vw;
          height: 70vw;
        }

        .card img {
            width: 100%;
            height: 10em;
        }

        .card .name {
          margin-top: 1em;
            font-size: 1em;
            font-weight: 700;
        }

        .card .role {
            font-size: 0.8em;
        }

        .card .work-at {
            font-size: 0.6em;
        }
        }

        @media screen and (max-width: 576px) {
        .carousel-item .card .caption {
              position: absolute;
              top: 20px;
              left: 10px;
              background-color: rgba(255, 255, 255, 0.9);
              border-radius: 10px;
              padding: 10px;
        }
      }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

*,*::after, *::before {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

background-color: rgb(241 245 249);

}

main {

width: 100vw;

height: 100vh;

flex-direction: row;

display: flex;

justify-content: center;

align-items: center;

position: relative;

}

#carouselExampleCaptions {

width: 80vw;

height: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.carousel-inner {

width: 100%;

}

.card {

width: 100%;

height: 400px;

border-radius: 10px;

border: none;

transition: filter 0.5s ease;

background: none;

}

.card img {

width: 100%;

height: 16em;

object-fit: cover;

object-position: 0% 20%;

border-radius: inherit;

}

.card .name {

font-size: 1.5em;

font-weight: 500;

text-transform: uppercase;

margin-top: 10px;

}

.card .role {

font-size: 1.2em;

margin: 0;

}

.card .work-at {

font-size: 1em;

}

/* Controls */

i.fa-arrow-right,

i.fa-arrow-left {

background: none;

border: 2px solid rgb(110, 6, 110);

color: rgb(110, 6, 110);

padding: 10px;

border-radius: 100%;

transition: background .6s ease;

}

i.fa-arrow-right:hover,

i.fa-arrow-left:hover {

background: rgb(110, 6, 110);

color: white;

}

.carousel-control-next {

margin: 0 3em;

}

.control-btn {

position: absolute;

top: -1em;

right: 5em;

}

.control-btn i.fa-arrow-left {

position: absolute;

right: 6em;

}

/* Indicators */

.carousel-indicators [data-bs-target] {

width: 10px;

height: 10px;

border-radius: 100%;

border: 2px solid rgb(110, 6, 110);

}

.carousel-indicators .active {

opacity: 1;

background-color: rgb(110, 6, 110)

}

@media screen and (max-width: 900px){

#carouselExampleCaptions {

width: 70vw;

height: 70vw;

}

.card img {

width: 100%;

height: 10em;

}

.card .name {

margin-top: 1em;

font-size: 1em;

font-weight: 700;

}

.card .role {

font-size: 0.8em;

}

.card .work-at {

font-size: 0.6em;

}

@media screen and (max-width: 576px) {

.carousel-item .card .caption {

position: absolute;

top: 20px;

left: 10px;

background-color: rgba(255, 255, 255, 0.9);

border-radius: 10px;

padding: 10px;

}

See the Pen
Bootstrap Multi-Columns Carousel Teams by Ocxigin (@ocxigin)
on CodePen.

Side Nav Testimonial Carousel

Testimonials are a great way to showcase product reviews from existing users. This helps to instill confidence and trust in new users. With a side nav carousel, we can display users testimonials alongside a product caption. This latest Bootstrap carousel example will help users get a feel of what the products are about and at the same time read testimonials from existing users.

We use Bootstrap 5 to create a side nav carousel that displays the product caption and testimonial from existing users, as shown from the screenshot above.

HTML:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
<body>
    <main>
        <!-- <section class="testimonial-hero"> -->
<div class="container-xxl py-5">
    <div class="container py-5">
        <div class="testimonial-text g-5">
            <div class="wow fadeIn" data-wow-delay="0.1s">
                <button class="btn btn-sm border rounded-pill text-primary px-3 mb-3">Testimonial</button>
                <h1 class="mb-4">LambdaTest Reviews</h1>
                    <p class="mb-4">Our Unified Testing Cloud enables you to deliver world class digital experience with quality releases and help accelerate your release velocity.</p>
                    <a class="btn btn-primary rounded-pill px-4" href="https://www.lambdatest.com/reviews">Contact Sales</a>
            </div>
        <!-- </section>End of Testimonial Here -->

      <section class="carousel-landmark wow fadeIn" data-wow-delay="0.5s">
        <div id="carouselExampleCaptions" class="carousel slide testimonial-carousel border-start border-primary">
          <!-- <section>
            <div class="control-bar"></div>
        </section> -->
            <div class="carousel-indicators">
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner"><!--The Carousel Container-->
              <div class="carousel-item carousel-item-1 active"><!--The Carousel item 1-->
                        <div class="testimonial-item ps-5">
                            <i class="fa fa-quote-left fa-2x text-primary mb-3"></i>
                            <p class="fs-4 textimal-text">Super top notch customer support from <em>@lambdatesting</em> - just throwing it out there if you're looking for a decent browser testing platform, they get my full double thumbs up. Thumbs upThumbs up</p>
                            <div class="d-flex align-items-center">
                                <img class="img-fluid flex-shrink-0 rounded-circle" src="https://user-images.githubusercontent.com/78242022/266013790-4d674d96-a311-47c3-9b7c-03feaa36c948.png"
                                    style="width: 60px; height: 60px;">
                                <div class="ps-3">
                                    <h5 class="mb-1">Ben Pritchard</h5>
                                    <span class="at">@yesiamben</span>
                                </div>
                            </div>
                        </div>
                    </div>

            <!-- Carousel Item 2 -->
            <div class="carousel-item carousel-item-2">
                        <div class="testimonial-item ps-5">
                            <i class="fa fa-quote-left fa-2x text-primary mb-3"></i>
                            <p class="fs-4 textimal-text"><em>@lambdatesting</em> is fantastic. Cross browser and device testingtesting frustration is minimized. You can't get rid of clients that need ie11 nor can you own every device but lambda test bridge that gap.</p>
                            <div class="d-flex align-items-center">
                                <img class="img-fluid flex-shrink-0 rounded-circle" src="https://user-images.githubusercontent.com/78242022/266013776-40ac50f1-31f8-4250-acb2-05f16d683baa.png"
                                    style="width: 60px; height: 60px;">
                                <div class="ps-3">
                                    <h5 class="mb-1">Mat Gargano</h5>
                                    <span class="at">@matgargano</span>
                                </div>
                            </div>
                        </div><!--[end of card]-->
                    </div> <!--[carousel-item-2]-->

            <!-- Carousel Item 3 -->
            <div class="carousel-item carousel-item-2">
                    <div class="testimonial-item ps-5">
                        <i class="fa fa-quote-left fa-2x text-primary mb-3"></i>
                        <p class="fs-4 textimal-text">second-day using <em>@lambdatesting</em> and it's already proven itself a lot faster than Cross Browser Testing and BrowserStack, at half the price! bargain</p>
                        <div class="d-flex align-items-center">
                            <img class="img-fluid flex-shrink-0 rounded-circle" src="https://user-images.githubusercontent.com/78242022/266013762-54201d6a-0923-4969-948c-790dec804253.png"
                                style="width: 60px; height: 60px;">
                            <div class="ps-3">
                                <h5 class="mb-1">Matthew Bryson</h5>
                                <span class="at">@mbrysonuk</span>
                            </div>
                        </div>
                    </div><!--[end of card]-->
                </div>
                
                <!-- Control Buttons -->
                <div class="control-btn">
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                      <i class="fa-solid fa-arrow-left"></i>
                      <span class="carousel-control-prev-icon visually-hidden" aria-hidden="true"></span>
                      <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                      <i class="fa-solid fa-arrow-right"></i>
                
                      <span class="carousel-control-next-icon visually-hidden" aria-hidden="true"></span>
                      <span class="visually-hidden">Next</span>
                    </button>
                </div><!--[carousel-item-3]-->
            </div><!--[End of Container]-->

        </div>
    </section><!--End of Carousel Landmark-->
</div><!--End of row g-5-->
</div><!-- container py-5 -->
</div><!--End of Container-xxl py-5 -->
</main>
  </body>
</html>

100

101

102

<head>

<title>Bootstrap demo</title>

</head>

<body>

<main>

<button class="btn btn-sm border rounded-pill text-primary px-3 mb-3">Testimonial</button>

<h1 class="mb-4">LambdaTest Reviews</h1>

<p class="mb-4">Our Unified Testing Cloud enables you to deliver world class digital experience with quality releases and help accelerate your release velocity.</p>

<a class="btn btn-primary rounded-pill px-4" href="https://www.lambdatest.com/reviews">Contact Sales</a>

</div>

<!-- <section>

</section> -->

</div>

<p class="fs-4 textimal-text">Super top notch customer support from <em>@lambdatesting</em> - just throwing it out there if you're looking for a decent browser testing platform, they get my full double thumbs up. Thumbs upThumbs up</p>

<img class="img-fluid flex-shrink-0 rounded-circle" src="https://user-images.githubusercontent.com/78242022/266013790-4d674d96-a311-47c3-9b7c-03feaa36c948.png"

style="width: 60px; height: 60px;">

<h5 class="mb-1">Ben Pritchard</h5>

<span class="at">@yesiamben</span>

</div>

<p class="fs-4 textimal-text"><em>@lambdatesting</em> is fantastic. Cross browser and device testingtesting frustration is minimized. You can't get rid of clients that need ie11 nor can you own every device but lambda test bridge that gap.</p>

&nbs