40

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!

1 Answer 1

84

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

3
  • 2
    Worked! Not sure how I missed trying this but thank you!
    – vbuser2004
    Jan 17, 2018 at 22:20
  • 1
    I have added to <th> this class (older bootstrap) and column vanished: <th class="hidden">. Just adding hidden property was not enough on older bootstrap. Hopefully this helps someone out there :-)
    – Honza P.
    Oct 29, 2021 at 10:36
  • 1
    This needed to go in both the header columns and the subsequent body td tags to work for me. Thanks! Nov 19, 2021 at 22:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.