Coding⏱️ 2 min read📅 2026-05-31
How to Fix: `col-xs-*` not working in Bootstrap 4
Bootstrap 4 col-xs-* not working
Quick Answer: {"fix": "Use col-sm-* or col-xm-* instead, as col-xs-* is deprecated in Bootstrap 4."}
📋 Table of Contents
In Bootstrap 4, the `col-xs-*` classes are not compatible with the new grid system. This is because the `xs` breakpoint has been removed in favor of using `sm`, `md`, and `lg` breakpoints.
💡 Why You Are Getting This Error
- The `xs` breakpoint was used to define the extra small screen size, but it has been deprecated in favor of using the `sm` breakpoint for small screens.
🛠️ Step-by-Step Verified Fixes
Method 1: Update to Bootstrap 4 Compatible Classes
- Step 1: Replace `col-xs-*` with `col-sm-*`, `col-md-*`, or `col-lg-*
Method 2: Use Grid System
- Step 1: Use the grid system to define your column widths. For example, `col-md-12` will take up the full width of the medium breakpoint.
✨ Wrapping Up
By following these steps, you should be able to resolve the issue with `col-xs-*` not working in Bootstrap 4.
❓ Frequently Asked Questions
The `xs` breakpoint was used to define the extra small screen size, but it has been deprecated in favor of using the `sm` breakpoint for small screens.
Step 1: Replace `col-xs-*` with `col-sm-*`, `col-md-*`, or `col-lg-*
Step 1: Use the grid system to define your column widths. For example, `col-md-12` will take up the full width of the medium breakpoint.
By following these steps, you should be able to resolve the issue with `col-xs-*` not working in Bootstrap 4.
🛠️ Related Fixes
How to Fix: Stuck in tutorial hell after 4 years: How do I b
Learn to build websites and think independently with coding skills.
How to Fix: Trying to sync mutliple audio tracks to a movie
Complex audio track synchronization can be challenging due to the larg
How to Fix: Failed to merge latest branches from upstream re
Update local repository with latest upstream branches.