Hello Dear Readers, Today In this Post, You will learn Bootstrap 5 Tutorial In Hindi #25 | Table Classes Tutorial. Earlier I have shared Bootstrap 5 Tutorial In Hindi #24| List Group Classes. and now it’s time to Table Classes Tutorial.
In this tutorial, You will learn full Bootstrap 5. If you want to go deep into the tutorial so you can watch the full video which is below Hope it will help you all thank you for visiting.
In this tutorial, you will learn Bootstrap Tutorial In Hindi, Bootstrap 5 Table Classes Tutorial. Here You can learn what is a bootstrap framework,
what are the advantages of the bootstrap tutorial in Hindi. Make sure to Subscribe, Share the video, and Like it, for more tutorials in Hindi like this one!
Tables
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
Examples
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in.
Just add the base class .table to any, then extend with custom styles or our various included modifier classes.Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.
Creating Accented Tables
Bootstrap even provides a handful of contextual classes such as .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light and .table-dark to color tables, table rows or individual cells.
Creating Tables with Striped Rows
You can also add zebra-striping to the table rows within the
by simply adding an additional class
.table-stripedto the
.tablebase class
Creating Bordered Tables
You can add borders on all sides of the table and cells by adding the modifier class .table-bordered to the .table base class,
Enabling Hover State on Table Rows
element by adding the modifier class
.table-hoverto the
.tablebase class.
Creating Small or Compact Tables
You can also make your tables more compact and save the space through adding the modifier class .table-sm to the .table base class. The .table-sm class makes the table compact by cutting all cell padding in half.
Setting Table Head Colors
Similar to light and dark tables, you can use the modifier classes .table-light or .table-dark on the
element to make it appear in light or dark gray.
Creating Responsive Tables with Bootstrap
You can also create responsive tables to enable horizontal scrolling on small devices.
element and apply the .table-responsive class on it. You can also specify when the table should have a scrollbar, based on the viewport width (i.e. breakpoints), using the classes .table-responsive{-sm|-md|-lg|-xl}.