Borys Tymiński Borys Tymiński - 13 days ago 6
CSS Question

Bootstrap offstet only on md doesn't work

Hello im trying to add offset only on medium device and hide this offset on others devices. I I looked through some others similar questions but any of them could solved my problem.

Here's code:

<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3" style="background-color: red"> 111 </div>
<div class="col-lg-4 col-md-4 col-sm-5 col-sm-offset-1" style="background-color: blue"> 222 </div>
<div class="col-lg-3 col-md-4 col-sm-1" style="background-color: black"> 333 </div>
<div class="col-lg-2 col-md-1 col-sm-2" style="background-color: orange"> 444 </div>
</div>
</div>


So the problem is that it add offset on every device not only on medium how it should be.

Screen on large: https://zapodaj.net/f4b34ebc771fb.png.html

Answer

I think offset needs to be "reset" on larger screens, otherwise it inherits the previous value. Using col-sm-offset-1 col-md-offset-0 seems to fix the issue.

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3" style="background-color: red"> 111 </div>
<div class="col-lg-4 col-md-4 col-sm-5 col-sm-offset-1 col-md-offset-0" style="background-color: blue"> 222 </div>
<div class="col-lg-3 col-md-4 col-sm-1" style="background-color: black"> 333 </div>
<div class="col-lg-2 col-md-1 col-sm-2" style="background-color: orange"> 444 </div>
</div>
</div>

Comments