How to style bootstrap col-lg-* classes?

Question

I'm beginner in Less. I want to write a string like "Column-div" in any div with col-lg-[anyNumber] or col-md-[anyNumber] class.

For example something like this code:

.col-lg-*:before {
  content: "Column-div";
  color: #28a4c9;
}

How can I do this with Less?

Are you looking for a loop like in this [**demo**](http://codepen.io/hari_shanx/pen/isyKj)? Click the eye icon in the CSS tab to see the compiled CSS output. — Harry, Aug 10 '14 at 13:59
You may also want to have a look at the `for` loop wrapper mixin that seven-phases-max has provided in [this thread](http://stackoverflow.com/questions/21440789/loop-through-array-of-values-in-less). LESS as such doesn't have a `for` syntax but this wrapper is very helpful and easy to use :) (Note: I have removed the previous comment to reduce noise, please don't mistake). — Harry, Aug 10 '14 at 14:14

Harry · Accepted Answer · 2015-08-13T11:42:03.857

With Less:

One of the options would be to basically create a Less loop like in the below code sample. However, the problem is that the number is fixed and so it would (a) statically generate as many classes as the number (which means bloated code) and (b) if class has a higher suffix value, it won't 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

Codepen Demo

With pure CSS:

There is also a pure CSS alternate for this kind of pattern matching. You can make use of any one of the CSS3 Attribute Selectors depending on your needs. A few samples are available in the 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>

Mohsen Najafzadeh · Answer 2 · 2022-05-24T15:28:06.660

A simple sample for prefix, suffix and contain "CSS selector":

[class^="col-md"] {
  background: green; // start with col-md (^)
}
[class$="col-sm"] {
  background: #EEE; // end with col-sm ($)
}  
[class*="col-lg"] {
  background: red; // contains col-lg ($)
}

<div class="col-md-test1">test1</div>
<div class="col-md-test2">test2</div>

<div class="test3-col-sm">test3</div>
<div class="test4-col-sm">test4</div>

<div class="test5-col-lg">test5</div>
<div class="col-lg-test6">test6</div>

How to style bootstrap col-lg-* classes?

2 Answers2

Linked