Skip to content
Related Articles

Related Articles

How to fade in and fade out background with bootstrap text carousel ?

View Discussion
Improve Article
Save Article
  • Last Updated : 12 May, 2021

In this article, we will show you how to fade in and fade out the background with a bootstrap text carousel. Carousel is a slideshow, and it is used for cycling components like images or text.

Approach: To create a fade-in and fade-out background with a bootstrap text carousel we have followed some basic steps.

  • Step 1: Add bootstrap CDN to your HTML code.

  • Step 2:  For making a bootstrap carousel you have to add class = “carousel” in your HTML div box.

  • Step 3: To create the carousel fade in and fade out transition instead of a slider you have to add a class=”carousel-fade”.

  • Step 4: Finally add text in your div box which you want to play in the carousel with a class=”carousel-item”.



<!DOCTYPE html>
        <link href=
              rel="stylesheet" />
        <script src=
        <script src=
        <script src=
            h1 {
                color: green;
            *::after {
                margin: 0;
                padding: 0;
            html {
                box-sizing: border-box;
            body {
                box-sizing: inherit;
                color: #fff !important;
            h1 {
                margin-top: 0;
                text-align: center;
                font-weight: 600;
            .carousel {
                margin-top: 10%;
                width: 100%;
                background-color: black;
        <div id="carouselExampleFade" 
             class="carousel slide carousel-fade" 
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <h1>Hii GeeksforGeeks</h1>
                <div class="carousel-item">
                    <h1>Hello there</h1>
                <div class="carousel-item">
            <a class="carousel-control-prev" 
               role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" 
                <span class="sr-only">Previous</span>
            <a class="carousel-control-next" 
               role="button" data-slide="next">
                <span class="carousel-control-next-icon" 
                <span class="sr-only">Next</span>

Output :


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!