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

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 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 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 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”.
Step 4: Finally add text in your div box which you want to play in the carousel with a class=”carousel-item”.
Example:
HTML
<!DOCTYPE html><html>    <head>        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"               rel="stylesheet" />        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">        </script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">        </script>        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">        </script>          <style>            h1 {                color: green;            }            *,            *::before,            *::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;            }        </style>    </head>    <body>        <h1>GeeksforGeeks</h1>          <div id="carouselExampleFade"              class="carousel slide carousel-fade"              data-ride="carousel">            <div class="carousel-inner">                <div class="carousel-item active">                    <h1>Hii GeeksforGeeks</h1>                </div>                <div class="carousel-item">                    <h1>Hello there</h1>                </div>                <div class="carousel-item">                    <h1>GFG</h1>                </div>            </div>            <a class="carousel-control-prev"                href="#carouselExampleFade"                role="button" data-slide="prev">                <span class="carousel-control-prev-icon"                       aria-hidden="true">                </span>                <span class="sr-only">Previous</span>            </a>            <a class="carousel-control-next"                href="#carouselExampleFade"                role="button" data-slide="next">                <span class="carousel-control-next-icon"                       aria-hidden="true">                 </span>                <span class="sr-only">Next</span>            </a>        </div>    </body></html>
Output :
Carousel
Bootstrap-Questions
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to set vertical alignment in Bootstrap ?
Tailwind CSS vs Bootstrap
How to toggle password visibility in forms using Bootstrap-icons ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?