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?

DeBraid · Answer 1 · 2018-09-13T16:22:06.367

29

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.

bootstrap css html visible and hidden class grid

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

edited Sep 13 '18 at 16:22

answered Jun 24 '15 at 18:36

DeBraid

8,751
5
32
43

1

This doesn't answer the question. Because CSS styles added by those classes allow to set: display, display-block, display-inline. He is asking about "table-cell" and if there is a better way to do that with BS (without adding custom styles). – AphonopelmaChalcodes Aug 05 '16 at 10:20
1

Seems Google keeps throwing this thread up in response to questions about `visible`/`hidden` classes in Bootstrap (based on the frequent upvotes the original answer receives). – DeBraid Aug 07 '16 at 17:56
1

FYI The above was removed from version 4 of bootstrap. – jcaruso Jul 03 '18 at 13:13

score 21 · Accepted Answer · answered May 14 '13 at 14:54

21

I finally found that exists a workaround replacing:

visible-desktop

by

hidden-phone hidden-tablet

Hope helps someone!

answered May 14 '13 at 14:54

Santiago

2,190
10
30
59

4

It is okay to accept your own answer, indicating that it is correct. – davidkonrad May 14 '13 at 15:06
1

I must to say this answer is only for Boostrap 2, Boostrap 3 doesn't exists when I asked. – Santiago Jun 24 '15 at 18:52

score 11 · Answer 3 · answered Jan 22 '14 at 10:03

11

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

answered Jan 22 '14 at 10:03

Joel AZEMAR

2,506
25
31

Twitter Bootstrap Responsive - Show Table Column only on Desktop

3 Answers3

Version 4

Version 3

Linked