How to style bootstrap col-lg- * classes?

With less:

One option is to basically create a Less loop like in the code example below. However, the problem is that the number is fixed and so (a) statically generates as many classes as there are numbers (which means bloated code) and (b) if the class has a higher suffix value it will not be covered.

.loop(@count) when (@count > 0){ // execute the function only when condition matches.
  .loop(@count - 1); // call the iteration again with a decremented count
  .col-lg-@{count}:before { // using selector interpolation to add the count number
    content: "Column-div";
    color: #28a4c9;
    }
}

.loop(100); // call the loop with the no. of iterations as the parameter

      

        
        
        
      

    

Demo Codepen

With pure CSS:

There is also a clean CSS alternative for this pattern matching. You can use any of the CSS3 Attribute Selectors depending on your needs. Several snippets are available in a snippet.

[class^='col-lg']:before { /* class name starts with col-lg */
  content: "Column-div";
  color: yellow;
}
[class$='col-lg']:before { /* class name ends with col-lg */
  content: "Column-div2";
  color: beige;
}
[class*='col-lg']:before { /* contains col-lg in class name */
  background: chocolate;
}

/* Just for demo */

div:before{
  display: block;
}
      

        
        
        
      

    

<div class='col-lg-1'></div>
<div class='col-lg-2'></div>
<div class='col-lg-3'></div>

<div class='a-col-lg'></div>
<div class='b-col-lg'></div>
<div class='c-col-lg'></div>