Get the files from GitHub: https://github.com/jonasjancarik/bootstrap-namespaced.
Please note that this guide has not been updated since Bootstrap 4.0.0 (March 2018) so it’s probably outdated. If you encounter any problems, please let me know in the comments or on Twitter.
There is arguably one problem with Bootstrap’s class names: if you want to use Bootstrap alongside other CSS, the simple names can conflict with the rest of your styles because they do not use a clear namespace.
I recently came across this issue while working on a website which is built on Bootstrap, but where the developers changed some of its core classes and cut out other rules altogether, which makes it rather difficult to use Bootstrap reliably for other content.
The only way around it I could think of (short of changing the main template, which would take too long for various reasons) was to inject a regular version of Bootstrap, prefixed with a special class name to avoid conflicts with the bungled up version already included.
Since it took me a while to figure out all the steps (a Stack Overflow thread helped), I decided to write them down in case someone is facing a similar issue. Following this guide may also help you if you want to compile your own custom version of Bootstrap.
Ubuntu Linux (or similar)
Now you should actually be able to do all of this in Windows or Mac OS — I don’t really see a reason why that should not be possible, but obviously not all the steps and commands below are going to be the same.
On Windows 10, Ubuntu is now included — after enabling it, you can type bash in the File Explorer address bar and follow along.
You can check whether you have Node.js installed by checking the version number:
If it is missing, you can install with
sudo apt install nodejs
you can check the version:
then install npm:
sudo apt install npm
then check npm version:
You can find other install options on the Node.js website.
Check which version of Ruby is installed (if any):
You will need Ruby version 2.0 or higher. There are multiple ways to install it.
In Ubuntu, currently the version you install with:
sudo apt install ruby-full
To verify if Ruby is installed, run the commands below:
Bundler is used for managing Ruby dependencies. Install it with:
gem install bundler
If you get a permissions error, try running the command with sudo (i.e. sudo gem install bundler). (If you are using RVM, try rvmsudo instead.)
Setting up Bootstrap
1) Create a working directory and enter it. I called mine bootstrap-ns (for namespace):
mkdir bootstrap-ns && cd bootstrap-ns
2) Clone the current version of Bootstrap with git:git clone https://github.com/twbs/bootstrap.git
This will download the Bootstrap project (the source files) to a folder named bootstrap within your working directory. (You can of course also just download Bootstrap source and unpack it in this directory.)
We need to enter the folder:
3) Install local Bootstrap dependencies with npm:
4) Install all Ruby dependencies, such as Jekyll and plugins, with this command:
(optional) Do you have Gemfile in your workspace directory?
If “no” , please run bundle init first and after that bundle install
Pay attention to any additional instructions displayed: you will likely be asked to enter your account password. If you get stuck with errors regarding the installation of additional gems, make sure you have those Ruby dev packages mentioned above installed.
If you get ‘An error occurred while installing nokogiri’, try running sudo apt install zlib1g-dev.
Editing Bootstrap source
Now go to next :
and add the class inside. e.g.
Now that everything is ready, run the Grunt script from the /bootstrap directory (which should still be your current directory):
npm run dist
If you get an error saying ‘npm-run-all: not found’, run sudo npm install -g npm-run-all to install the missing package.
Now check the dist/css folder:
ls -lh dist/css
It should contain the compiled CSS files, including bootstrap-ns.css, which will be the final file to include in your project (or the minified .min.css version).
And it’s done!
All rules in the resulting CSS files (bootstrap-ns.css as well as the minified bootstrap-ns.min.css) should now start with .twbs (except html.twbs of course).
You will later have to add the namespace class to the tags in your HTML (if you want to use Bootstrap for the whole page), e.g.:………
What you should keep in mind is that you may still encounter some conflicts when using Bootstrap JS components, because some of the selectors in bootstrap.js are (at least used to be in previous versions) hardcoded.