twitter bootstrap - Correct way of overriding CSS -

twitter bootstrap - Correct way of overriding CSS -

i'm working bootstrap , site want override default settings comes with. lot of bootstrap rules quite nested , not take priority on whatever might define.

in overrides css file, have improve alternative slap

!important

on each rule, or how everybody's handling these days?

fwiw, works me.

if aren't using less, take time figure out, save heaps of time , makes easy maintain organised http://lesscss.org. rewarded ;)

instead of editing original bootstrap less files , losing on next bootstrap update, create new theme-css.less file , perhaps theme.variables.less file , save them in same directory bootstrap less files

edit bootstrap.less new files compiled correctly,

..

// css reset @import "reset.less"; // core variables , mixins

@import "variables.less"; // modify custom colors, font-sizes, etc @import "mixins.less";

@import "theme-variables.less"; // <==== custom css variables

// grid scheme , page structure @import "scaffolding.less"; @import "grid.less"; @import "layouts.less";

// base of operations css @import "type.less"; @import "code.less"; @import "forms.less"; @import "tables.less";

@import "theme-css.less"; // <==== custom css

..

use bootstrap customise page located names of variables rule much of the css may wish customise. alter these req'd , add together theme.variables.less file

use less nested rules per http://lesscss.org/ . <== important. hugely simplifies otherwise complex css

if new less realise isn't simple 5 min fix, 1 time setup , start using nested rules css beautifully simple , easy maintain.

update jun 2015 above technique bit dated now. still works jake suggested alter , simplifies long-term maintenance.

instead of editing main bootstrap.less file:

create new theme.less file

import bootrap.less , custom changes, e.g.:

@import "path-to/bootstrap.less; @import "path-to/custom.less;

compile theme.less

doing way means there's less chance custom changes lost if update bootstrap.less file

css twitter-bootstrap