bootstrap-table hide column in mobile view

Question

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?

Britzka

Answer 1

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.

Conjunctivitis

helpful answer! bs5 link: getbootstrap.com/docs/5.0/utilities/display/#hiding-elements and just a quick reminder that you must apply this class to the <td> elements as well – Item

Answer 2

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>

Mallina

Not sure about the OP but this is exactly what I was looking for – Geomancer

This is for Bootstrap 3.x, see other replies for 4.x approach – Amain

Answer 3

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)

Erikaerikson

Yeah! I was messing up my table putting d-sm-block instead of d-sm-table-cell – Cataplasm

Answer 4

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

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/[email protected]/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>

Tinaret

Answer 5

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

Bravura

Answer 6

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.

Fierro

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) – Autotomize

Answer 7

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

Cheerful

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. – Subscript

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 – Warlock

Answer 8

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

Zootoxin

This won't help as data-visible has only a true or false option; nothing responsive / device related. – Fierro