This chapter will teach, How you can hide specific columns in different resolution screens mobile, tablet and desktop? Sometime according to the requirements we need to hide some modules (div) on different gadgets. Like we are showing a div containing a image ad in the site but we only want to see this dive in the desktop and tablet and not want to show in the mobile. Similar there can be a requirement to show div in the mobiles but not show in the desktop or tablet. So we can do this by the bootstrap css grid classes. Yes not need to write any custom and not need to write and jQuery script. Just add additional classes into the div and you can hide and show the div according the resolution changes.
For example here some requirements:-
1. We have four div with the color of red, green, blue, orange and gray.
2. In the desktop in large resolution grater than equal to 1200px the all the div should visible instead of the gray color div.
3. In the medium screen grater than equal to 992px resolution all the div should visible instead of the the orange and gray.
4. In the small screen grater than equal to the 768px resolution all the div should visible instead of the blue, orange and gray.
5. In the extra small screens consider in the the mobile resolution less than equal to 768px all the div red, green, blue, orange and gray should be visible.
The above screen will show you where the code will affected the div columns and in which one resolution.
Below the explanation how it works:-
1. As you can see class .hidden-lg hiding the div gray in the large resolution.
2. In the pointer second class .hidden-md hiding the div orange in the medium screen.
3. In the third pointer thing you can see class .hidden-sm hiding the div blue in the small screen.
4. In the point four you can see the class .hidden-xs hiding the div green in the extra small screen.
<html>| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
.visible-xs | Visible | Hidden | Hidden | Hidden |
.visible-sm | Hidden | Visible | Hidden | Hidden |
.visible-md | Hidden | Hidden | Visible | Hidden |
.visible-lg | Hidden | Hidden | Hidden | Visible |
.hidden-xs | Hidden | Visible | Visible | Visible |
.hidden-sm | Visible | Hidden | Visible | Visible |
.hidden-md | Visible | Visible | Hidden | Visible |
.hidden-lg | Visible | Visible | Visible | Hidden |
For example here some requirements:-
1. We have four div with the color of red, green, blue, orange and gray.
2. In the desktop in large resolution grater than equal to 1200px the all the div should visible instead of the gray color div.
3. In the medium screen grater than equal to 992px resolution all the div should visible instead of the the orange and gray.
4. In the small screen grater than equal to the 768px resolution all the div should visible instead of the blue, orange and gray.
5. In the extra small screens consider in the the mobile resolution less than equal to 768px all the div red, green, blue, orange and gray should be visible.
The above screen will show you where the code will affected the div columns and in which one resolution.
Below the explanation how it works:-
1. As you can see class .hidden-lg hiding the div gray in the large resolution.
2. In the pointer second class .hidden-md hiding the div orange in the medium screen.
3. In the third pointer thing you can see class .hidden-sm hiding the div blue in the small screen.
4. In the point four you can see the class .hidden-xs hiding the div green in the extra small screen.
<head>
<title>Bootstrap 3 Grid classes Introduction</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- My own CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style type="text/css">
/* My custom override classes */
.container{padding-top: 10px;}
.row{margin-bottom: 10px;}
.row div{margin-top: 15px; margin-bottom: 15px; color: #fff;
font-weight: bold;font-size: 100px; min-height: 250px;}
.red{background-color: red;}
.green{background-color: green;}
.blue{background-color: blue;}
.orange{background-color: orange;}
.gray{background-color: gray;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 red">1</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 hidden-xs green">2</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 hidden-sm blue">3</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 hidden-md orange">4</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 hidden-lg gray">5</div>
</div>
</div>
<body>
</html>