Twitter Bootstrap Responsive - Show Table Column only on Desktop

Question

I'm using DataTables.net + Twitter Bootstrap and the responsive layout, what I'm trying is to hide some columns of the table using the class "visible-desktop" thats shows the columns only in big sizes but It seems not to work, hides well but if I resize the windows to get a desktop width the columns hidden start showing stacked, seems a CSS display class problem, because inherits the type of display from the parent:

.visible-desktop {
    display: inherit!important;
}

If I manipulate it to

.visible-desktop {
    display: table-cell!important;
}

works well... Is there a workaround for this? Or I have to write my own class for table column hiding?

Answer 1

Version 4

EDIT: Bootstrap 4 removed hidden and visible classes, see this answer for updated examples, and/or related official migration guide.

** Old Answer for Bootstrap 3 below **

Version 3

Available classes for .visible and .hidden.

Use a single or combination of the available classes for toggling content across viewport breakpoints.

From Bootstrap section here http://getbootstrap.com/css/#responsive-utilities-classes

Answer 2

I finally found that exists a workaround replacing:

visible-desktop

by

hidden-phone hidden-tablet

Hope helps someone!

Answer 3

On Boostrap 3.0 use .visibilty-<size> or .hidden-<size> responsive classes as described in the official doc.

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