Bootstrap 5 Slider by Nitin Kumar Output View Horizontal Vertical HTML CSS JS Tidy <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h2 class="heading-section mb-5 pb-md-4">Bootstrap 5 Slider</h2> </div> </div> <div class="row justify-content-center"> <div class="col"> <div id="carouselExample" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-item active"> <div style="background: url(https://cdn.pixabay.com/photo/2014/03/22/17/00/the-background-292720_1280.png) no-repeat; background-size: cover; border-radius: 0.5rem; background-position: center"> <div class="slider_content col-xxl-5 col-md-7 py-14 px-8 text-xs-center"> <span class="badge text-bg-warning">Opening Sale Discount 50%</span> <h2 class="text-dark display-5 fw-bold mt-4">SuperMarket For Fresh Grocery</h2> <p class="lead">Introduced a new model for online grocery shopping and convenient home delivery.</p> <a href="#!" class="btn btn-dark mt-3"> Shop Now <i class="feather-icon icon-arrow-right ms-1"></i> </a> </div> </div> </div> <div class="carousel-item"> <div style="background: url(https://cdn.pixabay.com/photo/2013/07/13/12/08/background-159244_1280.png) no-repeat; background-size: cover; border-radius: 0.5rem; background-position: center"> <div class="slider_content col-xxl-5 col-md-7 py-14 px-8 text-xs-center"> <span class="badge text-bg-warning">Opening Sale Discount 50%</span> <h2 class="text-dark display-5 fw-bold mt-4">SuperMarket For Fresh Grocery</h2> <p class="lead">Introduced a new model for online grocery shopping and convenient home delivery.</p> <a href="#!" class="btn btn-dark mt-3"> Shop Now <i class="feather-icon icon-arrow-right ms-1"></i> </a> </div> </div> </div> <div class="carousel-item "> <div style="background: url(https://cdn.pixabay.com/photo/2017/12/05/11/13/christmas-background-2999091_1280.png) no-repeat; background-size: cover; border-radius: 0.5rem; background-position: center"> <div class="slider_content col-xxl-5 col-md-7 py-14 px-8 text-xs-center"> <span class="badge text-bg-warning">Opening Sale Discount 50%</span> <h2 class="text-dark display-5 fw-bold mt-4">SuperMarket For Fresh Grocery</h2> <p class="lead">Introduced a new model for online grocery shopping and convenient home delivery.</p> <a href="#!" class="btn btn-dark mt-3"> Shop Now <i class="feather-icon icon-arrow-right ms-1"></i> </a> </div> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> </div> </div> </div> HTML CSS JS Tidy .slider_content{ padding:40px } HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Bootstrap 5 Slider component. Catagory Bootstrap Tags Font Awesome 5 Hero Section Slider Resource Add External Stylesheets and Script <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" /> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> </script>
