How to use Bootstrap Grid Classes In Bootstrap

Using width Attribute

In 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/bootstrap@5.3.0/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;">w3wiki</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>w3wiki</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:

How to change the Width of a Column in Bootstrap Table ?

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 Classes
Using width Attribute

Tags:

#Bootstrap-Questions #Bootstrap #Web Technologies

Using width Attribute

How to use Bootstrap Grid Classes In Bootstrap

How to change the Width of a Column in Bootstrap Table ?

Similar Reads

Contact Us