Is it possible to extend the bootstrap css using less?

Question

Is it possible to extend the bootstrap css using less?

Navigation

#1 by (4 votes)

3

I use twitter bootstrap for some things, and I came across the ease of using less, how can I, to use less bootstrap variables in a second css file?

For example, call the media querys with the bootstrap values:

@media (max-width: @screen-xs-max) {
    #test{
        background-color: #285e8e!important;
    }
}

Is it possible to do this in a second file without modifying bootstrap.min.css?

css twitter-bootstrap less

asked by anonymous 06.06.2014 / 15:34

1 answer

Generate final HTML in PHP or JS? Event in date and time expiration - PHP

score 4 · Accepted Answer

You should first use the Less file in Bootstrap instead of bootstrap.min.css and instead of adding the bootstrap in your HTML you import into your .less file with @import '../caminho-do-seu-bootstrap/bootstrap/less/bootstrap.less'; before your settings. This way the code above will work and you do not even need !important since in the hierarchy your CSS will be over.

Here in Bootstrap documentation you have the variables you can customize. With this you customize and use the variables in your own file, after doing @import . For example, in your Less would look something like this:

@import '../bootstrap/less/bootstrap.less';

@media (max-width: @screen-xs-max) {
    #test{
        background-color: #285e8e;
    }
}

Just as a remark, it's important to never change third-party codes as it can bring you many future problems. In the case of CSS, even if you do not know how, assume that you can always overwrite the third-party code instead of modifying them, and then you try to figure out how to do it. Most of the time, just insert your CSS later and use the same classes / variables to override the properties.