![[Solved]: Bootstrap col-xs-* not working](https://www.webdevsplanet.com/assets/images/gallery/bootstrap-col-xs-*-not-working.webp)
[Solved]: Bootstrap col-xs-* not working
In the recent past, I have found it a common occurrence where beginner bootstrap developers, and those who haven't used bootstrap for quite some time have a challenge in defining columns width for mobile devices.
Most of them have been using the class col-xs-* but it doesn't work for them.
Example
<!DOCTYPE html>
<head>
<title>Bootstrap columns</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
.row div{
border: 1px solid #ddd;
box-shadow: 1px 2px 3px #eee;
padding: 50px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container text-center">
<h1>Bootstrap Columns</h1>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">
<p>Div1 content</p>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<p>Div2 content</p>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<p>Div3 content</p>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<p>Div4 content</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
From the above code, the developer expects to have:
4 columns of equal width in laptops as in the screenshot below:
3 columns of equal width on tablet screens:
And lastly, 2 columns of equal width in smartphones as shown below:
But using the above code, that is not the case in smartphones. You will get full-width divs instead of two as in the image below:
The fix for the above code will be to change the instances of col-xs-* to col-* where * is a digit between 1 and 12. In our example, you just need to change col-xs-6 to col-6 in all its instances and it should work fine.
But to have a better understanding of the solution, it would be better to learn more about bootstrap columns.
Let's dive more into the Bootstrap grid system, and how it has evolved and changed over time, so as to identify the root cause of the problem.
Bootstrap Grid System
Bootstrap uses a grid system built with flexbox which allows up to 12 columns across the page.
This system is responsive, with its columns re-arranging and resizing themselves automatically depending on the device screen size.
The width of a column depends on the screen width or the width of the parent element. That is 1/12 of the screen width or of the parent element, eg a div.
Several columns can be grouped together into one wider column. A column made up of 12 columns will cover the whole width of the device screen, or of the containing element.
These columns are defined using HTML class attributes.
Over the years, Bootstrap has evolved through a series of updates and versions resulting in new changes in its grid system. Let's get a look at the grid system columns for versions 3, 4, and 5.
Bootstrap 3 grid classes
Below are bootstrap 3 classes for defining the width of the columns.
| Class | Description |
|---|---|
| col-xs-* | For screen width less than 768px (phones) |
| col-sm-* | For screen width equal to or greater than 768px (tablets) |
| col-md-* | For screen width equal to or greater than 992px width |
| col-lg-* | For screen width equal to or greater than 1200px (Laptops and desktops) |
In bootstrap 3, to define the width of an element(eg. a div) in terms of the number of columns, you add a class to it with the format col-*-*. The first * takes care of the responsivity(device-width) eg xs, md, etc. The last * takes the number of columns eg. from 1 to 12.
These divs need to be inside another div with class "row" <div class="row"></div>. The numbers in .col-*-* should always add up to 12 in each row.
So for instance, if you want to create 3 columns of equal width, to cover the whole width of the row, you do it as below:
<div class="row">
<div class="col-md-4">First div</div>
<div class="col-md-4">Second div</div>
<div class="col-md-4">Third div</div>
</div>
The above code will create 3 equal-width columns starting at small laptops and scaling to large desktops. On tablets and smaller devices, the columns will automatically stack.
As in our first example at the top, you can as well add more than one class in a div if you want the columns to span differently across different screen sizes. Let's say for instance you want 4 columns on laptops but 3 columns on tablets, etc.
Bootstrap 4 grid classes
In bootstrap 4, some changes were made to the grid system classes.
col-xs-*class was removed and replaced withcol-*col-xl-*was introduced- The breakpoints for the classes were changed
| Class | Description |
|---|---|
| col-* | Extra small devices with screen width less than 576px |
| col-sm-* | Small devices with screen width equal to or greater than 576px |
| col-md-* | Medium devices with screen width equal to or greater than 768px |
| col-lg-* | Large devices with screen width equal to or greater than 992px |
| col-xl-* | Extra-large devices with screen width equal to or greater than 1200px |
Bootstrap 5 grid classes
More changes were made to the grid system classes in bootstrap 5, with the introduction of col-xxl-* for extra-extra-large devices.
| Class | Description |
|---|---|
| col-* | Extra small devices with screen width less than 576px |
| col-sm-* | Small devices with screen width equal to or greater than 576px |
| col-md-* | Medium devices with screen width equal to or greater than 768px |
| col-lg-* | Large devices with screen width equal to or greater than 992px |
| col-xl-* | Extra-large devices with screen width equal to or greater than 1200px |
| col-xxl-* | Extra extra large devices screen width equal to or greater than 1400px |
The root cause of the problem with col-xs-* & the solution
In our example code at the top of the page, col-xs-* did not work as expected. The reason was because of versions conflict. We were using bootstrap version 5, where that class is not supported.
If we used exactly the same code on Bootstrap 3, it would work perfectly well with no issues.
Starting from Bootstrap 4, the class col-xs-* was removed and replaced with col-*. For Bootstrap version 4, or later, you should always use col-* for defining columns in extra small devices (mobile phones).
For bootstrap 3 and earlier, always use col-xs-*.
The solution is to either change the class or to change the bootstrap version for your website project, whichever works the best in your case.
In case you are wondering which version your website is built on, here is an article I wrote on how to check the bootstrap version your website is using.
That's all.
