[Solved]: Bootstrap col-md-offset-* not working
John Mwaniki / Updated on 07 Jul 2024You could be using bootstrap col-*-offset-* class to push a div some columns to the right but that doesn't seem to work for you. In this article, I will explain why this is happening and how you can easily and quickly fix it.
But before then, I would like to take you through the bootstrap grid system, how it works and how the offsetting works. Feel free to scroll down to the solution if you already understand how bootstrap grid system works.
Bootstrap uses a grid system built with flexbox which allows up to 12 columns across the page.
The grid system is responsive, and the columns re-arranges automatically depending on the 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.
You can group several columns 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.
Bootstrap 3 grid classes
Below are bootstrap 3 classes for defining the width of the column.
| Class | Description |
|---|---|
| col-xs | For screens less than 768px width (phones) |
| col-sm | For screens equal to or greater than 768px width (tablets) |
| col-md | For screens equal to or greater than 992px width (small laptops) |
| col-lg | For screens equal to or greater than 1200px width (Laptops and desktops) |
In bootstrap 3, to define the width (number of columns) for an element eg a div, you add a class to it, taking the format col-*-*. The first * takes the device width class 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 for 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"> Div 1</div>
<div class="col-md-4">Div 2 </div>
<div class="col-md-4"> Div 3</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.
Over the years, Bootstrap framework has been going through a series of updates and these classes may vary depending on the bootstrap version(at the time of writing this article, Bootstrap 5 was the newest version) you are using.
Bootstrap 4 grid classes
In bootstrap 4, some changes were made to the grid system classes.
col-xsclass was removed and replaced withcol-col-xlwas 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 xxlarge 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 |
Regardless of the bootstrap version, you define the width of the column the same way. Just have a div with class = "row" and inside it add your column divs. In each div, add a class col-*-* where the first * is the responsiveness (eg. xs, sm, md, lg, xl, xxl) and the second * as the number of columns (a value between 1 to 12).
Bootstrap offset
You may want to position a column in such a way that there is an empty space on its left side. For example, in most login pages you see a centrally placed form with space on its left and on its right.
Bootstrap allows you to achieve this easily using the offset class in the column
The offset class is used to push columns over to the right for more spacing on the left.
To do offsetting in bootstrap 3, you add col-*-offset-* to the element class where the first * is the responsiveness (xs, sm, md, etc) and second * the number of columns you want to offset with (eg. 1, 2, 3, etc).
Example 1
<div class="row">
<div class="col-md-4 col-md-offset-4"> Div content</div>
</div>
In the above code, we have a column occupying a third(1/3) of the width which is centrally placed on the page. We have done an offsetting to it of 1/3(four columns) width to its left.
Example 2
Below is the code of a login page with an offset of 4 columns:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 3 column offsetting</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
background: #eee;
}
.logindiv{
background: #fff;
border: 1px solid #ddd;
box-shadow: 1px 2px 3px #ccc;
padding: 10px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="col-md-4 col-md-offset-4 logindiv">
<form id="loginForm">
<h3 class="text-center">Login Form</h3>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" id="password" placeholder="Your Password" required>
</div>
<div class="form-group">
<button class="btn btn-success btn-block">Log In</button>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Below is the screenshot of the page with the above code. You can see that on its left there is ample space which we have added by just including the class col-md-offset-4.
col-md-offset-* not working
You may find that the above code is not working and space is not added to the left side of your column.
The reason why it doesn't work is due to using the col-*-offset-* class in bootstrap 4 or a later version.
Since bootstrap 4, the col-*-offset-* class was replaced with offset-*-* where the first * is the responsiveness (sm, md, lg, etc) and the second * is the number of columns (eg. 1, 2, 3, etc).
To fix it for bootstrap 4 and 5, simply change the class to offset-md-*.
Example 1
<div class="row">
<div class="col-md-4 offset-md-4"> Div content</div>
</div>
Example 2
Below is an example login page in bootstrap 5 with offsetting.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 column offsetting</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
background: #eee;
}
.logindiv{
background: #fff;
border: 1px solid #ddd;
box-shadow: 1px 2px 3px #ccc;
padding: 10px;
margin-top: 100px;
}
.form-group{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="offset-md-4 col-md-4 logindiv">
<form id="loginForm">
<h3 class="text-center">Login Form</h3>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" id="password" placeholder="Your Password" required>
</div>
<div class="form-group">
<button class="btn btn-success w-100">Log In</button>
</div>
</form>
</div>
</body>
</html>
Below is a screenshot of the above code's page with an offset of 4 columns on the left side.
Conclusion
Bootstrap offsetting is a great way of pushing grid columns to the right, creating a space in the left. This is applicable in different scopes of web design such as when designing a login page, where you want the login form to cover only a small portion in the center.
When you search on the Internet how to offset, you are likely to find many answers telling you to add col-*-offset-* class in your div. This may or may not work depending on the bootstrap version you are using.
If you are using Bootstrap 4 or a later version (the latest at the time of writing this article was version 5), you need to add/change the offsetting class in the divs to offset-*-* where first * represents the responsiveness (eg. sm, md, lg, etc) while the second * represents an integer value. This integer value defines the number of columns you want to offset from the left. The number of your div's columns plus the number of columns you want to offset with should not exceed 12.
