Register to Better Coder! It's free.
Enjoy the premium features and succeed at every job interview.
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