CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jl7897
jl7897

Reputation: 25

Align pictures horizontally

I can't figure out how to get my pictures horizontal. I am using bootstrap and emmet. I have tried floats and display. Here's my code:

          <div class="container">
            <div class="row">
                <div class="bottombanner">
                    <col-sm-3><img class="img-thumbnail" src="https://www.worldmapsonline.com/images/murals/mercator_classic_world_political_wall_mural_lg.jpg" alt=""></col-sm-3>
                    <col-sm-3><img class="img-thumbnail" src="https://i.gocollette.com/img/destination-page/europe/europe-continent/europe-ms2.jpg?h=720&w=1280&la=en" alt=""></col-sm-3>
                    <col-sm-3><img src="" alt=""></col-sm-3>
                    <col-sm-3><img src="" alt=""></col-sm-3>
                </div>
            </div>
          </div>

And then here is my CSS:

.bottombanner {
max-width: 20%;
max-height: auto;
display: inline-block;
float: left;
}

I have tried it with both and one or the other for float and display but to no avail.

I have also tried with and without the div container just to see. I also tried using the bootstrap img-responsive, but it didn't seem to have an effect, I took it off because I think I remember that img-responsive auto-centers?

Upvotes: 0

Views: 52

Answers (2)

JPil
JPil

Reputation: 301

Try this

<div class="container">
    <div class="row">
        <div class="bottombanner">
            <div class="col-sm-3"><img class="img-thumbnail" src="https://www.worldmapsonline.com/images/murals/mercator_classic_world_political_wall_mural_lg.jpg" alt=""></div>
            <div class="col-sm-3"><img class="img-thumbnail" src="https://i.gocollette.com/img/destination-page/europe/europe-continent/europe-ms2.jpg?h=720&w=1280&la=en" alt=""></div>
            <div class="col-sm-3"><img src="" alt=""></div>
            <div class="col-sm-3"><img src="" alt=""></div>
        </div>
    </div>
</div>

Use col-sm-3 as a class. And since you set width as 20% in bottombanner, your images will be very small in size.

Upvotes: 1

larv
larv

Reputation: 938

What is the <col-sm-3> is it a div or what?

One easy way could be to horizontal align your images is to emulate table display property.

.bottombanner {
    display: table;
}

.col-sm-3 {
    display: table-cell;
    vertical-align: middle;
}

this should get your images horizontal aligned to each other.

Upvotes: 1

Related Questions