My element template overrides for Bootstrap-happy Orchard dynamic layouts
The dynamic layouts feature in Orchard is pretty awesome, but using it with the Bootstrap 3 grid system may not be immediately obvious. The feature comes with a built-in grid system, but I prefer to use Bootstrap’s fluid grids. I’ve built a few template overrides that I use to bend Orchard layouts to use the Bootstrap grid.
Views/Elements/Grid.cshtml:
@using Orchard.Layouts.Helpers @{ var tagBuilder = TagBuilderExtensions
.CreateElementTagBuilder(Model, "section"); tagBuilder.AddCssClass("container-fluid"); } @tagBuilder.StartElement <div class="container intro-body"> @DisplayChildren(Model) </div> @tagBuilder.EndElement
Views/Elements/Column.cshtml:
@using Orchard.Layouts.Elements @using Orchard.Layouts.Helpers @{ var element = (Column) Model.Element; var columnSpan = element.Width; var columnOffset = element.Offset; var columnOffsetCss = columnOffset > 0
? "col-xs-offset-0 col-sm-offset-" + columnOffset
: default(string); var tagBuilder = TagBuilderExtensions.CreateElementTagBuilder(Model); tagBuilder.AddCssClass(
String.Concat(columnOffsetCss, " col-xs-12 col-sm-", columnSpan)); } @tagBuilder.StartElement @DisplayChildren(Model) @tagBuilder.EndElement
Notice how this sets-up breakpoints for the layout to break into full-width columns on “XS” screens.
Finally, I’ve also overridden Views/Parts.Layout.cshtml, in order to get rid of the default grid system’s stylesheet:
@Display(Model.LayoutRoot)
I also have a few overrides for form elements, that I could also publish if people are interested. Let me know in comments. I hope this helps.