How to work with Tables in Bootstrap?

Web Development
,
#1

Bootstrap provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows stripped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive.

Simple Table: The .table class is used to create a simple Bootstrap table. This class name is used with tag to create a table.

Syntax:

Table Contents...
  • Stripped rows: The .table-stripped class is used to create alternate dark and light rows. Use the combination of table and table-stripped classes within the <table> tag to create a striped table.

Syntax:

Table Contents...
  • Bordered Table: The .table-bordered class is used to add a border on all sides of the table and cell. Use the combination of table and table-bordered classes within the
tag to create bordered table.

Syntax:

Table Contents...
  • Black/Dark Table: The table-dark class is used to add the black background color of a table. Use the combination of table and table-dark classes within the
tag to create a dark table.

Syntax:

<table class="table table-dark"> Table Contents... <table>

  • Dark Stripped table: The table-dark and table-stripped classes are used to create a dark-striped table. Use the combination of table, table-dark, and table-stripped classes within the
tag to create the dark striped table.

Syntax:

<table class="table table-dark table-stripped"> Table Contents…<table>

Responsive Tables: The table-responsive class is used to create a responsive table. To make the table responsive on all viewport sizes, wrap the table within an opening and closing

tags, having class table-responsive within the opening
tag.

Syntax:

<div class="table-responsive"> Table <div>