Hello! I am hoping someone can help point me in the right direction. I am creating a data dashboard and I want the layout to look like this:
(The map, as well as all the charts, will be drawn using d3)
My question is: how do I create the correct grid layout in order to be able to have a map in the middle and 4 charts on either corner? I am using bootstrap’s container, row, col-xx-xx code. But I am not sure how to make it work in this case.
Thank you in advance.
using the position property might help u
center
top right
top left
etc
Do you have to use Bootstrap? I’d try CSS Grid if not.
Not exactly sure how you want the layout. Should the map top/bottom be flush with the graphs top/bottom? Also what happens when the screen is too small, how should it stack?
I don’t use Bootstrap so I’m really not the one to answer this but I think you might have to use 3 rows and just have the map in the center. You can, of course, use positioning and/or negative margins as well but that makes the layout more fragile.
