Reputation: 958
I have an offset set for a medium sized screen but the offset still occurs when the screen is in large. Here is a snippet of my html, how can I solve this issue?
<div class="col-lg-6 col-sm-12">
<div class="row">
<div class="col-lg-12 col-md-3 col-md-offset-3"></div>
</div>
</div>
Upvotes: 2
Views: 843
Reputation: 5968
In bootstrap, device-size-specific classes affect the size of the class and all the higher sizes, unless overridden. So, of course, col-md-offset-3
will be present in large screens as well. You can "override" this class for large screens with col-lg-offset-0
.
<div class="col-lg-6 col-sm-12">
<div class="row">
<div class="col-lg-12 col-md-3 col-md-offset-3 col-lg-offset-0"></div>
</div>
</div>
From the docs:
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any
.col-md-
class to an element will not only affect its styling on medium devices but also on large devices if a.col-lg-
class is not present.
Upvotes: 4