Bootstrap 4 tables are generally a series of rows and columns that contains data inside the table cell. Bootstrap table class is used to enhance the table layout and also make it device friendly i.e responsive.
To create bootstrap basic table,assign.table
class to the <table>
base class.
General Syntax
<table class="table"></table>
Source Code
<div class="container table-responsive my-2">
<table class="table ">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Work</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Smith</td>
<td>Jane</td>
<td>Web Designer</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Doe</td>
<td>Graphics Designer</td>
</tr>
<tr>
<td>3</td>
<td>Andre</td>
<td>Ren</td>
<td>Developer</td>
</tr>
</tbody>
</table>
</div>
Try it yourself
Note:Bootstrap basic table is created easily ,by assigning .table
to the <table>
base class.
Assign .table
& .table-dark
to the <table>
base class to create dark background of the table.
General Syntax
<table class="table table-dark"> </table>
Note: To create table with dark background,assign .table
& .dark-table
to the <table>
base class.
To create bootstrap stripped row, assign .table-striped
class to <table>
element base class. These class adds zebra-stripes to a table.
General Syntax
<table class="table table-striped"></table>
Note: Striped row of table can be created by assigning .table
, & .table-striped
to the <table>
element base class.
Assign .table-bordered
class to <table>
element base class.This class adds borders on all sides of the table and cells.
General Syntax
<table class="table table-bordered"> </table>
Note:Bootstrap bordered table can be created very easily by assigning .table
& .bordered-table
class to the <table>
element base class.
Assign .table-responsive
class to the <table>
element base class to create responsive table.Basically,it adds horizontal scrollbar when when content size is too big horizontally.
General Syntax
<table class="table table-responsive "> </table>
Note: To create bootstrap responsive table, assign .table
, .table-responsive
to the <table>
base class.
To provide table head color,assign either .table-light
or .table-dark
class to <thead>
element base class.The .table-light
class is used to create light table head while .table-dark
class is used to create
dark table head.
General Syntax
<thead class="table-light"></thead>
Note: The .table-light
& .table-dark
classes are used to create light and dark table head correspondingly.
General Syntax
<tr class="table-*"> </tr>
Note: To provide table background color, assign table contextual classes to the <table>
element base class.