How to create a grid in bootstrap with boxes of multiple columns and rows?

Question

I have difficulty in setting up a grid in bootstrap that does not seem to be able to be dissected into smaller squares. Check the image for the desired grid:bootstrap-based grid

Answer 1

Without tiresome workarounds that essentially negate the benefits that the bootstrap grid offers, this cannot be done. The main purpose of the bootstrap grid is to be flexible (changing the content layout depending on the screen size). For this reason, there was no reason to implement the functionality you've described. Imagine trying to organize the data in the attached image to display differently on different sized devices - it would be near impossible.

However, using FlexBox, more specific grid-like layouts can be accomplished. I don't see the layout you've described being a problem using FlexBox. But I should warn you that while FlexBox is becoming more popular, it is still not fully supported across all platforms. As you can see here: http://caniuse.com/#feat=flexbox, it is technically supported on most major browsers, but you will quickly notice behavioral differences across them. Thus, implementing FlexBox to work the same across all modern browsers at this time can be a bit of a hassle (especially for people new to the layout) but it certainly is not impossible. For more info on FlexBox, see https://css-tricks.com/snippets/css/a-guide-to-flexbox/.