Bootstrap `.hidden-xs` does not hide div

Profile picture for James Parsons
James Parsons

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?

There are two issues here:

  1. 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

  1. 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:

demo