hidden class bootstrap doesn't work?
<p>Here is my HTML</p>

<pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
        &lt;div class="header"&gt;
            &lt;a href="#" class="col-xs-3 col-xs-offset-1 logo"&gt;&lt;/a&gt;
            &lt;div class="col-xs-6 col-xs-offset-1 nav hidden-sm-down "&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here is my CSS</p>

<pre><code>.header{
    width: 100%;
    background-image: url("san_fran.jpg");
    background-size: cover;
}

.top-header{
    width: 100%;
}
.logo{
    background: url("logo-cinetik.png") center center no-repeat;
    height: 130px;
    min-width: 400px;
}

.nav{
    background-color: $test-color;
    height: 100px;
}
</code></pre>

<p>the div tag has the hidden-sm-down class. It should be hidden when my window is less than a certain point isn't it ?</p>

<p>Here is the result</p>

<p><a href="https://i.stack.imgur.com/EJkFU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EJkFU.png" alt="enter image description here"></a></p>

<p>The red div should be hidden!
How can i do this ?</p>