I'm currently utilizing Bootstrap 4 and have created a multiple item carousel as shown in the image below: https://i.sstatic.net/NbO7u.png
While the carousel is functioning properly, I'm facing the issue of not being able to add spacing between each column or item. Additionally, I do not want half of the fifth column to be visible. I've tried applying padding classes to the columns and carousel items, but it hasn't resolved my problem. Also, when I add padding to the carousel, there is no padding added from the left side.
Below is the code I'm using:
HTML:
<div class="col-12">
<div id="populars" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100 p-5" role="listbox">
<div class="carousel-item active bg-danger mx-2">
<div class="col-lg-3 col-md-6 card p-1 " style="line-height:1.2;">
<img class="img-fluid card-img-top" src="a.jpg">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-3 col-md-6 card p-1 " style="line-height:1.2;">
<img class="img-fluid card-img-top" src="a.jpg">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-3 col-md-6 card p-1 " style="line-height:1.2;">
<img class="img-fluid card-img-top" src="a.jpg">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-3 col-md-6 card p-1" style="line-height:1.2;">
<img class="img-fluid card-img-top" src="a.jpg">
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#populars" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon bg-dark" aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#populars" role="button"
data-slide="next">
<span class="carousel-control-next-icon bg-dark" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="btn btn-danger p-3 p-md-4 mx-auto mt-5 rounded-0">
show menu
</div>
</div>
</div>
CSS:
@media (min-width: 320px) {
#populars .carousel-inner .carousel-item-right.active,
#populars .carousel-inner .carousel-item-next {
transform: translateX(100%);
}
#populars .carousel-inner .carousel-item-left.active,
#populars .carousel-inner .carousel-item-prev {*
transform: translateX(-100%);
}
}
/* medium - display 2 */
@media (min-width: 768px) {
#populars .carousel-inner .carousel-item-right.active,
#populars .carousel-inner .carousel-item-next {
transform: translateX(50%);
}
#populars .carousel-inner .carousel-item-left.active,
#populars .carousel-inner .carousel-item-prev {
transform: translateX(-50%);
}
}
/* large - display 3 */
@media (min-width: 992px) {
#populars .carousel-inner .carousel-item-next {
transform: translateX(25%);
}
#populars .carousel-inner .carousel-item-left.active,
#populars .carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
@media (max-width: 768px) {
#populars .carousel-inner .carousel-item>div {
display: none;
}
#populars .carousel-inner .carousel-item>div:first-child {
display: block;
}
}
#populars .carousel-inner .carousel-item.active,
#populars .carousel-inner .carousel-item-next,
#populars .carousel-inner .carousel-item-prev {
display: flex;
}
#populars .carousel-inner .carousel-item-right,
#populars .carousel-inner .carousel-item-left {
transform: translateX(0);
}
Thank you in advance for any assistance you can provide.