I have incorporated Bootstrap into my html code and I am attempting to modify the background color of a div when the screen resolution changes from large to medium or small. Even though I have added a class, the change does not reflect when adjusting the screen resolution. Here is the code snippet: http://plnkr.co/edit/6sSYngN0hn2tZZ1wDEML?p=preview
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<style>
.col-lg-12{
height: 50px;
background: red !important;
}
.col-md-12{
height: 50px;
background: yellow !important;
}
.col-xs-12{
height: 50px;
background: black !important;
}
.col-sm-12{
height: 50px;
background: blue !important;
}
</style>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
hi
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>