I would like to know how to declare a value to a CSS property according to the browser's resolution in Bootstrap.
Example: I want a border to appear only on smartphones or very small resolutions (col-xs). Does bootstrap provide an easy way to do this?
For this you will need to use the media query of css 3. Let's take your example:
All elements that contain the .borda class must have a 1px border on devices with a screen width of less than 768px wide (cell 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