Display img in row bootstrap table - css

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>

Answer 2

Hi you can try this simple code for responsive bootstrap table, let me know
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td><img src="image1.jpg"></td>
<td><img src="image2.jpg"></td>
</tr>
</tbody>
</table>
</div>

Answer 3

You can add the css
img{
display:inline-block;
}

Answer 4

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

Answer 5

Try this one out:
<tr>
<th scope="row">7</th>
<td></td>
<td>
<div class="d-flex flex-row flex-nowrap"> <!--div as flexbox with content in a row without wrap-->
<div class="img img-responsive"> <!--responsive img inside div-->
<img class="img img-fluid" src="example.jpg" alt="">
</div>
<div class="img img-responsive"> <!--responsive img inside div-->
<img class="img img-fluid" src="example.jpg" alt="">
</div>
</div>
</td>
</tr>