bootstrap-table-column-width v1.0.0

Responsive Table column width built with Bootstrap 5. Use one of the following classes to manipulate the width of the columns.

Check out Bootstrap Table column width Documentation for detailed instructions & even more examples.

Basic example

Bootstrap Table column with auto width:

<section>
    <!--Table-->
    <table class="table table-striped w-auto">
        <!--Table head-->
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Surname</th>
                <th>Country</th>
                <th>City</th>
                <th>Position</th>
                <th>Age</th>
            </tr>
        </thead>
        <!--Table head-->

        <!--Table body-->
        <tbody>
            <tr class="table-info">
                <th scope="row">1</th>
                <td>Kate</td>
                <td>Moss</td>
                <td>USA</td>
                <td>New York City</td>
                <td>Web Designer</td>
                <td>23</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Anna</td>
                <td>Wintour</td>
                <td>United Kingdom</td>
                <td>London</td>
                <td>Frontend Developer</td>
                <td>36</td>
            </tr>
            <tr class="table-info">
                <th scope="row">3</th>
                <td>Tom</td>
                <td>Bond</td>
                <td>Spain</td>
                <td>Madrid</td>
                <td>Photographer</td>
                <td>25</td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>Jerry</td>
                <td>Horwitz</td>
                <td>Italy</td>
                <td>Bari</td>
                <td>Editor-in-chief</td>
                <td>41</td>
            </tr>
            <tr class="table-info">
                <th scope="row">5</th>
                <td>Janis</td>
                <td>Joplin</td>
                <td>Poland</td>
                <td>Warsaw</td>
                <td>Video Maker</td>
                <td>39</td>
            </tr>
            <tr>
                <th scope="row">6</th>
                <td>Gary</td>
                <td>Winogrand</td>
                <td>Germany</td>
                <td>Berlin</td>
                <td>Photographer</td>
                <td>37</td>
            </tr>
            <tr class="table-info">
                <th scope="row">7</th>
                <td>Angie</td>
                <td>Smith</td>
                <td>USA</td>
                <td>San Francisco</td>
                <td>Teacher</td>
                <td>52</td>
            </tr>
            <tr>
                <th scope="row">8</th>
                <td>John</td>
                <td>Mattis</td>
                <td>France</td>
                <td>Paris</td>
                <td>Actor</td>
                <td>28</td>
            </tr>
            <tr class="table-info">
                <th scope="row">9</th>
                <td>Otto</td>
                <td>Morris</td>
                <td>Germany</td>
                <td>Munich</td>
                <td>Singer</td>
                <td>35</td>
            </tr>
        </tbody>
        <!--Table body-->
    </table>
    <!--Table-->
</section>

How to use?

1. Download MDB 5 - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

▶️ Subscribe to YouTube channel for web development tutorials & resources

More examples

Bootstrap Table column with minimal width:

Bootstrap Table column with fixed width:

Bootstrap Table column with text-nowrap:

More extended Bootstrap documentation