Using CSS Grid system and Bootstrap together?

In theory... yes, if you wanted to apply a Grid layout context to content that is inside a Bootstrap column, for instance, but you would have to keep the namespacing very clear, and also cancel out any inherited styles that may conflict with your context.

In practice... it's really not recommended, because then you need to keep track of two different grid systems, one of which is based on lots of CSS classes and layout hacks, and one that is purpose-built, cleaner and simpler, and potentially having to deal with all the inheritance issues from Bootstrap to your Grid context with "!important" hacks, etc.

There's a good tutorial at Mozilla about replacing Bootstrap layouts with Grid: https://hacks.mozilla.org/2017/04/replace-bootstrap-layouts-with-css-grid/

For controls and form fields, buttons, etc - in theory you could delve into Bootstrap styling files and extract what you like from them, and re-use them outside the Bootstrap context, but most of them are trivial to replicate with a few lines of CSS, so it might be easier to just copy some attributes using the Inspector in your dev tools, then write your own form elements system.

For collapsible UI elements, you don't really need Bootstrap per se, but jQuery UI or similar libraries (for speed of getting something working) or a working knowledge of JS and CSS (if you want to define your own).

Yes. You can use/download/import only the source (s)css files you want from Bootstrap. Their source sass files are especially modular, and the recommended method for extracting only what you want.

This applies to Bootstrap 4, but the concept is similar for Bootstrap 3:

If using sass, they have a guide for theming that explains how to get the parts you want.

If using plain css, the styles you mentioned can be found within their reboot css. Combine that with their js file(s) as needed. Note that there's less official guidance for extracting and customizing plain css, as opposed to scss.