How do I conditionally hide a column but keep it screen-reader accessible?

Asked on Sep 14, 2025

1 Answer

To conditionally hide a column while keeping it accessible to screen readers, you can use Bootstrap's utility classes. The `d-none` class hides the element visually, and the `sr-only` class (or `visually-hidden` in Bootstrap 5) makes it accessible to screen readers.

<!-- BEGIN COPY / PASTE -->
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col" class="d-none d-md-table-cell">Hidden Column</th>
                    <th scope="col">Visible Column</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td class="d-none d-md-table-cell">Hidden Content</td>
                    <td>Visible Content</td>
                </tr>
            </tbody>
        </table>
        <!-- END COPY / PASTE -->

Additional Comment:

Use `d-none` to hide elements on all screen sizes.
Use `d-md-table-cell` to show the element on medium and larger screens.
The `d-none` class ensures the column is hidden visually, while the `d-md-table-cell` class makes it visible on medium screens and above.
This approach keeps the content accessible to screen readers even when hidden visually.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions