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.