Bootstrap-Table Tutorials and Live Examples

Bootstrap Table - examples & tutorial. Basic & advanced usage - Material Design for Bootstrap

Table allow you to manage your content and huge amount of data and present it in a clear and orderly way.

Bootstrap Table allow a lots of predefined features like Responsive Table and the possibility of manipulating the table styles. By Using Bootstrap Table You can also use an advanced DataTables options like sort, search or pagination.

Basic Bootstrap table has a light padding and only horizontal dividers. Use Basic Class =”Table”

<table width="100%" cellpadding="0" cellspacing="0" class="table">
  <thead>
    <tr>
      <th width="14%">#</th>
      <th width="30%">First Name</th>
      <th width="38%">Last Name</th>
      <th width="18%">Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Sandeep </td>
      <td>Chauhan</td>
      <td>12</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Shubham</td>
      <td>Singh</td>
      <td>12</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Sanjay </td>
      <td>Sharma</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

Bootstrap Striped Rows Example

By Using Striped rows table class (.table-striped) we create alternate color rows.

<table width="100%" cellpadding="0" cellspacing="0" class="table table-striped">
  <thead>
    <tr>
      <th width="14%">#</th>
      <th width="30%">First Name</th>
      <th width="38%">Last Name</th>
      <th width="18%">Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Sandeep </td>
      <td>Chauhan</td>
      <td>12</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Shubham</td>
      <td>Singh</td>
      <td>12</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Sanjay </td>
      <td>Sharma</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

Bootstrap Bordered Table Example

By Using Class .table-bordered its create border in all sides of table and cells.

<table width="100%" cellpadding="0" cellspacing="0" class="table table-bordered">
  <thead>
    <tr>
      <th width="14%">#</th>
      <th width="30%">First Name</th>
      <th width="38%">Last Name</th>
      <th width="18%">Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Sandeep </td>
      <td>Chauhan</td>
      <td>12</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Shubham</td>
      <td>Singh</td>
      <td>12</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Sanjay </td>
      <td>Sharma</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

Bootstrap Hover Rows Table Example

Bootstrap .table-hover class create Grey Background Hover Effect on Row Hover.

<table width="100%" cellpadding="0" cellspacing="0" class="table table-hover">
  <thead>
    <tr>
      <th width="14%">#</th>
      <th width="30%">First Name</th>
      <th width="38%">Last Name</th>
      <th width="18%">Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Sandeep </td>
      <td>Chauhan</td>
      <td>12</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Shubham</td>
      <td>Singh</td>
      <td>12</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Sanjay </td>
      <td>Sharma</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

Leave a Reply

avatar
  Subscribe  
Notify of