Bootrap 3 with Less: How to costume media query

Question

I want to style media query for xs, sm, md and lg sizes, but nothing seems to work. I have tried to follow the steps provided in Twitter Bootstrap 3: how to use media queries?. I want to style the div and Icons in different sizes and padding, but when I try to use the media query as explained they keep overwriting all the styles in all the sizes.

I have used media queries in my costume.less and inserted my style changes for the different breaking points. But no matter what size I am choosing the last one overrides it all.

Do I have to define CSS styles in variables in variable.less or how does it work?

Code in my costume.less with example:

//xs only
@media(max-width: @screen-xs-max) {
  .bg {
    background: red;
    padding: 0px;
  }
}
//sm only
@media(min-width: @screen-sm-min) and (max-width:@screen-sm-max) {
  .bg {
    background: blue;
  }
}
//small and up
@media(min-width: @screen-sm-min) {
  .bg {
    background: blue;
    padding: 15px;
  }
}
//md only
@media(min-width: @screen-md-min) and (max-width:@screen-md-max) {
  .bg {
    background: black;
    padding: 10px;
  }
}
//md and up
@media(min-width: @screen-md-min) {
  .bg {
    background: white;
    padding: 34px;
  }
}
//lg and up
@media(min-width: @screen-lg-min)  {}

You need to share some code we could hint then for. Just "it's not working" does not help. — seven-phases-max, Nov 18 '14 at 00:31
@HeidiLil: Mate, whenever you want to add extra information to your question please do so by editing the question and do not add it in the answers section. I have now added the contents that you had posted as an answer into the question. — Harry, Nov 18 '14 at 15:04
@Harry Thank you Harry, I am sorry. I will find my way and do it as you say next time around. HeidiLil — HeidiLil, Nov 18 '14 at 16:21

score 0 · Answer 1 · edited May 23 '17 at 10:26

As can be seen in the code below, i think your code works as expected. You should import your custom.less into the bootstrap.less file:

@import "custom.less";

And compile the bootstrap.less file. When you only compile the custom.less file, you should import Bootstrap's variables.less file.

Notice that when your are testing with IE8 for some reason, you should first read IE8 issue with Twitter Bootstrap 3.

@media (max-width: 767px) {
  .bg {
    background: red;
    padding: 0px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .bg {
    background: blue;
  }
}
@media (min-width: 768px) {
  .bg {
    background: blue;
    padding: 15px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .bg {
    background: black;
    padding: 10px;
  }
}
@media (min-width: 992px) {
  .bg {
    background: white;
    padding: 34px;
  }
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  @media (max-width: 767px) {
  .bg {
    background: red;
    padding: 0px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .bg {
    background: blue;
  }
}
@media (min-width: 768px) {
  .bg {
    background: blue;
    padding: 15px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .bg {
    background: black;
    padding: 10px;
  }
}
@media (min-width: 992px) {
  .bg {
    background: white;
    padding: 34px;
  }
}
</style>  

<div class="bg">test</div>

Bootrap 3 with Less: How to costume media query

1 Answers1