Is there any ready to use Bootstrap css file with prefix

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


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, ...

enter image description here


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.

Tags:

Html

Css

Twitter Bootstrap 3

Recent Posts