In this article, I'll walk you through the process of creating an MVC layout within Umbraco. First, open the Umbraco backend. In the 'Settings' section in the left-hand main menu, right-click on the 'Document Types' folder to open the 'Create' dialog. First, we'll create a new folder to keep Umbraco organized.
Add a new name, I'm calling mine Master, but, you could use names like 'Global', or, 'Shared' instead.
After creating the folder, we need to create a 'Master' template. This is going to be the thing that all out templates inherit from.
Add a title to your document type, a template name and click 'Save' for now.
Clicking save will not only save your master document-type, it will also create a template for you within the templates folder. In case you are still unsure about what a template is, it's the thing that defines the HTML. Templates relate to MVC views. Instead of writing some custom HTML, for this guide, for laziness and speed, I'm going to copy the basic template HTML from the bootstrap site, which is available from this page, within the basic template section, here and the CDN links here.
For your reference, I'll add the code here as you'll also need to included a RenderBody(); call.
With the HTML in my template now looks like the above. We have now created our master layout within Umbraco. Next, we need to create a new template for our homepage.
Within the Umbraco 'Document Types' folder, right-click on the 'Master' type you created above and select 'Create'. Create a new document type and call it 'Homepage'.
Make sure that 'Allow As Root' is checked on your homepage document type, so you can a homepage template underneath your root site code node in the main content tree.
Now, if you look in the 'Templates' area, you can see a corresponding 'Homepage' template. If you click on the item you should see a template view that shows the HTML. Notice that the Layout property is set to null. We will now change this to use the 'Master' layout we created above.
In the 'Properties' tab, see the 'Master template' selector to 'Master' or the name you called your master document type and click the 'Save' button.
When you refresh the page, you should now be able to see that the Layout property has been set to the Master template!
If you now go into the 'Content' section on the left-hand side menu, if you right-click on the 'Content' menu item you should now be able to create your homepage. If you create a new homepage and set it as the home (see, How To Set The Start Page In Umbraco 7)
When you view your website, you'll see that your page is now using your layout!