Creating a table in Bootstrap is easy, but we need to have sufficient knowledge of Bootstrap to carry out this task.
Bootstrap 4 provides us with various classes, which are used to apply different stylings to our table. These classes perform functions such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, and so on. Bootstrap also provides classes for making tables responsive.
Now, we will learn how to create a simple table in Bootstrap 4.
We use the
.table class with the
table and its components
td tags to create a table in Bootstrap.
The example given below shows us how to create a table in Bootstrap 4:
Line 14: We write a
table with the
.table class in the code to set up our Bootstrap table.
Lines 15–22: We set up the table head. The
thead tag sets up the head for us.
tr stands for the table row and it sets up a row for us in the head, while the
th tag is a helping tag that sets up the table heads in the rows.
Lines 24–45: We create the table data. The
tbody tag helps in setting up a table body, the
tr tag sets up the rows, while
td, which stands for table data, sets up the data in the rows.
Line 45: This line indicates the closing tag of our table. The table ends here.
View all Courses