28

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?

Nikunj Thakkar
  • 351
  • 1
  • 4
  • 8

8 Answers8

34

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.

Klaus
  • 727
  • 8
  • 13
  • 3
    helpful answer! bs5 link: https://getbootstrap.com/docs/5.0/utilities/display/#hiding-elements and just a quick reminder that you must apply this class to the elements as well – user2682863 Aug 20 '21 at 02:56
19

You can use the following

hidden-sm : Hidden on small devices ( Tablets ( >= 768 px))
hidden-xs: Hidden on extra small devices ( Phones ( <768 px))

example 

<th class="hidden-xs hidden-sm">Your Column</th>

<td class="hidden-xs hidden-sm">Value </td>
Monah
  • 6,714
  • 6
  • 22
  • 52
14

After Bootstrap v4.0+ a good approach is

<th scope="col" class="d-none d-sm-table-cell">Column</th>

d-none hides the element on XS (mobile) viewports and d-sm-table-cell keeps it visible SM onwards (tablets and bigger)

Luiz Eduardo
  • 380
  • 4
  • 13
8

I might be late to this but I been using bootstrap's .d classes for mobile-friendly development to hide/show few things, hope this helps! BootStrap 4

enter image description here

Here is codepen example for table

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<h2>Good Table</h2>

<table class="table">
    <thead>
        <tr>
            <th style="display:none">Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="display:none">Data 1.1</td>
            <td>Data 1.2</td>
            <td>Data 1.3</td>
        </tr>
        <tr>
            <td style="display:none">Data 2.1</td>
            <td>Data 2.2</td>
            <td>Data 2.3</td>
        </tr>
        <tr>
            <td style="display:none">Data 3.1</td>
            <td>Data 3.2</td>
            <td>Data 3.3</td>
        </tr>
    </tbody>
</table>

<h2>Bad Table</h2>

<table class="table">
    <thead>
        <tr>
            <th style="display:none">Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="display:none">Data 1.1</td>
            <td>Data 1.2</td>
            <td>Data 1.3</td>
        </tr>
        <tr>
            <td>Data 2.1</td>
            <td>Data 2.2</td>
            <td>Data 2.3</td>
        </tr>
        <tr>
            <td style="display:none">Data 3.1</td>
            <td>Data 3.2</td>
            <td>Data 3.3</td>
        </tr>
    </tbody>
</table>
pk_code
  • 2,608
  • 1
  • 29
  • 33
0

Use the hideColumn() method to hide the column you want and triggering it via JavaScript or JQuery when the viewport goes to mobile.

Here's a related issue example of your question: https://github.com/wenzhixin/bootstrap-table-examples/blob/master/issues/220.html

Kevin Quach
  • 221
  • 2
  • 7
0

For Bootstrap 4 use the .d-* classes. E.g. <th class="d-block d-sm-none" ..> to only display a column on a small device.

This example https://live.bootstrap-table.com/code/marceloverdijk/3269 shows a country column and and for sm(all) devices it shows the 2 char code like US and for non small devices it shows United States.

Marcel Overdijk
  • 11,041
  • 17
  • 71
  • 110
  • This is general way of hiding elemets, but table column should NOT be displayed as block, otherwise it won't allign, instead it will cover all available area (as block div element) – ilyas Jumadurdyew Mar 27 '21 at 10:15
0

From Bootstrap documentation for Display Property: https://getbootstrap.com/docs/5.0/utilities/display/

hide on sm and wider screens hide on screens smaller than sm
Walt Kraybill
  • 1
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 05 '23 at 20:55
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/33756530) – Jeremie Feb 08 '23 at 09:37
-1

I think visible and cardVisible options can help you: http://bootstrap-table.wenzhixin.net.cn/documentation/#column-options.

wenyi
  • 1,384
  • 8
  • 11