CODEWITHSUNDEEP
bootstrap-4
Elys
Elys

Reputation: 63

Bootstrap 4 responsive images side by side same height

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

Answers (1)

Shoaib
Shoaib

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

Related Questions