CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapcss
user944513
user944513

Reputation: 12729

why background color not changing?

I am using bootsrap in my html .I want to change the background color of my div when screen resolution change from large to medium or small .I added class but it not reflect when i change my screen resolution .Here is my code 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>

Upvotes: 0

Views: 81

Answers (1)

Deepak Yadav
Deepak Yadav

Reputation: 7089

it wasn't working because you defined your CSS properties without media-queries. as all the classes were added to a common DIV, the CSS property with highest specificity was getting applied.

Below is the solution to make it work.

@media (max-width: 767px) {
  .col-xs-12 {
    height: 50px;
    background: black !important;
  }
}
@media (min-width: 768px) {
  .col-sm-12 {
    height: 50px;
    background: blue !important;
  }
}
@media (min-width: 992px) {
  .col-md-12 {
    height: 50px;
    background: yellow !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-12 {
    height: 50px;
    background: red !important;
  }
}
<!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>

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

Upvotes: 1

Related Questions