I'm using Bootstrap to develop a Wordpress plugin. The fact is that many plugin or themes can also use their own stylesheets. So, to make sure that my bootstrap styles will only apply on the containers generated by my plugin, I import the bootstrap less inside some containers, like so :
.my-plugin-container,
.my-plugin-menu {
@import "bootstrap.less";
}
It works for most of the components, but I have to re-adapt some things, especially the grids. In this case, the generated CSS for grids is not correct and will be :
@media (min-width: 1140px)
.my-plugin-container .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.my-plugin-menu .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.my-plugin-container .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xl-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xl-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xl-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xl-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xl-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xl-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xl-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xl-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12,
.my-plugin-menu .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xl-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xl-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xl-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xl-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xl-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xl-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xl-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xl-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12 {
position: relative;
min-height: 1px;
padding-left: 11px;
padding-right: 11px;
}
To make this works, and to get my main container classes prepended on each .col-@{class}-@{index}, I modified the following mixins.
```
.make-grid-columns() {
.col(@default: ''){
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
// Common styles for all sizes of grid columns, widths 1-12
.col-xs(@index) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}";
@{item} { .col(); }
.col-xs((@index + 1));
}
.col-sm(@index) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-sm-@{index}";
@{item} { .col(); }
.col-sm((@index + 1));
}
.col-md(@index) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-md-@{index}";
@{item} { .col(); }
.col-md((@index + 1));
}
.col-lg(@index) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-lg-@{index}";
@{item} { .col(); }
.col-lg((@index + 1));
}
.col-xl(@index) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xl-@{index}";
@{item} { .col(); }
.col-xl((@index + 1));
}
.col-xs(1);
.col-sm(1);
.col-md(1);
.col-lg(1);
.col-xl(1);
}
.float-grid-columns(@class) {
.col(@index) when (@index =< @grid-columns) { // initial
@item: ~".col-@{class}-@{index}";
@{item} {
float: left;
}
.col((@index + 1));
}
.col(1); // kickstart it
}
This is now working, and I have all my containers classes prepended to the bootstrap cols classes, so, even if the Wordpress sites is using others bootstrap styles, I can ensure that mine will be used for my container, and not the one from the theme, or another plugin. My question is : Do you have a better solution than my mixin modification to make this work ?
EDIT : This question is not the same as the one posted in Prefixing all selectors for twitter bootstrap in less
the answer provided in this post cannot work for me. i'm not using precompiled bootstrap. i'm using bootstrap from LESS, not from a CSS compiled file. I also need variables and mixins to develop my theme. Wrapping bootstrap LESS in a container generate wrong CSS rules from some mixins, especially the grids. I get .my-plugin-container .col-lg-1, .col-lg-2, .... instead of .my-plugin-container .col-lg-1, .my-plugin-container .col-lg-2, ..... I understand that this issue should not happen if I had imported bootstrap as CSS, but that's not the case for me. I need to work with bootstrap LESS, not a precompiled one.
Thanks a lot.
