Bootstrap collapsible sidebar

gistfile1.txt

#content {
	margin-left: 16em;
}

#sidebarContainer {
	position: fixed;
	top: 50px;
	height: 100%;
	width: 16em;
	z-index: 1;
}

#sidebar {
	position: relative;
	padding: 20px 0 0 0;
	background: #eee;
	height: 100%;
	width: 16em;
}

@media (max-width: 768px) {
	#content {
		margin-left: 0;
	}
	
	#sidebarContainer {
		width: 0%;
		background: transparent;
		transition: background 0.2s linear, width 100s linear; 
	}
	#sidebarContainer.show {
		width: 100%;
		background: rgba(0, 0, 0, 0.5);
		transition: background 0.2s linear, width 0s linear; 
	}
	
	#sidebar {
		left: -16em;
		transition: left 0.2s ease-in-out;
	}
	#sidebarContainer.show #sidebar {
		left: 0;
		box-shadow: 0 0 12px #000;
	}
}

For the content,
#sidebarContainer
	#sidebar
#content
	...