CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
dagda1
dagda1

Reputation: 28760

Hide table rows for mobile or tablet

I am using twitter bootstrap 3.3 and I want to hide certain columns when in mobile or tablet mode.

Are there specific classes that I can use to hide the columns when in mobile or tablet.

e.g. 

<td class="mobile-hidden tablet-hidden">blah</td>

Upvotes: 0

Views: 2927

Answers (4)

shalini
shalini

Reputation: 1290

Refer link : http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

.hidden-md-up to hide on medium, large and extra large devices.


.hidden-md-down to hide on medium, small and extra-small devices

To display only on medium devices, you can combine the two:

hidden-sm-down and hidden-xl-up

Upvotes: 0

Pranav Nutalapati
Pranav Nutalapati

Reputation: 734

There are Bootstrap classes:

  • hidden-xs
  • hidden-sm

But, for some reason, there seems to be a glitch where you can only use one of them on some devices. For exaple, if I have <td class='hidden-xs hidden-sm'>, then it only hides for the tablet size, or 'sm'.

Upvotes: 0

ONE_FE
ONE_FE

Reputation: 996

You can use media queries. Hope you aware of media queries. 

@media screen and (min-width: 401px) and (max-width: 1024px) {
  .tablet-hidden { display: none; }  
}

Upvotes: 5

Haring10
Haring10

Reputation: 1557

Not sure about device targeting but you can use the Utility Classes:

.hidden-xs
.hidden-sm

should work

Upvotes: 1

Related Questions