title: twitter bootstrap .hidden-lg less not working
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html class="no-js"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
          &lt;title&gt;Title&lt;/title&gt;
          &lt;meta name="description" content=""&gt;
          &lt;meta name="viewport" content="width=device-width"&gt;
  
          &lt;link rel="stylesheet" type="text/css" href="./assets/css/normalize.css" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="./assets/css/bootstrap.css" /&gt;
          &lt;script src="./assets/js/less.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div class="header-container"&gt;
              &lt;header class="wrapper clearfix"&gt;
                  &lt;h1&gt;Header&lt;/h1&gt;
                  &lt;nav&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;nav ul li a&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;nav ul li a&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;nav ul li a&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/header&gt;
          &lt;/div&gt;
  
          &lt;div class="main-container"&gt;
              &lt;div class="promo-pod"&gt;
                  &lt;p&gt;Promo pod Promo pod Promo pod Promo pod&lt;/p&gt;
                  &lt;p&gt;Promo pod Promo pod Promo pod Promo pod&lt;/p&gt;
                  &lt;p&gt;Promo pod Promo pod Promo pod Promo pod&lt;/p&gt;
                  &lt;p&gt;Promo pod Promo pod Promo pod Promo pod&lt;/p&gt;
                  &lt;p&gt;Promo pod Promo pod Promo pod Promo pod&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt; &lt;!-- #main-container --&gt;
  
          &lt;div class="footer-container"&gt;
              &lt;footer class="wrapper"&gt;
                  &lt;h3&gt;Footer&lt;/h3&gt;
              &lt;/footer&gt;
          &lt;/div&gt;
  
          &lt;!-- Le javascript
          ================================================== --&gt;
          &lt;!-- Placed at the end of the document so the pages load faster --&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;!--&lt;script src="assets/bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;--&gt;
          &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My less for hiding the promo-pod:</p>
  
  <pre><code>.main-container {
  
      .container();
      .make-row();
  
      .main.wrapper {
          .make-column(12);
      }
  
      .promo-pod {
          border:1px solid red;
          .hidden-lg;
          .make-column(3);
      }
  }
  </code></pre>
  
  <p>I decided to change div class="promo-pod" to div class="span4 hidden-lg" and it hid the div, but when it is just div class="promo-pod", all the rules apply except the .hidden-lg;</p>
  
  <p>The less file compiles correctly each time I save the file, any help is appreciated.</p>
  
  <p>Changed the name to promo, as in , very long, so search for promo in this gist <a href="https://gist.github.com/anonymous/6174366" rel="nofollow">https://gist.github.com/anonymous/6174366</a></p>