to represent some data by row and column table is one of the most effective solution, Bootstrap providing some classes to make a Bootstrap 3 Responsive Table more attractive and useful, and the type of the tables are Responsive, Striped, Bordered, Hover, Condensed, and Contextual Table
Let’s discuss bootstrap table
A basic table of bootstrap
to give a smooth look to a table while making a design using bootstrap and light padding and only horizontal dividers, add the base class .table
to any
Responsive table of bootstrap
To make a responsive table in bootstrap you need to use take a parent div and put their class name .table-responsive
and inside that have to take the table and put a class name to the table as .table
here if the table width becomes bigger than the container then there is a scroll in the access that is a horizontal scroll that will appear to show the table.
Example:
...
Bootstrap Striped table
The striped table is providing a zebra colored row of a table and for that need to use the class name .table-striped
and .table
to the
Bootstrap Bordered table
the bordered table is used to make a table with the border around its td and table and to make that use .table-bordered
and .table
to the
Bootstrap Hover table
The bootstrap hover table is on hover the background of the hover row will be little dark and to make a table hover effect use the class .table-hover
and .table
to the
Bootstrap Condensed table
The bootstrap condensed table is cutting the half cell padding and make the table compact, to make a condensed table use the class .table-condensed
and .table
to the
Bootstrap Contextual table
The bootstrap contextual table is used to make the row and column background color, to make a Contextual table use the class name .active, .success, .info, .warning, .danger
to the
.active Applies the hover color to a particular row or 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
Example:
... | ... | ... | ... | ... |
Please provide your comment to make the site better. Thanks for reading.
Share The Post On -

Ads Blocker Detected!!!
We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.