0

I have a group of images and I want to put them on the right in a block. It's what I tried:

   <div class="row" >
        <div class="float-right">
            <img src="1.png"/>
            <img src="2.jpg"/>
            <img src="3.jpg"/>
            <img src="4.png"/>
        </div>
    </div>

But the images are still all on the left. If I remove "row" or replace it with something like d-block they go to the right, however the division overlaps existing ones!!

Ahmad
  • 7,430
  • 9
  • 60
  • 105
  • What do you mean "the division overlaps existing ones" ? The Bootstrap `row` is *only* meant to contain columns (`col-*`), and since it's flexbox, float won't work. See: https://stackoverflow.com/questions/43146263/bootstrap-4-align-elements-right-inside-a-col-div/43146307#43146307 – Zim Oct 07 '19 at 16:15
  • @zim thanks, that's my answer! anyway, what else should use to have the row functionality wihout having col-*? – Ahmad Oct 07 '19 at 16:32
  • You can just use `d-flex` – Zim Oct 07 '19 at 16:35

1 Answers1

0

You need to use:

<div class="d-flex justify-content-end">...</div>

The d-flex class makes your wrapping div a flexbox layout, the images should be direct children of this div. The justify-content-end class makes all the images align to the right side of the row.

Bootstrap docs: https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

BugsArePeopleToo
  • 2,892
  • 1
  • 14
  • 16