Display img in row bootstrap table

Question

I would like to display two images next to each other inside a bootstrap table, any ideas?

Heres the code,

   <tr>
       <th scope="row">7</th>
       <td></td>
       <td>
            <img class="img" src="example.jpg" alt="">
            <img class="img" src="example.jpg" alt="">
        </td>
   </tr>

Answer 1

If you want to display images next to each others you can use divinstead of table, because it will be the best practice.

In Bootstrap, every row is divided into 12 columns. You can read this for your clarification about grid system of Bootstrap. You can use any combination to set your images.

6 + 6 = 12
4 + 4 + 4 = 12
3 + 3 + 3 + 3 = 12
-
-
etc

If we take 4 + 4 + 4 = 12 this combination for example. We will be able to set images in any two div. Code will be like this:

<div class="row">
   <div class="col-md-4">
       <img class="img" src="example.jpg" alt="">
   </div>

   <div class="col-md-4">
       <img class="img" src="example.jpg" alt="">
   </div>

   <div class="col-md-4">

   </div>

</div>

If you want to use table, then firstly read this article. Then code will be like the below:

<table>
   <th scope="row">7</th>
    <tr>
       <td>
          <img class="img" src="example.jpg" alt="">
       </td>
       <td>
          <img class="img" src="example.jpg" alt="">
       </td>
    </tr>
 </table>