Detailed explanation of Bootstrap table usage

The following table lists some of the table elements supported by Bootstrap:

Table classes:

.table: Add basic styles to any <table> (only horizontal separators)
.table-striped: Add zebra-striped patterns within <tbody> (IE8 Not supported)
.table-bordered: Add borders to all table cells
.table-hover: Enable mouse hover state on any row within <tbody>
.table-condensed: Make the table more compact

Class: <tr>, <th>, and <td>

.active: Applies the hover color to rows or cells
.success: Indicates a successful operation
.info: Indicates an operation with information changes
.warning: Indicates a warning operation
.danger: Indicates a dangerous operation

<table class="table"> 
 <caption>Contextual Table Layout</caption> 
 <thead> 
  <tr> 
   th>Product</th> 
   <th>Payment Date</th> 
   <th>Status</th></tr> 
 </thead> 
 tbody> 
  <tr class="active"> 
   <td>Product1</td> 
   <td>23/11/2013</td> 
   <td>Pending shipment</td></tr> 
  <tr class="success"> 
   <td>Product2</td> 
   <td>10/11/2013</td> 
   <td>In transit</td></tr> 
  <tr class="warning"> 
   <td>Product3</td> 
   <td>20/10/2013</td> 
   <td>Pending confirmation</td></tr> 
  <tr class="danger"> 
   <td>Product4</td> 
   <td>20/10/2013</td> 
   <td>Returned</td></tr> 
 </tbody> 
</table> 

Responsive Table

By wrapping any .table in a .table-responsive class, you can allow the table to scroll horizontally to fit small devices (less than 768px). When viewing on a device larger than 768px wide on large devices, you will not see any difference.

That's all for this article. I hope it will be helpful to your learning, and I also hope that everyone will support the Shouting Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any copyright-infringing content, please send an email to: notice#oldtoolbag.com (When reporting, please replace # with @) for complaints, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.