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.

Bootstrap table with styled header
<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>

Comments

No Comments Yet.
Be the first to tell us what you think.
Bootstrap for beginners
Bootstrap for beginners

Are you learning Bootstrap ? Try our test we designed to help you progress faster.

Test yourself