Bootstrap Table Related Classes

Notes:

Bootstrap Table related classes:

table: sets table width to 100% and ads top border to table rows

<table class="table">
<thead>
<tr>
<th>Some Text</th><th>Some Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tfoot>
</table>

table & table-striped : sets alternative background color to the rows of a table body tag

<table class="table table-striped">
<thead>
<tr>
<th>Some Text</th><th>Some Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tfoot>
</table>

table & table-bordered: creates a table with border
<table class="table table-bordered">
<thead>
<tr>
<th>Some Text</th><th>Some Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tfoot>
</table>

table & table-borderless : creates a table without border
<table class="table table-borderless">
<thead>
<tr>
<th>Some Text</th><th>Some Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tfoot>
</table>

table & table-hover : it ads hover effect to rows of a table body tag

<table class="table table-hover">
<thead>
<tr>
<th>Some Text</th><th>Some Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tfoot>
</table>

Table Color related classes:
- allow us to create colored tables

table-primary
table-secondary
table-success
table-info
table-warning
table-danger
table-light
table-dark

<table class="table table-primary table-hover">
<thead>
<tr>
<th>Some Text</th><th>Some Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tfoot>
</table>

Table heading row color related classes:
- allow us to set dark or light gray background color to table heading row

thead-dark
thead-light

<table class="table table-primary table-hover">
<thead class="thead-dark">
<tr>
<th>Some Text</th><th>Some Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tfoot>
</table>

Interview Questions: