Question

I created a web page using the bootstrap grid.
This page is rendered perfectly, as expected, when I just open it with a browser.
The container in bootstrap is smaller than the screen, everything is perfect.

BUT, if I render the exact same page as an application.html.erb layout in rails, it always send this message to the browser: @media (min-width: 1200px). This makes my page become a bit bigger than my screen. The rest is fine. Bootstrap works but the container width is too big! In the plain page it is 960px, which is perfect!

Why?

I don’t want this to happen! It is really weird. I read some posts where people say it happened to them, but I have the two pages side by side and “inspect element” shows @media (min-width: 1200px) in the css of the “row” class in the rails page and nothing in the other!

I am totally not willing to hack the bootstrap css. I would just like to figure out what is happening and fix it ! I would really like to use it as a stylesheet and not as a gem…

thanks so much in advance!

P.S.:
In rails, I copied the bootstrap folder in my /assets/stylesheets/ directory

Answer 1

How about adding your own style in the file ‘bootstrap_and_overrides.css.less’ (or any other you have)?
In my own CSS, I have this:

.container {
    width: 960px;
}

and the problem is solved. 🙂