Bootstrap table Tutorials

bootstrap 4 table example
bootstrap 4 table example
bootstrap 4 table example

Hello friends today in this article we will learn what is bootstrap 4 tables and how to create bootstrap 4 tables and about bootstrap 4 table classes.

For Basic bootstrap 4 table we use class .table. See Demo Under

Bootstrap 4 Bordered Table

For bordered table we use class .table-bordered , in this class in table add border from all sides.

<table class="table table-bordered" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Name </td>
    <td>Class</td>
    <td>Mobile </td>
    <td>Address</td>
  </tr>
  <tr>
    <td>Sanjay </td>
    <td>10th</td>
    <td>9999999999</td>
    <td>Varanasi</td>
  </tr>
  <tr>
    <td>Mohan </td>
    <td>10th </td>
    <td>9999999999</td>
    <td>Varanasi </td>
  </tr>
  <tr>
    <td>Rajnarayan</td>
    <td>10th</td>
    <td>9999999999</td>
    <td>Varanasi</td>
  </tr>
</table>

Bootstrap 4 Striped Rows Table

For striped rows we use class .table-striped , we use striped rows for alternate rows color.

<table class="table table-striped" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Name </td>
    <td>Class</td>
    <td>Mobile </td>
    <td>Address</td>
  </tr>
  <tr>
    <td>Sanjay </td>
    <td>10th</td>
    <td>9999999999</td>
    <td>Varanasi</td>
  </tr>
  <tr>
    <td>Mohan </td>
    <td>10th </td>
    <td>9999999999</td>
    <td>Varanasi </td>
  </tr>
  <tr>
    <td>Rajnarayan</td>
    <td>10th</td>
    <td>9999999999</td>
    <td>Varanasi</td>
  </tr>
</table>

Bootstrap 4 Hover Rows Effect Table

For Hover rows effect we use class .table-hover , we use this table class for grey hover background color.

<table class="table table-hover" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Name </td>
    <td>Class</td>
    <td>Mobile </td>
    <td>Address</td>
  </tr>
  <tr>
    <td>Sanjay </td>
    <td>10th</td>
    <td>9999999999</td>
    <td>Varanasi</td>
  </tr>
  <tr>
    <td>Mohan </td>
    <td>10th </td>
    <td>9999999999</td>
    <td>Varanasi </td>
  </tr>
  <tr>
    <td>Rajnarayan</td>
    <td>10th</td>
    <td>9999999999</td>
    <td>Varanasi</td>
  </tr>
</table>

Bootstrap 4 Dark Table

Just add class .table-dark to create dark table .

<table class="table table-dark" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Name </td>
    <td>Class</td>
    <td>Mobile </td>
    <td>Address</td>
  </tr>
  <tr>
    <td>Sanjay </td>
    <td>10th</td>
    <td>9999999999</td>
    <td>Varanasi</td>
  </tr>
  <tr>
    <td>Mohan </td>
    <td>10th </td>
    <td>9999999999</td>
    <td>Varanasi </td>
  </tr>
  <tr>
    <td>Rajnarayan</td>
    <td>10th</td>
    <td>9999999999</td>
    <td>Varanasi</td>
  </tr>
</table>

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Shyamlal Maurya Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Shyamlal Maurya
Guest

Very Nice Article Thanks for the post Electronic Jacquard