How to set the size of a column in a Bootstrap responsive table

html

responsive-design

bootstrap

grid-system

byNikita Barsukov·Jan 19, 2025

Setting a column's size in a Bootstrap table involves using Bootstrap's grid classes or specifying custom widths in CSS. Here is a simplified example:

<table class="table table-responsive">
  <thead>
    <tr>
      <th class="col-md-2">Responsive</th>
      <th style="width: 100px;">Fixed</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

col-md-2 is used to create a responsive design, while style="width: 100px;" ensures a fixed width. Always keep in mind the varying screen sizes of different devices when setting the layout.

Be aware of the differences between Bootstrap 3 and 4. For example, Bootstrap 3 uses col-xs-* for mobile devices, while Bootstrap 4 relies on utilities like .w-25 for width adjustments. Look for live demonstrations and examples on resources like BOOTPLY to understand these concepts better.

Understanding the Grid System

There is a fundamental aspect of Bootstrap's responsive design philosophy: the grid system. Each row acts as a flex container, the total size of the columns within adds up to 12 units:

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
  <!-- 8 + 4 = 12, a perfect harmony! -->
</div>

Desktop-first: Start with .col-md-* or .col-lg-* for scaling in larger screens.
Mobile-first: Use .col-* or .col-sm-* to scale for smaller devices.
Equal distribution: Use .col to evenly divide the space.

Bootstrap 3 to 4: The Migration

Moving from Bootstrap 3 to 4 involves understanding important changes in the grid system:

Bootstrap 4 uses flexbox by default, providing flexible and advanced layout options but dropping support for IE8.
Bootstrap 4 discards the xs tier for a simplified syntax.
Bootstrap 4 introduces utility classes like .w-25, .w-50, .w-75, and .w-100 for defining width.

Customizing Responsiveness

When the built-in classes don't cut it, consider applying custom styles to boost control:

Inline styles: For precise sizes, use inline styles with pixel values.
Custom CSS classes: Create reusable solutions by defining custom classes in your stylesheets.
Media queries: Combine widths with media queries to ensure scalability across varying screen sizes.

Legacy Browser Support

Sometimes, supporting older browsers such as IE8 is essential. Use HTML5SHIV and Respond.js to bolster compatibility with earlier versions of web browsers.

explain-codes / Html / How to set the size of a column in a Bootstrap responsive table

Linked

Nested rows with bootstrap grid system?



Align two divs horizontally side by side center to the page using Bootstrap CSS



7 equal columns in bootstrap



Bootstrap 3 two columns full height



Bootstrap 3.0: How to have text and input on the same line?

