There is the possibility to mount a CSS specific to a size in Bootstrap

Asked

Viewed 48 times

0

I would like to create a css that when a certain class was in the Xs size it would have a red font-color 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>

Wanted a class would have two color alternative depending on the size...

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

Is such a feat possible? It can be in CSS or JS. Thanks in advance for your help

css html5 twitter-bootstrap
  • 1

    import a css file, with the following setting . col-Xs-12 {color:red;} . col-Sm-12 {color:blue;}

2 answers

1


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

[href*="http://"]{
  color: red;
  font-size: 18pt;
}
<a href="http://answall.com">Stack overflow</a>

See that at no time assigns anything to tag <a>. To mount a selector that gives rules to everything you have to substring -xs in the classes, you can do 

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

But that’s not very performative, because it makes comparisons with all class names. It’s not a very good practice.

Read more about it here.

  • Very good! I didn’t know that! I used LESS and it worked

  • If the answer helped you, accept it as the correct one! =)

0

I got an alternative solution using LESS as below:

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

Browser other questions tagged css html5 twitter-bootstrap

You are not signed in. Login or sign up in order to post.