Twitter Bootstrap: Set specific CSS rule for different sizes

Question

I would like to know how to declare a value to a CSS property according to browser resolution in Bootstrap.

Example: I want an edge to be displayed only on smartphones or very small resolutions (col-Xs). The bootstrap provides an easy way to do this?

Answer 1

For this you will need to use the media query of css 3. Let’s look at your example:

All elements containing the class .borda should have a 1px border on devices with screen less than 768px wide (mobile phones), so in CSS we must define the following rules:

/* Todos os elementos que contenham a classe 'borda' terão uma borda de 1px preta */
.borda{ border: 1px solid #000; }

/* Agora apenas os dispositivos que tenham resolução menor que 768px terão borda */
@media (min-width: 768px){
  .borda{ border: none; }
}

Note: The above example was given based on this link