Customize Twitter Bootstrap Classnames

Question

http://getbootstrap.com/customize/

Above link, customizes Bootstrap's components, Less variables, and jQuery plugins to get your very own version.

I am wondering if it's possible to customize bootstrap by adding prefixes to it's classes, for example:

".container" = ".myid_container"
".btn-group" = ".myid_btn-group"

Rasheedarasher

You can fairly easily write a CSS postprocessor (using something like postcss) to do this sort of thing. The Bootstrap Customizer page itself can't do this. Note that you'll have to make corresponding changes to Bootstrap's JavaScript. – Desk

Answer 1

You can @extend bootstrap classes and call them whatever you want if you are using sass. Here is the info http://www.sitepoint.com/sass-semantically-extend-bootstrap/

But if you use plain bootstrap.css I'm not sure if there is a way to rename bootstrap classes except for renaming them in the file.

Shirr

Answer 2

I know this is an old question, but this may help people coming here from search engines - you can do the following in scss to achieve the above:

// allows this file to use bootstrap classes and functions
@forward "node_modules/bootstrap/scss/bootstrap";

.myid_container{
  @extend .container;
}

.myid_btn-group{
  @extend .btn-group;
}

Deaconry

Answer 3

Just go to your bootstrap css file on any editor and then use "Find & Replace" (Ctrl + H in Notepad++) to replace all '.' with '.myid_'

Bout