You can just use [Media Queries][queries]






    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
        h1 {
            background: rgba(255, 0, 0, 0.5);     /* transparent red */
        }
    }

    /* Anything Smaller than Large  */
    @media (max-width: 1199px) {
        h1 {
            background: rgba(255, 192, 203, 0.5); /* transparent pink */
        }
    }

[jsFiddle][fiddle]
=====

[queries]: http://getbootstrap.com/css/#grid-media-queries
[fiddle]: http://jsfiddle.net/KyleMit/8ZpBd/

I'm using bootstrap 3. I have a header with transparent red background, but I want to change it according to screen size changes.

For example:

* At lg size, background-color will be red
* At sm size, background-color will be pink

I want to change background color when change screen size at Bootstrap 3

### Update

It's called <code>make-md-<b>column</b>-offset</code> not `make-md-offset`

Running the following through any [Online Less Compiler][less] should work:



    @grid-gutter-width: 30px;
    @screen-md-min: 992px;
    @grid-columns: 12;
    
    // Generate the medium columns
    .make-md-column(@columns; @gutter: @grid-gutter-width) {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@gutter / 2);
      padding-right: (@gutter / 2);
    
      // Calculate width based on number of columns available
      @media (min-width: @screen-md-min) {
        float: left;
        width: percentage((@columns / @grid-columns));
      }
    }
    
    // Generate the medium column offsets
    .make-md-column-offset(@columns) {
      @media (min-width: @screen-md-min) {
        margin-left: percentage((@columns / @grid-columns));
      }
    }

    .content{
        .make-md-column(10);
        .make-md-column-offset(1);
    }

### Original 

My guess would be you have something missing from the build process like importing the mixin functions or variables.

Here is the section on bootstrap grid mixins:  
http://getbootstrap.com/css/#grid-less

Here is a Example Usage:



    .content-secondary {
      .make-lg-column(3);
      .make-lg-column-offset(1);
    }

So your syntax looks fine.  I'd make sure you don't have any build errors.

[less]:http://less2css.org/

I have one element

**HTML**

    <div class="content col-md-10 col-md-offset-1">
    </div>

What i need in **LESS** i something like this

    .content{
      .col-md-10;
      .col-md-offset-1;
    }

That later i can use shortner code like this

    <div class="content col-md-10 col-md-offset-1">
    </div>


I know i must use only content like this

    <div class="content">
    </div>


I have tried something like this but does not work?

    .content{
    	.make-md-column(10);
    	.make-md-offset(1);
    }

Creating new class using boostrap less mixins?

Turn out you have to escape the variable with curly braces `{}` like this:



    .loop(@counter) when (@counter > 0) {
        // call next iteration
        .loop((@counter - 1));    
    
        // code for each iteration
        &[data-size="@{counter}"] {
            width:  (3px * @counter);
            height: (3px * @counter);
        }
    }
    
    div {
      .loop(5); // launch the loop
    }

I'm using [Less Loops][loops], which are really just recursive parameterized mixins.

I'd like to use the passed in parameter (`@counter`) in the selector definition as follows:



    .loop(@counter) when (@counter > 0) {
        // call next iteration
        .loop((@counter - 1));    
    
        // code for each iteration
        &[data-size="@counter"] {
            width:  (3px * @counter);
            height: (3px * @counter);
        }
    }
    
    div {
      .loop(5); // launch the loop
    }

If you copy and paste that into an online less compiler like [less2css][less compiler], you'll get the following:



    div[data-size="@counter"] {
      width: 3px;
      height: 3px;
    }

Whereas what I want is:



    div[data-size="1"] {
      width: 3px;
      height: 3px;
    }

Is this possible?

[loops]: http://lesscss.org/features/#loops-feature
[less compiler]: http://less2css.org/