There is the possibility of putting a specific CSS in Bootstrap for a size

Question

There is the possibility of putting a specific CSS in Bootstrap for a size

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I would like to create a css that when a certain class was in the size xs would have a font-color red and the other sizes this color would change to green. But without having to repeat the text. type:

<div class="hidden-xs">
   <div class="Vermelho">
       Teste
   </div>
</div>
<div class="col-xs-12 hidden-sm hidden-md hidden-lg hidden-xl">
   <div class="verde">
       Teste
   </div>
</div>

I wanted a class would have two color alternatives depending on the size ...

<div class="col-xs-12">
   <div class="Cor">
       Teste
   </div>
</div>

Is it possible to do such a feat? Can be in CSS or JS. Thanks in advance for the help

html5 css twitter-bootstrap

asked by anonymous 22.10.2015 / 19:41

2 answers

0

I've got a workaround using LESS as below:

@media screen and (min-width: 480px) {
 footer div {
      color: rgb(xx, xx, xx);
 }
}

22.10.2015 / 20:46

Animate Load when clicking How the Google Play Books application "blocks" books

score 1 · Accepted Answer

CSS 3 allows you to create selectors using substrings of attribute values. For example, if you want to style links that contain http:// in the href attribute, without going straight to the <a> tag, you could do this:

[href*="http://"]{
  color: red;
  font-size: 18pt;
}

<a href="http://pt.stackoverflow.com">Stack overflow</a>

Notice that at no time do I assign anything to the <a> tag. To mount a selector that assigns rules to everything that has the -xs substring in classes, you can do

[class*="-xs"]{
  color: red;
}

But this is not very performative, as it makes comparisons with all class names. Not a very good practice.