CODEWITHSUNDEEP
bootstrap-4
user4274335
user4274335

Reputation: 71

How to align images in the middle right of a bootstrap column

I want to align 4 images to the horizontal right and the vertical middle in a bootstrap column using what I thought should work based on the documentation. Read the documentation but it doesn't seem to say what to do when you want a middle vertical alignment AND a right horizontal alignment. Thought text and images should be the same since they are both inline, but maybe not.

https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment https://getbootstrap.com/docs/4.0/utilities/vertical-align/

I also saw this, Trying to align an image to the right middle of a column in bootstrap

but it's not quite the same situation as mine as it involves floated text.

The text-right works, but align-middle does not so the images are at the top right, not the middle right. Even tried to add a height attribute to the column, but no good. Here's the code. The images classes only effect the image size and give them a right margin of 2px, so they are not effecting it.

<div class="col-12 col-sm-3 align-middle text-right" style="height:200px">
  <img src="images/twitter.png" class="socialImg marginSocial" />
  <img src="images/twitter.png" class="socialImg marginSocial" />
  <img src="images/twitter.png" class="socialImg marginSocial" />
  <img src="images/twitter.png" class="socialImg marginSocial" />
</div>

I even tried to apply align-middle to each of the images, but it didn't work.

Upvotes: 1

Views: 1292

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

The easiest way is to use flexbox alignment utilities. There are many other Q&A on the Bootstrap alignment topic.

<div class="container py-2">
    <div class="row">
        <div class="col-12 col-sm-3 d-flex align-items-center justify-content-end" style="height:200px">
            <img src="//placehold.it/30" class="socialImg marginSocial" />
            <img src="//placehold.it/30" class="socialImg marginSocial" />
            <img src="//placehold.it/30" class="socialImg marginSocial" />
            <img src="//placehold.it/30" class="socialImg marginSocial" />
        </div>
    </div>
</div>

https://codeply.com/p/UXNRJ1oaTp

Upvotes: 2

Related Questions