Is it possible to use Bootstrap without it taking over the entire style?

Is it possible to use Bootstrap without it taking over the entire style?

Is there an easy way to use Bootstrap in an existing project?
Currently it adds styles for table,a etc. which messes up everything in the page.
I really love the modal window, some buttons, but I don’t want to hunt bootstrap css all the time to switch items back to default styles.


Solution 1:

You can use the “customize” feature on the bootstrap website to get only those features you want: Twitter Bootstrap Download Page. Most of bootstrap’s rules are explicit. You’ll probably only want to leave out the reset rules which are implicit by default.

Solution 2:

Bootstrap 3 // Less 1.4.0 edit:

After Bootstrap 3 and Less 1.4.0 has come out, bootstrap has started using the :extend() pseudo selector. This means that certain things will fail in the original code I’ve posted (you’ll get some .bscnt .bscnt form-horizontal code which means you have to nest two divs inside eachother, which is just dumb). The easy way to fix this is to remove the first two lines from bootstrap.less (@import variables.less and @import mixins.less) and instead import these files outside of the .bs-cnt scope:

@import "variables.less";
@import "mixins.less";

.bscnt {
    @import "bootstrap.less";

You can also download bootstrap from here: Bootstrap source and then enter the “less” directory and add a file called “bootstrap-custom.less” where you’ll enter the following content:

Related:  Twitter Bootstrap Form File Element Upload Button
.bs-cnt {
    @import "bootstrap.less";

“bs-cnt” for BootStrap-CoNTainer. You can make it longer if you want, but remember that it’ll be pasted in a lot of places in the compiled CSS, so it’s to save space in the end file.

After you’ve done this, simple compile the bootstrap-custom.less file with your favourite less compiler (SimpLESS is pretty good if you’re on Windows), and then you’ll have a compiled bootstrap file that only works when you place a container element with the class of “bs-cnt”.

<div class="bs-cnt">
    <button class="btn btn-success btn-large">This button will be affected by bootstrap</button>
<button class="btn btn-danger">This however; Won't</button>

Solution 3:

I think the link in answered section is not already updated. Here is where you can customize your Bootstrap directly on GetBootstrap site:

Customize and download – GetBootstrap