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: