← all Bootstrap classes list

Bootstrap class: .table-*-responsive

<table class="table table-responsive">
<!-- table content here -->
</table>

<table class="table table-sm-responsive"><!-- ... --></table>
<table class="table table-md-responsive"><!-- ... --></table>
<table class="table table-lg-responsive"><!-- ... --></table>
<table class="table table-xl-responsive"><!-- ... --></table>

Preview

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _tables.scss:167 */
.table-responsive {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix} {
      @include media-breakpoint-down($breakpoint) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057

        // Prevent double border on horizontal scroll due to use of `display: block;`
        > .table-bordered {
          border: 0;
        }
      }
    }
  }
}

Uses variables

Code copied to the clipboard.

Copying failed

/* _tables.scss:167 */
$breakpoint
$grid-breakpoints
$next:
$breakpoint
$grid-breakpoints
$infix:
$next
$grid-breakpoints
$infix}
$breakpoint

More in Bootstrap Tables

Bootstrap 4 & 5
Tailwind