Why Do Bootstrap Columns Not Wrap Correctly at XS Size?

Bootstrap Column Wrapping in the Smallest Size (XS)

Bootstrap, a popular front-end framework, provides a responsive grid system that allows developers to create flexible layouts that adjust to different screen sizes. However, a common issue encountered when using the smallest size breakpoint (XS) is that columns do not wrap as expected when the screen width decreases beyond a certain limit.

This issue occurs because columns with a combined width of 12 (e.g.,

) may not wrap correctly due to minimal padding on each column. Bootstrap's .col-xs-1 columns have a padding of 15px, which can cause them to wrap prematurely on narrow screens.

Known Issue:

This issue is acknowledged in the Bootstrap GitHub repository: https://github.com/twbs/bootstrap/issues/13221.

Solution:

To avoid this issue, consider the following suggestions:

• Do not use .col-xs-1 columns on very small screens: Instead, use larger columns such as .col-xs-2 or .col-xs-3.
• Consider the screen size: Determine if the screen will realistically be resized below 360px. In most cases, this is not likely.

Note for Bootstrap 4:

In Bootstrap 4, .col-xs-1 has been renamed to .col-1. The same issue may occur with .col-1 columns on screens less than 360px wide.

Related Issue:

Bootstrap users have also reported a similar issue with the grid breaking at the smallest size: https://stackoverflow.com/questions/29385993/bootstrap-grid-breaks-in-smallest-size

The above is the detailed content of Why Do Bootstrap Columns Not Wrap Correctly at XS Size?. For more information, please follow other related articles on the PHP Chinese website!