I tried a lot in making this as responsive but I was not successful. Please suggest me how to make this carousel responsive? That is in Mobile only one image should display, in Laptop 3 images should display and in Desktop 4 images should display as in the below image.
Carousel displaying in desktop now
.col-sm-3 {
float: left;
padding: 5px 10px;
text-align: center;
}
.col-xs-12 {
float: left;
padding: 5px 10px;
text-align: center;
}
/* .carousel-indicators {
float: left;
display: flex;
} */
.all {
padding-top: 15px;
}
img {
border-radius: 50%;
padding: 5px 15px 5px 15px;
height: 145px;
width: 145px;
}
.carousel-caption {
color: black;
}
.jumbotron {
text-align: center;
color: green;
}
p {
font-weight: 700;
color: darkgreen;
background-color: transparent;
}<div class="container carousel-inner"><div class="carousel-item active"><div class="col-xs-12 col-sm-4 col-md-3"><img src="C:/Users/5023/Desktop/Products/blue.png"><div class="carousel-caption" style="color: black;"><h5>ABC</h5><p>My Paragraph</p></div></div> <div class="col-xs-12 col-sm-4 col-md-3"><img src="C:/Users/5023/Desktop/Products/sblue.jpg"><div class="carousel-caption" style="color: black;"><h5>BCD</h5><p>My Paragraph</p></div></div> <div class="col-xs-12 col-sm-4 col-md-3"><img src="C:/Users/5023/Desktop/Products/pink.jpg"><div class="carousel-caption" style="color: black;"><h5>CDE</h5><p>My Paragraph</p></div></div> <div class="col-xs-12 col-sm-4 col-md-3"><img src="C:/Users/5023/Desktop/Products/sblue.jpg"><div class="carousel-caption" style="color: black;"><h5>DEF</h5><p>My Paragraph</p></div></div> </div><div class="carousel-item"><div class="col-xs-12 col-sm-4 col-md-3"><img src="C:/Users/5023/Desktop/Products/green.jpg"><div class="carousel-caption" style="color: black;"><h5>EFG</h5><p>My Paragraph</p></div></div> <div class="col-xs-12 col-sm-4 col-md-3"><img src="C:/Users/5023/Desktop/Products/choco.jpg"><div class="carousel-caption" style="color: black;"><h5>FGH</h5><p>My Paragraph</p></div></div> <div class="col-xs-12 col-sm-4 col-md-3"><img src="C:/Users/5023/Desktop/Products/sblue.jpg"><div class="carousel-caption" style="color: black;"><h5>GHI</h5><p>My Paragraph</p></div></div> <div class="col-xs-12 col-sm-4 col-md-3"><img src="C:/Users/5023/Desktop/Products/sblue.jpg"><div class="carousel-caption" style="color: black;"><h5>HIJ</h5><p>My Paragraph</p></div></div> </div><div class="carousel-item"><div class="col-xs-12 col-sm-4 col-md-3"><img src="C:/Users/5023/Desktop/Products/blue.png"><div class="carousel-caption" style="color: black;"><h5>IJK</h5><p>My Paragraph</p></div></div> <div class="col-xs-12 col-sm-4 col-md-3"><img src="C:/Users/5023/Desktop/Products/pink.jpg"><div class="carousel-caption" style="color: black;"><h5>JKL</h5><p>My Paragraph</p></div></div> <div class="col-xs-12 col-sm-4 col-md-3"><img src="C:/Users/5023/Desktop/Products/sblue.jpg"><div class="carousel-caption" style="color: black;"><h5>KLM</h5><p>My Paragraph</p></div></div> <div class="col-xs-12 col-sm-4 col-md-3"><img src="C:/Users/5023/Desktop/Products/choco.jpg"><div class="carousel-caption" style="color: black;"><h5>LMN</h5><p>My Paragraph</p></div></div> </div></div>