Bootstrap cards not lining up

1

I am using a constructor function to create a series of graphs and so I would have expected all of them to look exactly the same (format-wise, not data-wise). But only 1 of my graphs has the correct dimensions. The rest are too wide.

If you look here, you can see that only the “Punjab” card has the correct dimensions. I want the other cards to match it: https://data-driven-pakistan-data-stories.netlify.com/

Code: https://github.com/SabahatPK/Data4Pakistan_SlopeGraphs

I tried invoking the other errant graphs with data from “Punjab” just to make sure it wasn’t some data-point that was pushing the boundaries of the card. But that did not change anything.

I assume this has something to do with CSS but I cannot tell what.

2

They all have different widths. Can’t you just give the .card class width: 100%.

Edit: BTW, you are also using different col classes on them.

1 Like
3

Thanks @lasjorg, I updated the .card width to be 75% and that gave me the format I wanted.

And thanks for catching the col discreprancy. Updated all to be "col-sm-*"