Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 400
Kaan Soral Avatar asked Apr 03 '12 14:04

Kaan Soral


People also ask

Does Bootstrap override CSS?

You can override the default styles of Bootstrap elements using two possible methods. The first way — using CSS overrides— applies to sites using BootstrapCDN or the pre-compiled versions of Bootstrap. The second — using Sass variables — applies to sites using the source code version of Bootstrap.

Can you use Bootstrap without CSS?

If you are thinking that if you are using Bootstrap you will not need to know CSS, you are very wrong. Any front-end developer needs to learn CSS and HTML5.

Is there a reason not to use Bootstrap?

1. Anti-patterns. First off, Bootstrap supports far too many anti-patterns. An anti-pattern is a design idea that seem good, is reproduced often, but generally are bad ideas for a website.


2 Answers

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:

.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>
</div>
<button class="btn btn-danger">This however; Won't</button>
like image 154
h2ooooooo Avatar answered Nov 01 '22 00:11

h2ooooooo


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.

like image 43
doogle Avatar answered Nov 01 '22 01:11

doogle