Layering images with Bootstrap - html

Question

I'm attempting to create the following (mockup) with Bootstrap
https://i.stack.imgur.com/vkgBu.jpg
The idea is that each of those squares is an image and I'll have Javascript control when they appear/disappear when the background image is clicked. What I'm having trouble with is getting the little squares to stack on top like I have it. I've done research here, tried a bunch of things on my own, but get close but no cigar.
This is the closest I've come (testing with 1 row first).
https://i.stack.imgur.com/mqTc1.jpg
The squares line up next to eachother pretty well however they aren't showing within the same grid column/row correctly.
Relevant HTML:
<div class="container-fluid">
<div class="row-centered">
<div class="row row-centered">
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img" onclick="StockCount();" />
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
</div>
</div>
<div class="row row-centered">
<div class="col- col-centered">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
</div>
</div>
CSS:
.character-img{
position: relative;
z-index: 10;
}
.stock-img{
position: relative;
z-index: 20;
}
EDIT:
Updated version yields slightly better results? Included adding the blue boxes to the second row.
HTML
<div class="container-fluid">
<div class="row-centered">
<div class="row row-centered">
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img" onclick="StockCount();" />
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
</div>
</div>
<div class="row-centered">
<div class="row row-centered">
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img" onclick="StockCount();" />
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
</div>
</div>
</div>
CSS
.character-img{
position: relative;
z-index: 10;
}
.stock-img{
position: relative;
z-index: 20;
}
Result: https://imgur.com/vd3IZsP

Answer 1

Based on the images you've shown us to depict your desired outcome, I think Bootstrap is a smart choice. Much of what you want to do in your layout can be achieved using native classes. But it's also pretty apparent that you lack a fundamental understanding of the Bootstrap Framework, and I would strongly encourage you to revisit their documentation.
A full example of the structure you're trying to achieve can be viewed at: https://www.bootply.com/SwuSKmlKWe
But let's look at the HTML of a single 'box' item:
<div class="col-6 col-md-4 col-lg-3 mb-4">
<div class="h-100 bg-secondary p-4">
<img src="//placehold.it/200x200" class="rounded-circle img-fluid d-block mx-auto" />
<div class="row mt-4">
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
</div>
</div>
</div>
The first <div> element is a column wrapper that supplies information on the breakpoints that will affect the display. From left to right it is written with the smallest breakpoint (col-*) to the largest. If we were to translate this to something readable it might read:
At the smallest breakpoint use 6/12 columns. At the medium breakpoint
begin using 4/12 columns, and at the large breakpoint use 3/12
columns.
Note: col-sm-* exists but was not used here. Because a 'small' breakpoint was not used Bootstrap will default to the next smallest (in this case col-6
Inside the column wrapper we have another wrapper with several classes:
.h-100 helps us create equal-height items regardless of whether the
content dictates a smaller height.
.bg-secondary is a utility class that provides the dark background color
.p-4 is a utility class that provides padding on both the X and Y margins (4 indicates the 'level' of padding and can be as low as 0 and as high as 5)
At this point we start seeing the actual content. Your primary image has several classes that affect its shape and its position:
.rounded-circle is an image thumbnail class that forces a circular border radius.
.img-fluid is a responsive class that helps the image size up and down proportional to the element in which it resides.
.d-block transforms the img into a block-level element
.mx-auto sets the X margins to 'auto' which, in combination with d-block, centers the image.
From here we reach the 8 button/images referenced in your original post. The Bootstrap Grid is the perfect solution for this sort of organization, but since we're already working with content inside a Grid Element we need to create a new .row.
Inside the new .row we have a single breakpoint column (.col-3) with a couple of utility classes: text-center centers the content and mb-2 sets the bottom margin in a similar way that the p-* utility class alters padding.