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.

6 Comments

  • Just sharing my own experience here...

    Firstly, if you are already using bootstrap in your theme (meaning the dynamic layout will render in a bootstrap cell) you don't want Grid.cshtml to render another container because you'll end up with double padding. See http://getbootstrap.com/css/ and search for 'neither container is nestable'.

    Grid.cshtml in my theme only contains one line: @DisplayChildren(Model)

    Secondly, you are now using bootstrap classes but Parts.Layout.cshtml will still output default-grid.css to the client. Besides an unneeded http request, this stylesheet also messes up the 'row' class used by bootstrap. You need to get rid of this stylesheet.

    Parts.Layout.cshtml in my theme also online contains one line: @Display(Model.LayoutRoot)

    That's all that's needed to use bootstrap as your default grid system.

  • Thanks Steve. You're right, I had forgotten about parts.layout. I had forgotten about it, but yes, I had to override that too. I updated the post.

  • @Steven you are right about default-grid.css. I have opened an issue some days ago:https://github.com/OrchardCMS/Orchard/issues/5728

  • What is the best way to implement col-md-8 and col-md-4 (a bootstrap 2/3 1/3 layout) using the UI? So far I have been using to 6 column layouts and adding custom classes to each

  • @Bryan: I'm not sure I understand. Why can't you drag the separation between the columns so that they span widths of 8 and 4?

  • Wow.

    I didnt even know that was a feature. Perfect. Solved all of my problems.

Comments have been disabled for this content.