How do I Change the Width of a Column in Bootstrap Table?

In any application, tables are used to organize the data in a tabular form. There are columns and rows in a table. Depending on the situation, the column and row’s widths and heights can be changed. More specifically, the width of columns must be specified to adjust the table’s data appropriately. For this cause, the “w-*” class can be utilized.

This write-up will describe how to change the width of a column in the Bootstrap table.

How to Modify the Width of a Bootstrap Table Column?

To change the table’s column width, the Bootstrap “w-*” class can be used, where the asterisk “*” symbolizes the width value as “25”, “50”, “75”, and “100”, which represents the table’s column width as 25%, 50%, 75%, and 100%, respectively.

Example

Let’s implement an example to see how the “w-*” class works.

Step 1: Create a Table

Create a table by following the steps:

• First, create a table using the HTML “<table>” element.
• Add a “<thead>” tag for the table’s header part. This tag consists of a “<tr>” tag to create a row.
• The “<th>” specifies the column’s headings.
• Then, add the “<tbody>” part consisting of table data rows.
• The “<td>” elements specify the table data.

HTML

As a result, the added table will look like this:

Step 2: Changing the Width of the Table

To change the table column’s width, add the class “w-75” to the column:

As you can see, the width of the second column successfully became 75% of the table:

In this way, you can successfully change the width of a column in the Bootstrap table.

Conclusion

In Bootstrap, the “w-*” class changes the table width column. The “*” symbol indicates the width value, such as “w-25”, “w-50”, “w-75”, and “w-100”. To change the specific column’s width, first, create a table using the HTML “<table>” tag. Then, add the desired class from the mentioned classes to the table’s column. This write-up has explained how to change the width of a column in Bootstrap.