how to create differently responsive carousel using bootstrap

Question

So I wanted to create a slider with divisions inside a bootsrap carousel and did the following. However, how can i make it so that in screens below sm(of bootstrap), it becomes such that there are only two divisions in one carousel and a carousel slider is added making three sliders with two divisions each. For this example, say that the first slider will only have hello, and hello1, second slider hello2, hello3 and a new slider is added which contains hello4 and hello5.

Please do tell me how do do this using bootstrap or javascript or jquery.

For better reference, this is the example: https://www.franckmuller.com/#home-news

Thanks a lot !!

 .box{ min-height: 300px; display: flex; justify-content: center; align-items: center; } .r{ background-color: red; } .g{ background-color: gray; } .b{ background-color: blue; }

 <!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.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> </head> <body> <div class="container"> <div id="carouselExampleControls" class="carousel slide carousel-dark" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row"> <div class="col-md-4 col-sm-4 box r">Hello</div> <div class="col-md-4 col-sm-4 box g">Hello1</div> <div class="col-md-4 col-sm-4 box b">Hello2</div> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-md-4 col-sm-4 box r">Hello3</div> <div class="col-md-4 col-sm-4 box g">Hello4</div> <div class="col-md-4 col-sm-4 box b">Hello5</div> </div> </div> </div> <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> <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> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> </body> </html>

Answer 1

 .box { min-height: 300px; display: flex; justify-content: center; align-items: center; } .r { background-color: red; } .g { background-color: gray; } .b { background-color: blue; }

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container mt-2"> <div id="carouselExampleControls" class="carousel slide carousel-dark" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="col-md-12 col-sm-12"> <div class="row row-cols-sm-2"> <div class="col pe-1 box r">Slide 1</div> <div class="col box g">Slide 2</div> </div> </div> </div> <div class="carousel-item"> <div class="col-lg-12 col-md-12 col-sm-12"> <div class="row row-cols-sm-2"> <div class="col box r">Slide 3</div> <div class="col box g">Slide 4</div> </div> </div> </div> </div> <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> <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>

how to create differently responsive carousel using bootstrap

Question

1 answers

solution1
0 2022-07-06 08:17:48

how to create differently responsive carousel using bootstrap

Question

1 answers

solution1 0 2022-07-06 08:17:48

solution1
0 2022-07-06 08:17:48