Search code examples
csstwitter-bootstrapresponsive-designmedia-queriescss-tables

How can apply bootstrap classes like and their respective behavior to only mobile mode using media queries?


I have a table in application who use UI breaks when the screen width reduces to lesser than 600px. Now I want to apply the following bootstrap classes that add a scroll to the application :

 .table-scrollable .table-scrollable-borderless

But, I don't want the scrolls to appears in Desktop UI.

So, I decided to use the media query :

<style>
@media (max-width: 600px) {

}
</style>

But, since these are not my own custom designed class but instead are classes inherited from bootstrap. I dont know how to invoke from the media queries.

And I can't change the class names either because I am sure, there will be some jquery that generate the scrolls based on these class names.

Please guide.


Solution

  • You want to add the property

    overflow-y: scroll;
    

    To the element you want to have a scroll bar. And borderless is of course achievable via border: none;.

    Please note, when adding overflow-y: scroll, it's important that you have a set height. Hope this helps.