Umbraco Block Grid And Bootstrap Easy Example

These are the 6 easy steps to configuring Umbraco Block Grid to work with Bootstrap CSS Grid and also have Block Grid components render in the Back-Office:

Step 1. Define Block Grid Row and Content Component Element Types

Step 2. Create a Block Grid Component to Utilise New Element Types

Step 3. Customise Block Grid Views to Use Bootstrap CSS

Step 4. Create Custom Component HTML for Block Grid Components

Step 5. How to Render Umbraco Block Grid Components in Back Office

Finally we create a couple of simple custom Block Grid components to show off our new Grid and Umbraco back office component rendering,

After creating a new Components folder within the Element Types folder, the next step is to add 2 new Element Types to represent each component.  You can see we have created a Banner Element Type and also a WYSIWYG rich text component.

Each has several properties, for example the Media Selector data type is used for the Image and the Umbraco Rich Text editor for the Banner word content.

Step 2 - Create A Block Grid Content Control for Layout and Custom Components

Now we have our Grid and Custom Components set up, the next step is to create a custom version of the Umbraco Block Grid Data Type and add our Layout and Custom Components to it. Working within the Settings > Data Types folder, select the existing Block Grid Data Type and create a copy called BlockGridContentPage.

You should end up with something like this:

Next, create two Groups called Layout and Components. Once the folders are created, click the Add Block button and add the Layout Element Types to the Layout group and the Custom Component types to the Components group:

Step 3 - Add Bootstrap Grid CSS to Umbraco Block Grid

In step 3 we customise the standard Umbraco Block Grid partial views to render HTML that supports the Bootstrap CSS grid. This step involves working in the Settings > Partial Views > Block Grid folder, replacing each of the following Partial View files with the code provided:

@using Umbraco.Extensions
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridModel>
@{
    if (Model?.Any() != true) { return; }
}

@await Html.GetBlockGridItemsHtmlAsync(Model)

@using Umbraco.Cms.Core.Models.Blocks
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<IEnumerable<BlockGridItem>>
@{
    if (Model?.Any() != true) { return; }
}

@foreach (var item in Model)
{
    bool isGrid = item.Areas?.Count() > 0;

    if (isGrid)
    {
        string screenWidth = item.Content.Value<string>("screenWidth", fallback: Fallback.ToDefaultValue, defaultValue: "central");
        string containerClass = screenWidth == "Central" ? "container" : "container-fluid";
        string backgroundColor = item.Content.Value<string>("backgroundColor", fallback: Fallback.ToDefaultValue, defaultValue: "FFFFFF");
        @:<div class="@containerClass" style="background-color:#@backgroundColor">
    }

    var partialViewName = "blockgrid/Components/" + item.Content.ContentType.Alias;
    try
    {
        @await Html.PartialAsync(partialViewName, item)
    }
    catch (InvalidOperationException)
    {
        <p>
        <strong>Could not render component of type: @(item.Content.ContentType.Alias)</strong>
        <br />
        This likely happened because the partial view <em>@partialViewName</em> could not be found.
        </p>
    }

    if (isGrid)
    {
        @:</div>
    }
}

@using Umbraco.Extensions
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem>

@{
    if (Model?.Areas.Any() != true) { return; }
}

@foreach (var area in Model.Areas)
{
    @await Html.GetBlockGridItemAreaHtmlAsync(area)
}

@using Umbraco.Extensions
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridArea>

@{
    string colClass = $"col-md-{Model.ColumnSpan}";
}

<div class="@colClass">
    @await Html.GetBlockGridItemsHtmlAsync(Model)
</div>

The final element of this step is to reference the Bootstrap Grid CSS file within the site Master / Default page.  For simplicity we have extracted a version of the Bootstrap Grid CSS and added it into the Settings > Stylesheets > Bootstrap folder. Here is a link to download the bootstrap grid css only.  Dont forget to add a link to this new stylesheet to your Master page:

<link rel="stylesheet" href="/css/bootstrap/grid.css"/>

Step 6 - How to Render Block Grid Components in the Umbraco Back Office

The final cherry on the top of our Bootstrap CSS Block Grid component cake is the ability to render our custom components in the Umbraco Back Office. Out of the box Umbraco does not render your components in their finished form in the back-office, meaning content managers have to constantly switch between the back office and the page preview function - bad vibes!

Lucky for us there is an Umbraco package called Umbraco.Community.BlockPreview that enables custom component rendering in the back office. Install this component to your Umbraco solution via NUGET.

It is possible to point your Custom Components in the Block Grid to a Partial View / CSS style sheet specifically for rendering in the Umbraco Back Office.  The problem with this approach is that you end up with 2 Partial Views and 2 CSS files for each component - one to render it in the back office and the other to render it on the live website - not good for DRY principles!

The Block Preview package adds a plugin to Umbraco that links your Custom Components within your Block Grid to a generic Block Preview code block that acts as a proxy to your website Component Partial View meaning you can create just one Partial View / CSS file per component and have it used to render in the Back Office and the live website.

To use Block Preview, simply revisit your new Block Grid data type (created in step 3) and after selecting one of your custom components (e.g. Banner or WYSIWYG), click on the Advanced tab and point each at the Plugin block-preview.html file that is added when you install the Block Preview package:

You're done! You have completed all the steps required to easily create custom components for Umbraco Block Grid and have them render using the Bootstrap CSS grid system.

The last thing to do is to add your new Block Grid component to one of your Page Types and start using it.

Here you can see how easy and simple it makes adding new rows with viewable components in the Umbraco back-office: