CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sarah
Sarah

Reputation: 617

How to center multiple images using Bootstrap?

I'm using Bootstrap and trying to make 3 images to be centered. For example, red color boxes are how my images look like, and I want to make it look like blue color boxes: enter image description here

I tried getting rid of the margin and padding, but I still want some space between the images. Also I tried using { display: table; }, display: table-cell; vertical-align: middle; but somehow it does not do anything to my images... Is there a way to get images to the center with some padding to them in Bootstrap? Below is my code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

.row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.column {
    flex: 33.33%;
    padding: 50px;
    width: 100%;
}
<div class="album text-center">
        <div class="row">
            <div class="column">
                <img src="images/tour1.jpeg" alt="one" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour2.jpg" alt="two" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour3.jpeg" alt="three" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour1.jpeg" alt="one" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour2.jpg" alt="two" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour3.jpeg" alt="three" style="width:100%">
            </div>
        </div>
    </div>

Thank you!

Upvotes: 1

Views: 1070

Answers (2)

Talha Maqsood
Talha Maqsood

Reputation: 307

Just add this class "justify-content-around".

    <div class="album">
        <div class="row justify-content-around">
            <div class="column">
                <img src="images/tour1.jpeg" alt="one" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour2.jpg" alt="two" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour3.jpeg" alt="three" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour1.jpeg" alt="one" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour2.jpg" alt="two" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour3.jpeg" alt="three" style="width:100%">
            </div>
        </div>
    </div>

Upvotes: 1

zafer onay
zafer onay

Reputation: 1783

Bootstrap 4 has justify-content-around class which does the job. Consider to use narrower container If you want to obtain smaller gap between images.

PS: You should avoid using col class within image wrappers.

<div class="container">
  <div class="row justify-content-around">
    <div class="colx"><img src="https://place-hold.it/200x400" alt="" class="img-fluid"></div>
    <div class="colx"><img src="https://place-hold.it/200x400" alt="" class="img-fluid"></div>
    <div class="colx"><img src="https://place-hold.it/200x400" alt="" class="img-fluid"></div>
  </div>
</div>

JSFiddle

Upvotes: 2

Related Questions