Today I tried combining 1.9 layouts and Bootstrap 3 with mixed success.
My custom theme uses Bootstrap for all zones in Layout.cshtml. The content of a page is placed in a div that can be "col-md-12", "col-md-9" or "col-md-6" (depending on aside-first and aside-second).
I've used 1.9 layouts to create my content. So inside the div mentioned above, 1.9 layouts take over control using custom-grid.css found in module Orchard.Layouts.
This renders html like:
<div class=" span-12 cell">
The problem is that the class "row" is also used by Bootstrap. Specifically it defines "margin-left: -15px;" and "margin-right: -15px;". The result is that all content in layouts is shifted 15 pixels to the left compared to the
rest of the page.
Yes, I can probably fix this with an ugly "!important" line in my own stylesheet, but isn't this unwanted behaviour?
Why not prefix all orchard layout classes in custom-grid.css, like "ol-table", "ol-row", etc... to avoid conflicts?