Hide Table Columns using Bootstrap 4

Question

I know that Bootstrap 4 uses new display utilities to show or hide information based on the screen size. My question is how to make these work with a table? I want to remove columns as the screen size is smaller.

I have used "d-xs-none" and it does not have any effect. However, when I use "d-sm-none" the column is removed when the size is 'sm' or larger (the exact opposite of what I need). If I try "d-none d-xs-none" the column never shows up. As in: <th class="text-center d-none d-xs-none" scope="col">Location</th>

Basically, can you show me an example of hiding a table column when resizing the browser to a mobile device? Thank you for your help!

Answer 1

Try using d-none d-sm-table-cell for table columns. Colums having these classes won't be shown on xs.