1

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.

user4274335
  • 71
  • 6

1 Answers1

2

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Whaddy know. It works. I'll have to go back and review those parts of the documentation to figure out why. Thanks. Will mark it as the answer as soon as it lets me – user4274335 Sep 18 '20 at 14:27