Struggling with Box Layout

Bootstrap Studio Help
1

Hi,

I'm currently trying to make a layout for my page. I want my page to have 3 rows

  1. Has Bootstrap Cards in
  2. Has 4 images (2 pairs of images) and Captions below each image
  3. Has Placeholder text will have a centred data table in it

There are multiple issues I am facing:

  1. I want the content to fit to the webpage
  2. The Images are paired. So i want them to wrap in pairs unless they are on a phone resolution then I am happy for them to wrap individually and have the caption above the first image of the pair
  3. I want to ensure the images scale appropriately and all maintain equal sizes

I'm a bit lost so any help would be much appreciated

****Things I have Tried**** -Using the blocks in BSS but this causes an issue where it does not fit to browser size

enter image description here

2

Why not just add a row with 2 columns and put your images in the columns ? You can adjust your columns to be col-md-6 for example if you want them to be side by side on larger devices.

3

Hi @twinstream

So you mean have one column for 2 images?

4

Add a row and then put two columns in the row. Add each image and heading to its own column.

5

You should try justify-content to flex-around.