"How to make bootstrap 5 slider"
Bootstrap 4.1.1 Snippet by nitesh575

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>How to make bootstrap 5 slider</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5"> <div class="row"> <div class="col-lg-12"> <h2>How to make Bootstrap 5 Carousel (slider) responshive design</h2> </div> </div> </div> <section class="mrnu-first mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> <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"> <div class="carousel-item active"> <img src="https://thethoughtoftheday.com/admin/uploads/featuredimage/1725098288_Devin-Strader.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Devin Strader: The Bachelorette Contestant and F1 Freight Consultants Owner</h5> <p><a href="https://thethoughtoftheday.com/celebrity/devin-strader-bachelorette-star-and-f1-freight-owner">Who is Devin Strader from The Bachelorette?</a></p> </div> </div> <div class="carousel-item"> <img src="https://thethoughtoftheday.com/admin/uploads/featuredimage/1725001308_Jenn-Tran1245.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Who is Devin Strader? Meet the Bachelorette Star and Houston Business Owner</h5> <p><a href="https://thethoughtoftheday.com/celebrity/devin-strader-bachelorette-star-and-f1-freight-owner">The Bachelorette Finale: Does Jenn Tran Choose Devin Strader or Marcus Shoberg?</a></p> </div> </div> <div class="carousel-item"> <img src="https://thethoughtoftheday.com/admin/uploads/featuredimage/1724998875_Jenn-Tran.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>The Bachelorette S21 Finale Spoilers</h5> <p><a href="https://thethoughtoftheday.com/celebrity/devin-strader-bachelorette-star-and-f1-freight-owner">The Bachelorette S21 Finale: Unexpected Ending and Engagement Twist</a></p> </div> </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> </div> </div> </div> </section> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script> </body> </html>
.carousel-control-next, .carousel-control-prev { opacity: 1; } .carousel-control-next-icon, .carousel-control-prev-icon { border-radius: 50%; } .carousel-caption a { color: #1853ff; font-size: 21px; text-decoration: none; } .carousel-caption { background: #fff; color: #000; border-radius: 15px; }

Related: See More

Paper Kit 2 PRO
Client or Partners Logo Slider
Timely Login slider
tabbed macbook mockup slider

Questions / Comments: