Menu
This is regarding bootstrap 3. I want to change the colors of predefined bootstrap 3 columns when the browser is re-sized.
Here is the code for the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/custom.css" rel="stylesheet" type="text/css" media="screen"/>
<!--<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css" media="screen"/>-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-4 col-sm-2 col-xs-12 border">one</div>
<div class="col-lg-2 col-md-4 col-sm-8 col-xs-12 border">two</div>
<div class="col-lg-1 col-md-4 col-sm-2 col-xs-12 border">three</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
custom.css file:
.border
{
border:2px solid;
}
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12{background-color:red;}
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12{background-color:yellow;}
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12{background-color:green;}
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12{background-color:blue;}
When the browser is re-sized, the first column should have background color red color, then background color yellow, followed by background color green and then finally background color blue. However when viewing this web page in a browser and re-sizing it, all columns background colors stay blue.
I want to change the colors(overwrite or add styles to predefined classes in bootstrap 3). How can this be achieved?
538
Your problem is that css won't apply the style of certain classes at certain widths it can merely be told what style rules to apply to certain classes at different widths using media queries. Bootstrap works through using media queries.
Just because you are using bootstrap doesn't mean it will magically apply media queries to it's own classes at certain widths. See http://getbootstrap.com/css/#grid-media-queries to see the media queries bootstrap uses internally to apply there style rules. Media Queries are pretty simple, but may seem a little daunting you'll get used to them and they will make sense while you are around them more.
Your background blue is happening, because it is the bottom most style rule so it is the only one being applied if only you could have just the style rules you want to show up at different widths. That is what media queries are for. They apply the styles only at the width they are specified and disappear at any other width.
Here's what you wanted to overwrite the css classes.
css
/* Styles go here */
.border
{
border:2px solid;
}
/*screen-xs*/
@media (max-width: 768px) {
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12{background-color:blue;}
}
/*screen-sm*/
@media (min-width: 768px) and (max-width: 992px) {
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12{background-color:green;}
}
/*screen-md*/
@media (min-width: 992px) and (max-width: 1200px) {
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12{background-color:yellow;}
}
/*screen-lg corresponds with col-lg*/
@media (min-width: 1200px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12{background-color:red;}
}
http://plnkr.co/edit/ZQ6QjRMLm07hkb7cBUPW?p=preview
EDIT:
The problem with this is you are overwriting the bootstrap classes and that means you are overwriting the styles that will be shown. From now on if you try to use bootstrap columns they will have these styles I suggest instead adding a class to the element and a style rule for that class in place of overwriting it.
HTML
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-4 col-sm-2 col-xs-12 border myColoredCol">one</div>
<div class="col-lg-2 col-md-4 col-sm-8 col-xs-12 border myColoredCol">two</div>
<div class="col-lg-1 col-md-4 col-sm-2 col-xs-12 border myColoredCol">three</div>
</div>
</div>
CSS
/* Styles go here */
.border
{
border:2px solid;
}
/*screen-xs*/
@media (max-width: 768px) {
.myColoredCol{background-color:blue;}
}
/*screen-sm*/
@media (min-width: 768px) and (max-width: 992px) {
.myColoredCol{background-color:green;}
}
/*screen-md*/
@media (min-width: 992px) and (max-width: 1200px) {
.myColoredCol{background-color:yellow;}
}
/*screen-lg corresponds with col-lg*/
@media (min-width: 1200px) {
.myColoredCol{background-color:red;}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
