Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap-table hide column in mobile view

Tags:

I have a checkbox column which should only be visible on desktop and not on Mobile or Tabs.

There are no options available in the documentation to hide/show any columns based on the devise.

Can we do this?

like image 963
Nikunj Thakkar Avatar asked Jul 05 '16 17:07

Nikunj Thakkar


People also ask

How do I hide columns in bootstrap?

In order to hide a column based on the column width use d-none d-X-block . Basically you simply turn off the display of the size you wish to hide then set the display of the bigger size.

How do I make a column hidden in a table?

To hide a column entirely from view, meaning it will not be displayed in either the normal or details row, simply use the visible column option and set it to false . This example shows a table where the first column ID is completely hidden from view using the data-visible column attribute.

How hide data from table in jQuery?

You can do this with jQuery by toggling the specific columns according to the selection. In the demonstration, I am creating a table layout for listing the employee details and use checkboxes to hide and show the table columns using jQuery.


1 Answers

This is now (4.2) done as explained here: https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

For table cells you have to use e.g.

<th class="d-none d-lg-table-cell"> 

This will display the table cell only on large displays an upwards.

like image 144
Klaus Avatar answered Sep 18 '22 15:09

Klaus