Responsive Visual webpart

Hi Devendra Singh,

I would not recommend using visual web part at all for this kind of things. Sometimes it's harder, sometimes impossible (in SPO). I know that this recommendation is mentioned before. Just telling it again.

I would recommend using CEWP instead with a link to html hosted in SharePoint _catalogs/masterpage document library.

cewp.html acts as a container for your JS/HTML/web part's DOM, etc.

The web part communicates with SharePoint object model via JSOM or REST or SOAP (yes there are some things missing in other object models), depending on your preferences and functionality.

Responsiveness is managed by your CSS and in some rare cases with JS. It's possible to use Bootstrap to, but better to build it from .less sources excluding some parts (like normalize, scaffolding, type)  which break SharePoint styles dramatically.

Such model is easily deployable to different environments with gulp automation. You could check gulp-spsave or a boilerplate generator - sppp which creates a project capable publishing assests to sharepoint without manual configuration of automation tasks. Some Node.js background is needed, though. But it worth it. Cause you receive tons of automation capabilities, including live reload on dev environments.

Also, I would recommend SPMeta2 for artifacts code base provisioning as an advanced alternative for PnP provisioning, yet, PnP provisioning is better than declarative XML/CAML based no code features provisioning.

All of the mentioned above is easily integrated to the DevOps to repeatable deployment to the different environments.

Dealing with CEWP with script source is a step next to SharePoint framework. Most of the development workflow is very close to what you can face in SPFx and when SPFx is ready to you you'll be mostly ready to it.

--

Best regards,

Andrew