Bootstrap basic table | How to design table using bootstrap 4
#Bootstrapbasictable #responsivebootstrap4
Bootstrap table classes tutorial in hindi.
Here you will see How to design bootstrap basic table, How to make text responsive in bootstrap 4.
Learn how to design a table using Bootstrap. Give different styles to table using table-striped, table-bordered, table-dark etc classes,
you will learn bootstrap table color and background color classes tutorial in Hindi,
Here I have discussed the following bootstrap 4 basic table classes in this video :
Bootstrap 4 Basic Table
*****************************************************************************
A basic Bootstrap 4 table has a light padding and horizontal dividers.
The. table class adds basic styling to a table
Striped Rows
The table-striped class adds zebra-stripes to a table
Bordered Table
***********************************************************************
The table-bordered class adds borders on all sides of the table and cells:
Hover Rows
The table-hover class adds a hover effect (grey background color) on table rows:
Black/Dark Table
The table-dark class adds a black background to the table:
Dark Striped Table
Combine table-dark and table-striped to create a dark, striped table:
Hoverable Dark Table
The table-hover class adds a hover effect (grey background color) on table rows:
Borderless Table
The table-borderless class removes borders from the table:
Contextual Classes
********************************************************************
Contextual classes can be used to color the whole table (table), the table rows (tr) or table cells (td).
The contextual classes that can be used are:
table-primary Blue: Indicates an important action
table-success Green: Indicates a successful or positive action
table-danger Red: Indicates a dangerous or potentially negative action
table-info Light blue: Indicates a neutral informative change or action
table-warning Orange: Indicates a warning that might need attention
table-active Grey: Applies the hover color to the table row or table cell
table-secondary Grey: Indicates a slightly less important action
table-light Light grey table or table row background
table-dark Dark grey table or table row background
Table Head Colors
*************************************************************************
The thead-darkclass adds a black background to table headers, and the thead-light class adds a grey background to table headers
Small table
The table-sm class makes the table smaller by cutting cell padding in half:
Responsive Tables
***********************************************************************
The table-responsive class adds a scrollbar to the table when needed (when it is too big horizontally):
You can also decide when the table should get a scrollbar, depending on screen width:
Class Screen width
table-responsive-sm less than 576px
table-responsive-md less than 768px
table-responsive-lg less than 992px
table-responsive-xl less than 1200px
Previous Video: • How to change text color in bootstrap | Ho...
Learn More: https://www.tutorialspoint.com/bootst...
Please Subscribe this Channel....!🙏
/ @miltoncoding
Like my Facebook Page...!
-------------------------------------------------------------
Milton Technical.