Baptiste Arnaud Baptiste Arnaud - 6 months ago 21
HTML Question

hidden class bootstrap doesn't work?

Here is my HTML

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


Here is my CSS

.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;
}


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 ?

Here is the result

enter image description here

The red div should be hidden!
How can i do this ?

Answer

These are the classes devices based.

Extra small devices Phones (<768px) (Class names : .visible-xs-block, hidden-xs)

Small devices Tablets (≥768px) (Class names : .visible-sm-block, hidden-sm)

Medium devices Desktops (≥992px) (Class names : .visible-md-block, hidden-md)

Large devices Desktops (≥1200px) (Class names : .visible-lg-block, hidden-lg)

Refer this link for more http://getbootstrap.com/css/#responsive-utilities

Comments