Bootstrap `.hidden-xs` does not hide div

Question

I am trying to create a site, that will hide an extended section for users on a small screen using Bootstrap's .hidden-xs To test it, I am using Chrome's mobile emulator, setting it to "iPhone 5" (pretty small). When I refresh the page, however, it does not hide the div. Am I using the class wrong?

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, intial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="static/css/todo.css">
        <title>TODO</title>
    </head>

    <body>
        <div class="container-fluid">
            <header>

            </header>
            <div id="left">
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
            </div>
            <div class="main" class="hidden-xs">
            </div>
        </div>
    </body>
</html>

CSS

/* CSS Document */

body {
    margin: 0;
}

header {
    height: 10em;
    width: 100%;
    border-bottom: 1px solid #000000;
}

#left {
    float: left;
    height: 80%;
    max-width: 100%;
    width: 20%;
    border-right: 1px solid black;
    overflow: scroll;
}

#main {
    float: left;
    width: 80%;
    height: 100%;
}

.test {
    height: 10em;
    background-color: #eeeeee;
    width: 100%
}

.test:hover {
    background-color: #dddddd;
}

here is a JSFiddle demonstrating my code: https://jsfiddle.net/James_Parsons/jwqdbn61/

EDIT

Apparently an iPhone 5 is not small enough. If I use both .hidden-xs and .hidden-sm will it be hidden on all small devices?

possible duplicate of [iPhone 5 CSS media query](http://stackoverflow.com/questions/12539697/iphone-5-css-media-query) — KyleMit, Mar 27 '15 at 17:19

AndrewL64 · Accepted Answer · 2015-03-26T18:20:14.907

The iPhone5 width is 1136px so adding hidden-sm too won't help. You will need to add a custom media query to hide the .main like this:

@media (max-width: 1199px) {
    .main {
        display: none;
    }
}
@media (min-width: 1200px) {
    .main {
        display: block;
    }
}

BUT there are a lot of people using PCs and Laptops with a screen width in that range so you might end up hiding the div for them too.

If you want to hide the div on Phones/Tablets having a large width, then you might have to go with the old school user-agent device detection approach which involves using JavaScript to check if the device is a Phone/Tablet or not.

Also, as Kyle mentioned above, you need to define your main class as well as your hidden-xx query class together like this:

<div class="main hidden-xs">

KyleMit · Answer 2 · 2015-03-26T18:14:29.900

6

There are two issues here:

One is that the jsFiddle does not include the viewport tag so the device emulation does not try to resize the viewport. Without that, you cannot take advantage of Bootstrap's responsive class sizes. Make sure to include the following as the first item in your head element:
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
Here's a plunker that includes a runnable instance
The other issue is that you have class defined twice in you main div:
```
<div class="main" class="hidden-xs">
```
So if you inspect the element, you'll actually notice that the second class is ignored and you never pull in hidden-xs. Instead add them both separated by a space like this:
```
<div class="main hidden-xs">
```

Now it should work fine:

edited Mar 26 '15 at 18:14

answered Mar 26 '15 at 17:52

KyleMit

30,350
66
462
664

2

@James_Parsons, that's not very descriptive/helpful. You mean using the emulator? On a real device? Using the link I provided? Making the changes yourself? The two things I pointed out were definitely impeding this from working. When they cleared up, it worked for me. If you're using Bootstrap you need the meta viewport tag, so pretending there are more pixels and writing custom CSS for classes that are already provided isn't a very stable solution. – KyleMit Mar 27 '15 at 17:28

score 0 · Answer 3 · answered Jul 21 '16 at 22:06

0

try this add this css :

@media (max-width:767px){.hidden-xs{display:none!important}}

answered Jul 21 '16 at 22:06

Bruno Ribeiro

1,280
16
21

Bootstrap `.hidden-xs` does not hide div

3 Answers3