Bootstrap 3 Apply CSS on Mobile View Only

Just use the appropriate media queries in your CSS, eg

@media (max-width: 767px) {
    /* CSS goes here */
}

Bootstrap defines the following widths

  • Extra small devices (phones, less than 768px)
  • Small devices (tablets, 768px and up)
  • Medium devices (desktops, 992px and up)
  • Large devices (large desktops, 1200px and up)

See http://css-tricks.com/css-media-queries/ for some more information on media queries.


There are also responsive utilities, you can add classes to certain elements to either show or hide them at certain viewport sizes.

.hidden-xs or .visible-xs

http://getbootstrap.com/css/#responsive-utilities


You can use responsive display classes https://getbootstrap.com/docs/4.3/utilities/display/ in Bootstrap 4

So for example, you want to hide a specific element for only phones (in both portrait & landscape mode or xs and sm), you can do

<div class="big_image d-none d-md-block">
</div>

What it does is set display:none by default and makes it visible only from md and above.