Reputation: 63
I'm trying to put 3 images in Bootstrap 4. The problem is that the images are displayed one above the other and i want them to be displayed side by side.
Thanks!
<div class="row">
<div class="col-sm-4">
<div class="placeBox">
<div class="imgBx">
<img src="images/japan.jpg" class="img-fluid">
</div>
</div>
<div class="content">
<h3>Castelul Himeji<br><span>Japonia</span></h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="placeBox">
<div class="imgBx">
<img src="images/japan.jpg" class="img-fluid">
</div>
</div>
<div class="content">
<h3>Castelul Himeji<br><span>Japonia</span></h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="placeBox">
<div class="imgBx">
<img src="images/japan.jpg" class="img-fluid">
</div>
</div>
<div class="content">
<h3>Castelul Himeji<br><span>Japonia</span></h3>
</div>
</div>
</div>
Upvotes: 0
Views: 927
Reputation: 314
Please try this
<div class="row">
<div class="col-sm-4">
<div class="placeBox">
<div class="imgBx">
<img src="images/japan.jpg" class="img-fluid">
</div>
</div>
<div class="content">
<h3>Castelul Himeji<br>
<span>Japonia</span></h3>
</div>
</div>
<div class="col-sm-4">
<div class="placeBox">
<div class="imgBx">
<img src="images/japan.jpg" class="img-fluid">
</div>
</div>
<div class="content">
<h3>Castelul Himeji<br>
<span>Japonia</span></h3>
</div>
</div>
<div class="col-sm-4">
<div class="placeBox">
<div class="imgBx">
<img src="images/japan.jpg" class="img-fluid">
</div>
</div>
<div class="content">
<h3>Castelul Himeji<br>
<span>Japonia</span></h3>
</div>
</div>
</div>
Upvotes: 2