0

Using Bootstrap 4 to display a series of images using row and col classes

<div class="container-fluid">
    <div class="row">
            <div class="col">
                <figure class="figure">
                    <a href="FixSongsReport00211_changesVarious Artists_Sounds of the Sixties 1960 Still Swinging.html">
                        <img src="../style/images/folder.jpg" class="figure-img" width="200" height="200">
                    </a>
                    <figcaption class="figure-caption">
                        Sounds of the Sixties 1960 Still Swinging
                    </figcaption>
                </figure>
            </div>
            <div class="col">
                <figure class="figure">
                    <a href="FixSongsReport00211_changesVarious Artists_Stage + Screen.html">
                        <img src="../style/images/folder.jpg" class="figure-img" width="200" height="200">
                    </a>
                    <figcaption class="figure-caption">
                        Stage + Screen
                    </figcaption>
                </figure>
            </div>
    </div>
</div>

My problem is that when we get to end of list so we have less images then could be fitted into last row they are spaced out to use the available space. If you see the screenshot I want the last two images to take the left hand of the screen rather than being spaced out.

How do I achieve that ?

enter image description here

Looks particulary bad when only have a couple of items

i.e

enter image description here

The answers suggesting grid worked for last line, but only if have multiple lines. I modifield the outer div to use grid by remving class and adding style style="display:grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 5px;".

This fixes the issue with the last row (1st image), however it has no effect when only has one row (2nd image), any ideas ?

The flexbox solutions seem to involve hardcoding various things, dont seem that they would work in the general case.

Paul Taylor
  • 13,411
  • 42
  • 184
  • 351
  • One row contains 12 columns, so using a _col-3_ should be resolved your problem – vincenzopalazzo Jul 02 '19 at 11:49
  • @vincenzopalazzo that would only work if users screen happens to accomodate 4 items, it could accomodate more or less. – Paul Taylor Jul 02 '19 at 11:55
  • @Paulie_D I modifield the outer div to use grid by remving class and adding style style="display:grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 5px;" . This fixes the issue with the last row (1st image), however it has no effect when only has one row (2nd image), any ideas ? – Paul Taylor Jul 02 '19 at 12:28
  • Not sure what you are asking. Sounds like **another question** but CSS-Grid and auto-fit/fill don't act in the same way as flexbox does. the alignment is often quite different. – Paulie_D Jul 02 '19 at 12:32
  • @Paulie_D you linked to this question - https://stackoverflow.com/questions/42176419/targeting-flex-items-on-the-last-or-specific-row and the main answer there suggests using grid, so I have tried to implement that. I would prefer to use pure Bootstrap but the links for flexbox solutions in that answer all seem to be hacks. – Paul Taylor Jul 02 '19 at 12:35
  • @Paulie_D so if yo think grid is a bad idea Im not clear what yo think is actually the correct answer – Paul Taylor Jul 02 '19 at 12:40
  • Bootstrap doesn't use CSS-Grid (yet) so without it....I'm afraid hacks are what you have. Grid will work but it's a matter of choice as to whether you chose to use it. – Paulie_D Jul 02 '19 at 12:40
  • Well the grid seems to work perfectly for Image1 as I have used it just not Image2 , can I amend it somehow to make it work for 2 – Paul Taylor Jul 02 '19 at 12:41

0 Answers0