Bootstrap Grid in Vue doesnt turn out right

1

I am working on this Vuejs exercise using Bootstrap but it turned out like this when I use grid. It works fine on CodePen, so I suppose this is due to me misplaced some tags. I have added row class inside outer div but it didnt work. It supposed to have 3 cols/row on medium size devices and 2 on small size devices :frowning: but instead, it has only 1 col a row and the width of each is strange. It looks like a col with a width of col-1 :frowning:

Everything inside card div is from Bootstrap’s doc.

image
image292×742 9.97 KB

Inspect:
image
image764×485 15.2 KB

Sorry for the inconvenience of those screenshots but I think it may give a overview to my problem. Any helps would be appreciated. Thanks in advance!

2

Hello @trannguyen61 I’m not 100% sure, but I think that you are having this behavior because you forget add the class “row” in the div that contains your “cards”, this is because you declared a col with the 100% of the width “row” and never tell CSS that you want a new row right below the “H2”.

Try to add the class ‘row’ to that div.

3

Thanks so much for your help! I really did forget .row and .container xD I added them in and it worked like a charm.