Scoped Bootstrap for SharePoint
I've got a project for a client that involves refactoring a lot of bad choices related to SharePoint branding in Classic mode sites. (While I'm enthusiastic about the Modern Sites and new techniques using SPFx extensions, most of our customers are slow on the uptake).
I've had to do this a few times and this blog explains it perfectly, but due to some formatting issues over there and a desire for just the steps as I need to update/repeat this, I've summarized here:
I've had to do this a few times and this blog explains it perfectly, but due to some formatting issues over there and a desire for just the steps as I need to update/repeat this, I've summarized here:
- Open up a node capable command prompt (I use cmd)
- Create a directory for your solution (e.g. C:\Repos\ScopedBootstrap)
- Run npm install bootstrap@3.3.7 (or whatever version you need to work with)
- Go into the node_modules\bootstrap\less directory
- Open bootstrap.less in VS Code.
- Place .YourUniqueClassName{ before all the @import statements and close the curly brace at the end of the file.
- Go back to the ..\bootstrap directory (in node_modules)
- Run npm install to install the dependencies
- Run grunt dist
- Go to the node_modules\bootstrap\dist\css directory in the project and grab the css file you need. If you open it you should see YourUniqueClassName appended to each seletor.
- Once you reference this file it allows you to enable bootstrap at a certain level of the DOM simply by including .YourUniqueClassName in any elements that need it. You can do it at a parent node level to affect everything else in the tree below.
Comments