Is there any ready to use Bootstrap css file with prefix

Question

I have web application which uses Foundation.

I am not good at foundation and i have to develop few pages where i want to use Bootstrap but i dont want to mix with other company css.

SO i was looking if i can wrap all bootsrap inside some class like bootstrap. so that if i want to use bootsrap . i can use like

<div class="bootstrap"> <table class="table">
</div>

I don't know sass and all that.

is it possible to download some bootstrap css from online with some pre defined prefix

Answer 1

Indeed you could use namespaces, see: How to namespace Twitter Bootstrap so styles don't conflict, http://lesscss.org/features/#features-overview-feature-namespaces-and-accessors and

In the case you need Bootstrap's CSS for tables only, you can compile the following Less / SASS code, after downloading the source code at http://getbootstrap.com/getting-started/#download:

**less / SASS **

.bootstrap {
@import "variables";
@import "mixins/table-row";
@import "tables";
}

As you see you can use the same code for Less and SASS, notice that the order of the imports does matter when compiling the SASS version.

update

The accepted solution only prefix classes (or selector having a class). In the case that you want to use Bootstrap's CSS to style your HTML tables. Your prefixed don't have bootstrap's styles for the table, th and caption selectors.

Even when you have never used Less / CSS before you can do the prefixing with Less (or SASS) easily leveraging an online compiler. A list of online Less compilers can be found at: http://lesscss.org/usage/#online-less-compilers. Also codepen has an online LESS and SASS compiler.

The only thing you have to know is what files to import. Bootstrap's Less files are well organized. You should always import variables.less and mixins.less. The mixins.less imports all other mixins. Mixins do not output, so importing all of them will slow down the compilation, but do not appear in the compiled CSS code.

In the case you want a prefixed version of the table CSS you can run the following code in one of the online compilers:

.bootstrap {
    @import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/variables.less");
    @import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/mixins.less");
    @import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/tables.less");
}

An demo can be found at: http://codepen.io/bassjobsen/pen/PwPNBP

Answer 2

@Wolfr's answer has described the problem pretty well - in 2019 http://www.css-prefix.com/ doesn't work anymore, and all the other solutions that are in google top10 only increase css specificity by wrapping all bootstrap classes with the parent class.

That approach isn't bullet-proof: e.g. if you make

.custom_namespace .col-3 { width: 25%; }

this won't protect you from someone using !important to bootstrap class for whatever reason some would do it. .col-3 { width: 99% !important; }

Instead, there is actually one work I found through npm, where developer has indeed implemented that custom prefix AND even made it work with bootstrap's JS file. But it's only for Bootstrap 3: https://www.npmjs.com/package/bootstrap-sass-namespace

This will generate all bootstrap classes in form of e.g. .custom_prefix_col-3 {}

One more option if you need truly namespaced Bootstrap 4 css:

In my case I needed Bootstrap 4, so I opened bootstrap css file, ran search and replace in Sublime Text with Regular Expression, using this value for search: \.(?<TAG>[a-z]{1,3}) - this captures all the beginnings of the classes by using period and first one to three letter characters as opposed to just searching for period (.) and risking to mess up float values for CSS properties.

and for replace I used .the_prefix_I_need\1

This allowed me to produce truly isolated bootstrap 4 css file that for sure won't be messed up if someone somewhere at the websites where my app is included will decide to redefine some bootstrap classes with !important.

Answer 3

If you don't use SASS or LESS, you can use http://www.css-prefix.com/

1. Make a short prefix (my recommendation)
2. If you use a space, then it will be a parent class.
3. Paste in the compiled version of the CSS file
4. Click the run button

Result snippet:

.tb.col-xs-1, .tb.col-sm-1, .tb.col-md-1, ...

Answer 4

It sounds like you want to namespace Bootstrap, which is pretty easy to do using SASS (which Foundation uses, I believe). So in your SASS file (should have a .scss extension) you can import Bootstrap within a class name like this:

.bootstrap {
  @import 'bootstrap';
}

And then you can reference Bootstrap in your HTML like this:

<body class="bootstrap">
    <div class="col-xs-12 col-sm-6"> 
        <table class="table"></table>
    </div>
</body>

You can download SASS version of Bootstrap here: https://github.com/twbs/bootstrap-sass. Drop that SCSS file into the same directory as your main SCSS file and then you can import.

Answer 5

Imo the answers to this question are problematic. If you introduce a generic class to namespace everything, such as this...

.bootstrap {
    @import 'bootstrap';
}

You are effectively increasing the CSS specificity.

What you really need is a tool that migrates Bootstrap to change the class names themselves.

For example,

E.g.

<div class="alert">

<div class="something alert">

<div class="something alert alert-danger">

Should become

<div class="bs-alert">

<div class="something bs-alert">

<div class="something bs-alert bs-alert-danger">

It should leave "something" alone because this class does not occur in Bootstrap.

To my knowledge such a tool does not exist (open source).