Таблицы

<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>

<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On Ячейкаs (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>

<tableclass="table table-striped"> ...
</table>

<tableclass="table table-dark table-striped"> ...
</table>

<tableclass="table table-success table-striped"> ...
</table>

<tableclass="table table-hover"> ...
</table>

<tableclass="table table-dark table-hover"> ...
</table>

<tableclass="table table-striped table-hover"> ...
</table>

<tableclass="table"><thead> ... </thead><tbody><trclass="table-active"> ... </tr><tr> ... </tr><tr><thscope="row">3</th><tdcolspan="2"class="table-active">Larry the Bird</td><td>@twitter</td></tr></tbody></table>

<tableclass="table table-dark"><thead> ... </thead><tbody><trclass="table-active"> ... </tr><tr> ... </tr><tr><thscope="row">3</th><tdcolspan="2"class="table-active">Larry the Bird</td><td>@twitter</td></tr></tbody></table>

@mixin table-variant($state,$background){.table-#{$state}{$color:color-contrast(opaque($body-bg,$background));$hover-bg:mix($color,$background,percentage($table-hover-bg-factor));$striped-bg:mix($color,$background,percentage($table-striped-bg-factor));$active-bg:mix($color,$background,percentage($table-active-bg-factor));--#{$variable-prefix}table-bg:#{$background};--#{$variable-prefix}table-striped-bg:#{$striped-bg};--#{$variable-prefix}table-striped-color:#{color-contrast($striped-bg)};--#{$variable-prefix}table-active-bg:#{$active-bg};--#{$variable-prefix}table-active-color:#{color-contrast($active-bg)};--#{$variable-prefix}table-hover-bg:#{$hover-bg};--#{$variable-prefix}table-hover-color:#{color-contrast($hover-bg)};color:$color;border-color:mix($color,$background,percentage($table-border-factor));}}

<tableclass="table table-bordered"> ...
</table>

<tableclass="table table-bordered border-primary"> ...
</table>

<tableclass="table table-borderless"> ...
</table>

<tableclass="table table-dark table-borderless"> ...
</table>

<tableclass="table table-sm"> ...
</table>

<tableclass="table table-dark table-sm"> ...
</table>

<divclass="table-responsive"><tableclass="table align-middle"><thead><tr> ... </tr></thead><tbody><tr> ... </tr><trclass="align-bottom"> ... </tr><tr><td>...</td><td>...</td><tdclass="align-top">Эта ячейка выровнена по верхнему краю.</td><td>...</td></tr></tbody></table></div>

<tableclass="table table-striped"><thead> ... </thead><tbody> ... <tr><tdcolspan="4"><tableclass="table mb-0"> ... </table></td></tr> ... </tbody></table>

<tableclass="table"><theadclass="table-light"> ... </thead><tbody> ... </tbody></table>

<tableclass="table"><theadclass="table-dark"> ... </thead><tbody> ... </tbody></table>

<tableclass="table"><thead> ... </thead><tbody> ... </tbody><tfoot> ... </tfoot></table>

<tableclass="table table-sm"><caption>List of users</caption><thead> ... </thead><tbody> ... </tbody></table>

<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>

<divclass="table-responsive"><tableclass="table"> ... </table></div>

<divclass="table-responsive"><tableclass="table"> ... </table></div><divclass="table-responsive-sm"><tableclass="table"> ... </table></div><divclass="table-responsive-md"><tableclass="table"> ... </table></div><divclass="table-responsive-lg"><tableclass="table"> ... </table></div><divclass="table-responsive-xl"><tableclass="table"> ... </table></div><divclass="table-responsive-xxl"><tableclass="table"> ... </table></div>

$table-cell-padding-y:.5rem;$table-cell-padding-x:.5rem;$table-cell-padding-y-sm:.25rem;$table-cell-padding-x-sm:.25rem;$table-cell-vertical-align:top;$table-color:$body-color;$table-bg:transparent;$table-accent-bg:transparent;$table-th-font-weight:null;$table-striped-color:$table-color;$table-striped-bg-factor:.05;$table-striped-bg:rgba($black,$table-striped-bg-factor);$table-active-color:$table-color;$table-active-bg-factor:.1;$table-active-bg:rgba($black,$table-active-bg-factor);$table-hover-color:$table-color;$table-hover-bg-factor:.075;$table-hover-bg:rgba($black,$table-hover-bg-factor);$table-border-factor:.1;$table-border-width:$border-width;$table-border-color:$border-color;$table-striped-order:odd;$table-group-separator-color:currentColor;$table-caption-color:$text-muted;$table-bg-scale:-80%;

$table-variants:("primary":shift-color($primary,$table-bg-scale),"secondary":shift-color($secondary,$table-bg-scale),"success":shift-color($success,$table-bg-scale),"info":shift-color($info,$table-bg-scale),"warning":shift-color($warning,$table-bg-scale),"danger":shift-color($danger,$table-bg-scale),"light":$light,"dark":$dark,);