Bootstrap 5 Table
Bootstrap 5 table is basically series of row and column that contains data into a cell. Using the bootstrap table class enhances the look of the table.
Basic Bootstrap Table
To create Bootstrap simple table,you have to add .table class to the <table> base class.
General Syntax
<table class="table"></table>Dark table
To create table with dark background ,use extra class .table-dark to the <table> base class i.e<table class="table table-dark">.
General Syntax
<table class="table table-dark"></table>Stripped Dark Table
Apply .table-striped class to <table> base class.These class adds zebra-stripes to a table.
General Syntax
<table class="table table-dark table-striped"></table>Bordered Table
Apply .table-bordered class to <table> base class.This class adds borders on all sides of the table and cells.
General Syntax
<table class="table table-bordered"></table>Bootstrap Responsive Table
To create Bootstrap 5 responsive table, wrap the table inside the external container and assign it .table-responsive class or .table-responsive{-sm|-md|-lg|-xl|-xxl} class to make the table responsive for a specific breakpoint. It creates responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
General Syntax
<div class="table-responsive">
<table class="table"></table>
</div>
<!-----Or------>
<div class="table-responsive table-responsive-{sm | md | lg | xl | xxl}">
<table class="table"></table>
</div>Bootstrap Table Head Color
Apply .table-light or .table-dark class to <thead> base class.It create table with light head using .table-light class while as table dark head by using .table-dark class.
General Syntax
<thead class="table-light"></thead>
<thead class="table-dark"></thead>Bootstrap 5 Table Contextual Classes
General Syntax
<table class="table-primary">...</table>
<!-- On rows -->
<tr class="table-primary">...</tr>
<!-- On cells (`td` or `th`) -->
<td class="table-primary">...</td>If you want to learn more about Bootstrap 5, please click here.
