How do you style table header to be either light or dark using Bootstrap?
Experience Level: Junior
Tags: Bootstrap 4
Answer
In order to create a table with nicely styled header in either light or dark style, use standard html tags <table>
, <thead>
, <tr>
, <th>
and <td>
. Then add a class table
to the <table>
tag and add a class thead-light
or thead-dark
to the <thead>
tag.
<table class="table">
<thead class="thead-light">
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tr>
<td>11</td>
<td>Peter</td>
</tr>
<tr>
<td>12</td>
<td>Jane</td>
</tr>
</table>
Related Bootstrap job interview questions
How do you add zebra-striping and dark style to a table using Bootstrap?
Bootstrap 4 JuniorHow do you add zebra-striping to a table using Bootstrap?
Bootstrap 4 JuniorHow do you create a table with dark style using Bootstrap?
Bootstrap 4 JuniorHow do you style a table using Bootstrap?
Bootstrap 4 JuniorWhat sizes of Bootstrap buttons do you know and do you use them in a web page?
Bootstrap 4 Junior