Bootstrap 3 - Site get messed up at breakpoint 1200px

Hi i have a problem… i noticed when i resize my site to iPad and iPhone and all bigger screen everything works fine, however at 1200px resize when inspecting element in Google Chrome my site get messed up. Can somebody please help me? I don’t know what is causing this issue.


I get a “server not found” message on that link.

How about this one?

I am really confused every breakpoint on ipad, iphone, desktop looks fine but once it gets 1200px it breaks on the sides… i hope that you can see if you see what is causing it.



Unless I am mistaken it looks like you have changed the default bootstrap files because at 1200px you set the container to be 1272px wide which means it will be 72px too large for the window until the window is larger than 1272px.

As a rule of thumb the default bootstrap files should never be changed but instead over-ridden with custom.css

media="all"@media (min-width: 1200px).container {width: 1272px;}

I believe the original rule was 1170px width for container.

What is happening is that at 1200px the element called .container now sticks out of the elements that is sits in causing the display discrepancy.

Hi Mr Paul,

Thank you so much… the problem is gone. However i only need the container to be a width of 1272 pixels instead of 1170 because its to small now… what rule or what do i have to change?



You will need to change the min-width in that rule above to about 1300px so that there is room for the whole thing.


media="all"@media (min-width: 1300px).container {width: 1272px;}

You should remember though that the point of using something like bootstrap is that you work within it and not against it. If you are going to make up your own breakpoints then you are defeating the purpose of using a grid in the first place :smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.