How to Create More Content Layout Options in Sitefinity

add more content layout options - nesting Bootstrap grid layouts in Sitefinity Written By Jake Picken

In this Sitefinity Minute, we are going to show you how to get additional layouts for your page content without having to get a developer involved. 

Sitefinity uses BootStrap’s grid system, which uses a series of containers, rows, and columns to layout and align the content on your page. 

Sitefinity comes with built-in layout widgets that make it easy to build out pages and provides consistent structure and design throughout your site. 

There may be some scenarios where you want additional content layouts that aren’t offered with Sitefinity out-of-the-box – to do this there are really two things you can do, you can have a developer create the custom grid layout that you are wanting, or you can get creative with the out-of-the-box layout options and nest one layout inside the other.  In this video, we will show you how to do that.

On the right side of your page editor, you will see tabs for content and layout. Under layout, you will find all the available grid layout widgets.  These top layouts are custom layouts that our developers created for our site; the layouts further down are the layouts that come included with Sitefinity. 

In this example, we are going to nest a grid-6+6 inside another 6+6 layout. 

First, we need to add a container to our page which provides some padding on both sides of our content. You will notice that if you add up the numbers in each of these grid layouts, they will equal 12, which is the width of our container. 

To get two equal columns, we will drop the grid-6+6 layout into the container. And then to divide column two here into another two equal columns, we will nest a grid 6+6 layout. 

This is going to give us three columns, the first with a width of 6, the second with a width of 3, and another column with a width of 3.  

So really, we just created a new layout option, a grid-6+3+3, just by nesting grid widgets that are available. 

You can now start adding in your content and preview the page to see how it looks. 

Now you know how easy it is to create additional layouts for your content in Sitefinity, and even better, you don’t even have to get a developer involved. 

And that’s the Sitefinity Minute. 


Looking for More Custom Content Layout for Sitefinity? 

In some situations, nesting layout widgets just won't cut it.  If you are needing a developer to create additional layouts that you can easily drag and drop onto a page, then reach out to our team.  We can create the custom content layout you need, as long as it falls into Bootstrap's Grid Layout System.