<aside> <img src="/icons/warning_yellow.svg" alt="/icons/warning_yellow.svg" width="40px" />
NOTE: This article is outdated and while some concepts may apply, the code samples may not work.
</aside>
I’ve been working on a redesign of my wedding website using Bootstrap with Umbraco and in my research process I was curious to see how other people have handled setting up Bootstrap with Umbraco. I didn’t find too many articles so I decided that I would write down my process in the hopes that it helps others and maybe people can even help me improve.
I’m going to assume that you have some experience with Umbraco and Bootstrap independently. We are going to keep this concentrated on how to use Umbraco and Bootstrap together which is mostly in our Settings section of Umbraco. We are going to be working with Templates and assuming that you already have a working knowledge of Umbraco Document Types and creating content within Umbraco. The instructions and razor/c# snippets you will see are for Umbraco 4.11.10. Please keep in mind that the process will be similar in newer versions of Umbraco, but your code will change.
Once you have a good understanding of how your website will work and your document types are setup in Umbraco, it is time to start setting up your template and CSS files. GetBootstrap.com has an abundance of documentation on how to use and customize Bootstrap for your needs. When starting a build, I use Bootstrap’s CDN for my CSS and JavaScript needs until I’m done building my site. Once the site is completed I go back and customize Bootstrap and download only the bits and pieces of the framework that I need for my specific website. This saves time downloading resources on page load since my files typically tend to be smaller this way.
When we begin setting up our template files in Umbraco we want to keep in mind the design. What pieces of the design are changing on the pages and what pieces are static. Typically you will always have some code that stays the same for your entire website. Usually this static code is your basic HTML markup. From my experience, the best way to start templates for your Umbraco site is to set up a “Master” template.
Log into Umbraco and head over to your Settings section. Right click on Templates and select Create from your drop down menu.
In the modal window that displays, enter the name of your template, Master, and click Create. Your new template will display under your Template folder. Now let’s create a ‘child’ template underneath this Master template. Right click on the Master template and click Create. Name your new template “Homepage” and click Save. Your new template will appear underneath the Master template.
Another way to confirm that your Homepage template is using the correct master template is by selecting the template and confirming the Master template drop down box has the correct template name listed. You can also see this reflected in the MasterPageFile=”~/masterpages/Master.master” or in newer versions of Umbraco the @{ Layout = “Master.cshtml” }.
Before we go any further, let’s make sure that your Homepage document type is using the new Homepage template that we just created. In order to do this, stay in the Settings section in Umbraco and in the Document Types folder find your Homepage document type that you created. Click on your Homepage Document Type and you will see on the Info tab that there is an Allowed Templates checkbox area. Select your Homepage template that we just created, double check that your Default Template updated to say the Homepage template as well (it should do this automagically) and then click the Save icon.
Now that your Homepage document type is using your Hompage template, lets make sure that you have a homepage in the Content section. Assuming this is a fresh Umbraco install, navigate to your Content section, right click on the Content folder in the top left and click Create in the drop down menu. Select your Homepage Document Type, give it a name, and click Create.
Lets go back to our templates and start writing our markup on our Master template. Our master is going to contain our basic HTML markup for our website. My preferred starting point is a mix up between Bootstrap’s basic template and HTML 5 Boilerplate’s out of the box markup. Since Bootstrap comes with normalize I don’t include normalize.css.
Let’s take a look at the markup I’ve used for my Master template. Templates have a toolbar that allow you to insert content placeholders, content areas, inline macros, macros, and Umbraco items. You will notice I’ve already inserted some content placeholders and an inline macro script. Some of these things may be a little above your skill level and that is okay. I did not know Razor when I started using Umbraco but as time goes on you get the hang of it with practice. They also include some helpful macro scripts out of the box.
<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><umbraco:Item field="pageTitleTag" useIfEmpty="pageName" runat="server" /></title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/main.css" >
<link href='<http://fonts.googleapis.com/css?family=Open+Sans:700>' rel='stylesheet' type='text/css'>
<asp:ContentPlaceHolder Id="cp_head" runat="server"></asp:ContentPlaceHolder>
<!--[if lt IE 9]>
<script src="<https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js>"></script>
<script src="<https://oss.maxcdn.com/respond/1.4.2/respond.min.js>"></script>
<![endif]-->
</head>
<body>
<asp:ContentPlaceHolder Id="cp_content" runat="server"></asp:ContentPlaceHolder>
<footer>
<umbraco:Macro runat="server" language="cshtml">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6">
@{
var pages = Model.AncestorOrSelf(1).Children.Where("Visible");
if(pages.Count() > 0)
{
<nav>
<ul>
<li><a href="@Model.AncestorOrSelf(1).Url">Home</a></li>
@foreach(var page in pages)
{
<li><a href="@page.Url">@page.Name</a></li>
}
</ul>
</nav>
}
}
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6">
<a href="@Model.AncestorOrSelf(1).Url"><img src="/css/images/logo.png" alt="B Loves K" class="logo"/></a>
<p>© Copyright @DateTime.Now.Year Mr. & Mrs. Smith<br />Website by <a href="<http://www.helloblake.com>" taget="_blank">HelloBlake</a>.</p>
</div>
</div>
</div>
</umbraco:Macro>
</footer>
<script src="<https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<asp:ContentPlaceHolder Id="cp_scripts" runat="server"></asp:ContentPlaceHolder>
</body>
</html>
</asp:Content>