Hidding columns for small devices

Question

I'm using bootstrap 3 and bootgrid to display tables.

Is there a way to hide some columns in small devices ? I'm using class hidden-xs in th elements, but it still display data (not the columns).

My questions are:

How to hide a column for small devices.
How to hide the navigation header only for small devices ?

score 1 · Accepted Answer · answered Sep 20 '18 at 18:02

1

in this solution you need to use Media Queries It uses the @media rule to include a block of CSS properties only if a certain condition is true. like this :

@media only screen and (max-width: 600px) {
body {
    background-color: lightblue;
}

}

here you can set condition on screen that < 600 px , do it for diffrent type of screen. for you i hope this is the way :

  @media (max-width: 500px ) {

    #columnsID {
        display: none;
    }
}

answered Sep 20 '18 at 18:02

mostafa faryabi

176
1
1
11

1

This works. Can I use some bootstrap name instead of "500px" ? – Beetlejuice Sep 20 '18 at 20:18
yes you can .as you know usage of media queries is for responsive applications. you can add different java script option and bootstrap option – mostafa faryabi Sep 21 '18 at 07:36

Hidding columns for small devices

1 Answers1