+91 90691 39140 | +1 253 214 3115 | info@hub4tech.com | hub4tech

Bootstrap Table Video


Working of Bootstrap Table

Bootstrap provides a clean layout for building tables. The various elements supported by bootstrap table are as follow:
  • < table > : Wrapping element for displaying data in a tabular format
  • < thead > : Container element for table header rows () to label table columns.
  • < tbody > : Container element for table rows () in the body of the table.
  • < tr > : Container element for a set of table cells ( or ) that appears on a single row.
  • < td > : Default table cell.
  • < th > : Special table cell for column (or row, depending on scope and placement) labels. Must be used within a < thead >
  • < caption > : Description or summary of what the table holds.

Basic bootstrap Table

Basic table style with just some light padding and horizontal dividers, we add the base class of .table to any table as shown in the example below: < table class = "table" > The output table will be as follows:
Basic bootstrap Table

Bordered Bootstrap Table

By adding the .table-bordered class, you will get borders surrounding every element and rounded corners around the entire table as seen in the example below:
< table class = "table table-bordered" >
Bordered Bootstrap Table

The output table will be as follows:

Hovered Bootstrap Table

By adding the .table-hover class, a light gray background will be added to rows while the cursor hovers over them, as seen in the example below:
< table class = "table table-hover" >
Hovered Bootstrap Table

The output table will be as follows:

Contextual Classes

Contextual classes can be used to color table rows () or table cells (): The contextual classes that can be used are as below:
  • .active : Applies the hover color to the table row or table cell
  • .success : Indicates a successful or positive action
  • .info : Indicates a neutral informative change or action
  • .warning : Indicates a warning that might need attention
  • .danger : Indicates a dangerous or potentially negative action

Contextual Class Example

Consider the below illustration:
Contextual Class

The output table will be as follows:
Contextual Class



Is it Helpful?
Copyright ©2015 Hub4Tech.com, All Rights Reserved. Hub4Tech™ is registered trademark of Hub4tech Portal Services Pvt. Ltd.
All trademarks and logos appearing on this website are the property of their respective owners.
FOLLOW US