Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

bootstrap
communitycreator

How to create a table in Bootstrap 4

Akande Olalekan Toheeb

Overview

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.

Create a simple table in Bootstrap

We use the .table class with the table and its components thead, tbody, tr, th, and td tags to create a table in Bootstrap.

The example given below shows us how to create a table in Bootstrap 4:

Code explanation

  • 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.

RELATED TAGS

bootstrap
communitycreator

CONTRIBUTOR

Akande Olalekan Toheeb
RELATED COURSES

View all Courses

Keep Exploring