i'm trying to convert this row of images...

Convert that into a little carousel for visualization in small devices (Responsive Desing) i'm using bootstrap, the code of that images is here:

<div  style="background-image: url('assets/img/Vector_Chain1.png'); margin-left:0px; margin-right:0px;">
                    <img src="assets/img/TheEye.png"  alt="">
                    <img src="assets/img/ThePyramid.png"  alt="">
                    <img src="assets/img/TheEthernal.png"  alt="">
                </div>

I want when the device are small like a phone, this div convert itself into a carousel for a better visualization

CodePudding user response：

1. Add classes d-block and d-md-flex to your container

2. Create a new container for the carousel function on mobile.

Final html code:

<div  style="background-image: url('assets/img/Vector_Chain1.png'); margin-left:0px; margin-right:0px;">
  <img src="assets/img/TheEye.png"  alt="">
  <img src="assets/img/ThePyramid.png"  alt="">
  <img src="assets/img/TheEthernal.png"  alt="">
</div>

<div id="carouselExampleSlidesOnly"  data-ride="carousel">
  <div >
    <div >
      <img  src="assets/img/TheEye.png" alt="First slide">
    </div>
    <div >
      <img  src="assets/img/ThePyramid.png" alt="Second slide">
    </div>
    <div >
      <img  src="assets/img/ThePyramid.png" alt="Third slide">
    </div>
  </div>
</div>