CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3gridmedia-queries
Ilja
Ilja

Reputation: 46479

Issues with bootstrap grid at 768px

I'm using suggested method for break points i.e. col-xs, col-sm, col-md across my website, that does work, but for some reason I'm experiencing issues at 768px which I believe should be a break point for col-xs

here is what happens

769px

enter image description here

768px

enter image description here

767px

enter image description here

Eventually, I expected 767px and 768px to display same layout.

Upvotes: 1

Views: 1185

Answers (2)

LucasG
LucasG

Reputation: 11

I solved this way

@media (max-width: 768px){
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 {
  width: 100% !important;
}
}

Upvotes: 1

Bieger Rodriguez
Bieger Rodriguez

Reputation: 58

just put for col-sm the value 12:

col-sm-12.

Its important to add a row too.

Your code is like this:

<div class="container">
<div class="row">
<div class="col-sm-12"><input ...></input></div>
<div class="col-sm-12"><input ...></input></div>
</div>
</div>

And maybe for md&lg too. For xs it looks automaticly like this, as you have seen.

And if you just want to make it happen since 768 and not before just toggle the class with JQuery.

$(function() {
    if($(window).width()<769)
    {
        $("classofthediv").removeClass("col-sm-6");
        $("classofthediv").addClass("col-sm-12");
    }
});

Maybe you need to add $( window ).resize if you want to get the effect even if you just resize the window.

$( window ).resize(function() {
if($(window).width()<769)
    {
        $("classofthediv").removeClass("col-sm-6");
        $("classofthediv").addClass("col-sm-12");
    }
});

Hope it works! :)

Upvotes: 0

Related Questions