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
  • 8,811
  • 11
  • 76
  • 141
  • 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 – Carol Skelly 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` – Carol Skelly 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,976
  • 1
  • 15
  • 16