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.

Prerequisites

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.

Node.js

You can check whether you have Node.js installed by checking the version number:

node -v

If it is missing, you can install with

sudo apt install nodejs

you can check the version: 

node -v

then install npm:

sudo apt install npm

then check npm version: 

npm -v

You can find other install options on the Node.js website.

Ruby

Check which version of Ruby is installed (if any):

ruby -v

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:

ruby --version

 

Bundler

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:

cd bootstrap

3) Install local Bootstrap dependencies with npm:

npm install

4) Install all Ruby dependencies, such as Jekyll and plugins, with this command:

bundle install

(optional) Do you have Gemfile in your workspace directory?
If “no” , please run bundle init first and after that bundle install

bundle init

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 :
/bootstrap-ns/bootstrap/scss/bootstrap.scss

and add the class inside. e.g.

.yourclass{
@import “functions”;
@import “variables”;
@import “mixins”;
@import “utilities”;
…
@import “tooltip”;
@import “popover”;
@import “carousel”;
@import “spinners”;
}

Compiling

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.