Responsive grid in webdesign

I am a student, currently, I am learning UI and UX designer without coding background, My in doubt responsive grid Layout I use adobe xd to design a webpage (artboard 1366x766) I use default layout 12 Colum, gutter width 16, a colum with 76 margins 139 when I show my design to developer friends they told use bootstrap grid for responsive to make the responsive design for mobile-friendly. I ask them Colum size, colum width, gutter width and margin size (left and right margins size like in android), they told me to refer internet. I read may article many of the use of different numbers and size, it makes me confuse.

can any know please tell me...

Explain to me the following doubts

1.I have a static showcase website (How to pick grid for this site)? i need Colum size, colum width, gutter width and margin size

2.how to set a Layout grid for an e-commerce website? Colum size, colum width, gutter width and margin size

3 how to set a bootstrap grid for the website in xd?