Combining 1.9 layouts and Bootstrap 3 = padding issues

Topics: Core, General, Writing themes
Jan 29, 2015 at 9:34 PM
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="table">
    <div class="row">
        <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?
Jan 30, 2015 at 5:59 AM
You dont change , just override the templates.
See Sipkes comments here
just search for bootstrap.
Jan 30, 2015 at 6:59 AM
Thanks, Giannik!

That post is exactly what I needed!

The post of Sipke on Nov 20, 2014 describe the steps to make layouts use bootstrap instead of custom-grid.css.