How can you align multiple figures vertically with bootstrap?-CodePudding

I have used the following code to align multiple images vertically in bootstrap:

<div >
    <div  id="anID">
      
        <img src="../../static/img1.jpg" width=15% alt="">
      
    
        <img src="../../static/mg2.jpg" width=15% alt="">
     
...
    </div>
  </div>

This is the result: Multiple pictures next to each other in a rounded container

I want to achieve the same thing but with figures. Using the same code doesn't work. It just makes them appear on top of each other. Like this

<div >
    <div  id="anotherID">
      
        <figure>
          <img src="../../static/img2.jpg" width=15% alt="">
          <figcaption>a caption</figcaption>
        </figure>
      
        <figure>
          <img src="../../static/img3.jpg" width=15% alt="">
          <figcaption>another caption</figcaption>
        </figure>
      
        ...
    </div>
  </div>

Can anyone help me fix this?

CodePudding user response：

Please try it with bootstrap

<div >
    <div  id="anotherID">
      
        <figure width=15%>
          <img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
          <figcaption>a caption</figcaption>
        </figure>
        <figure width=15%>
          <img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
          <figcaption>a caption</figcaption>
        </figure>
        <figure width=15%>
          <img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
          <figcaption>a caption</figcaption>
        </figure>
        <figure width=15%>
          <img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
          <figcaption>a caption</figcaption>
        </figure>
        <figure width=15%>
          <img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
          <figcaption>a caption</figcaption>
        </figure>
        <figure width=15%>
          <img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
          <figcaption>a caption</figcaption>
        </figure>
        <figure width=15%>
          <img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
          <figcaption>a caption</figcaption>
        </figure>
    </div>
  </div>

CodePudding user response：

Bootstrap has class d-flex that sets child elements next to each other. In other words it make element with class name d-flex a flex container and it's direct child to flex-items.

.d-flex{
 display:flex;
}

It has display:flex property in general.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
<div >
  <div  id="anotherID">
    <figure>
      <img src="https://i.stack.imgur.com/r2NFZ.png" width="30%"  alt="">
      <figcaption>a caption</figcaption>
    </figure>
    <figure>
      <img src="https://i.stack.imgur.com/r2NFZ.png" width="30%"   alt="">
      <figcaption>another caption</figcaption>
    </figure>
    <figure>
      <img src="https://i.stack.imgur.com/r2NFZ.png" width="30%"  alt="">
      <figcaption>another caption</figcaption>
    </figure>
    <figure>
      <img src="https://i.stack.imgur.com/r2NFZ.png" width="30%"  alt="">
      <figcaption>another caption</figcaption>
    </figure>
    <figure>
      <img src="https://i.stack.imgur.com/r2NFZ.png" width="30%" alt="">
      <figcaption>another caption</figcaption>
    </figure>
  </div>
</div>
<h1>Just for your reference I am showing below part how bootstrap works</h1>
<div >
  <div >
    <div >
      <figure>
        <img src="https://i.stack.imgur.com/r2NFZ.png"  alt="">
        <figcaption>a caption</figcaption>
      </figure>
    </div>
    <div >
      <figure>
        <img src="https://i.stack.imgur.com/r2NFZ.png"  alt="">
        <figcaption>a caption</figcaption>
      </figure>
    </div>
    <div >
      <figure>
        <img src="https://i.stack.imgur.com/r2NFZ.png"  alt="">
        <figcaption>a caption</figcaption>
      </figure>
    </div>
    <div >
      <figure>
        <img src="https://i.stack.imgur.com/r2NFZ.png"  alt="">
        <figcaption>a caption</figcaption>
      </figure>
    </div>
  </div>
</div>