Bootstrap cards/thumbnails not lining up side by side correctly in the grid system & card deck
I'm having a problem with getting Boostrap's thumbnails & cards to line up side by side in their grid system. Basically, this is an assignment & I have to follow certain parameters:
-must use Bootstrap grid system sm-size columns
-these squares of content (thumbnails or cards) must stack up equally vertically in a mobile screen and equally as 3 squares side by side for larger screen
-everything must be fluid & responsive
-and must match up a mock-up picture I was given
At first, I tried just using cards but they didn't have an outline like the way my mock-up picture is; then I tried using just thumbnails but they didn't stack vertically the way I needed them to. Now, using cards & thumbnails, I get them looking more the way I want visually & they stack correctly horizontally for smaller screens but they are Not stacking side-by-side when I make the screen larger...
I still have a Long way to go to finishing this assignment, I still really have to create a ton of CSS but I feel like first I need to fix this integral layout problem/why these aren't stacking correctly as a responsive unit.