How to change the Width of a Column in Bootstrap Table ? Last Updated : 05 Apr, 2024 Comments Improve Suggest changes Like Article Like Report In Bootstrap, the table is an important component used for organizing and displaying data in rows and columns. Below are the approaches to change the width of a column in the Bootstrap table: Table of Content Using Bootstrap Grid ClassesUsing width AttributeUsing Bootstrap Grid ClassesIn this approach, we are using Bootstrap's grid system with the .col-* classes to change the width of columns in the table. The col-2 and col-10 classes allocate 2 and 10 grid columns respectively, affecting the width of the columns within the Bootstrap grid layout. Example: The below example uses Bootstrap Grid Classes to change the width of a column in Bootstrap Table. HTML <!DOCTYPE html> <head> <title>Example 1</title> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .table { border: 2px solid #ff0000; } .table th, .table td { border-color: #ff0000; } </style> </head> <body> <div class="container"> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Using Bootstrap Grid Classes</h3> <div class="row"> <div class="col-2"> <table class="table table-bordered"> <thead> <tr> <th>Name</th> </tr> </thead> <tbody> <tr> <td>GeeksforGeeks</td> </tr> </tbody> </table> </div> <div class="col-10"> <table class="table table-bordered"> <thead> <tr> <th>Subject</th> </tr> </thead> <tbody> <tr> <td>Bootstrap</td> </tr> </tbody> </table> </div> </div> </div> </body> </html> Output: Using width AttributeIn this approach, we are using the width attribute directly in the <th> elements to set the width of each column as a percentage within a Bootstrap table. Example: The below example uses width Attribute to change the width of a column in Bootstrap Table. HTML <!DOCTYPE html> <head> <title>Example 2</title> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Using width Attribute</h3> <table class="table table-bordered border-dark"> <thead> <tr> <th width="10%">Name</th> <th width="30%">Subject</th> <th width="70%">Marks</th> </tr> </thead> <tbody> <tr> <td>GFG</td> <td>HTML</td> <td>50</td> </tr> </tbody> </table> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Align Text in Bootstrap Column ? A anjalibo6rb0 Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-Questions Similar Reads How to change font size of Table Content in Bootstrap 5? Bootstrap 5 has simple and flexible framework features to build responsive web applications. For changing the font size of table content, we can use Utility Classes or the Typography Class which allows us to adjust the font sizes according to the requirement. In this article, we will explore both ap 3 min read How to change column to row on small display in Bootstrap 4 ? The task is to switch a column of Bootstrap 4 grid layout to a row on small screen sizes.Syntax: <element class="col-md-4 col-sm-6 ...">...</element>Approach: To solve the given task we have to use Bootstrap 4's grid layout. The grid layout divides the entire visible row into 12 equally 3 min read How to fix the width of columns in the table ? Fixing the width of columns in a table involves setting a specific width for each column to maintain consistent sizing. This can be achieved using CSS properties like width on <th> or <td> elements, or using the <colgroup> and <col> tags to control column widths.Syntax<td 3 min read How to make a Row with 7 Equal Columns in Bootstrap ? Bootstrap is the styling framework to make the web application more attractive. To create a row with 7 equal columns in Bootstrap, you can use the grid system by dividing the row into 12 columns and assigning each column a class such as col-1 for each of the 7 columns. This way, each column will occ 2 min read How to Align Text in Bootstrap Column ? In Bootstrap Framework, we can align the text within the columns using various utility classes. To align text within a Bootstrap column, use the built-in utility classes such as text-start, text-center, and text-end for the left, center, and right alignment, respectively. Simply apply the desired cl 3 min read How to group elements in first table column with bootstrap-table ? Bootstrap is a front-end framework that is used for developing responsive and mobile-first websites. It is an open-source collection of tools that includes HTML and CSS-based design templates for typography, forms, buttons, navigation, and other interface components, as well as JavaScript plugins fo 4 min read Like