@import '~bootstrap/scss/bootstrap.scss'; @import '~bootstrap-icons/font/bootstrap-icons'; .carousel-inner .carousel-item.active, .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev { display: flex; justify-content: center; } @media (max-width: 767px) { .carousel-inner .carousel-item > div { display: none; // left: -50%; } .carousel-inner .carousel-item > div:first-child { display: block; // left: 50%; } } /* medium and up screens */ @media (min-width: 768px) { .carousel-inner .carousel-item-end.active, .carousel-inner .carousel-item-next { transform: translateX(25%); } .carousel-inner .carousel-item-start.active, .carousel-inner .carousel-item-prev { transform: translateX(-25%); } } .carousel-inner .carousel-item-end, .carousel-inner .carousel-item-start { transform: translateX(0); }