CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
grasshopper
grasshopper

Reputation: 958

Bootstrap 3 offset ignores sizes

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

Answers (1)

abl
abl

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

Related Questions