# Create a Responsive, Fluid HTML5/CSS3 based website on Umbraco 6 using Twitter Bootstrap
**by:** Saurabh Nandu     **in:**  [Programming](https://www.systenics.com/blogs/category/programming)     **tags:**  [*ASP.NET MVC*](https://www.systenics.com/blogs/tag/aspnet-mvc) ,  [*Razor*](https://www.systenics.com/blogs/tag/razor) ,  [*Umbraco*](https://www.systenics.com/blogs/tag/umbraco) ,  [*Bootstrap*](https://www.systenics.com/blogs/tag/bootstrap)

Building responsive, fluid HTML5/CSS3 based websites are a rage these
days delivering the best ROI for clients investing in building new web
sites. Building a single website which adapts itself depending on the
device screen size gives end users richer experiences. There are several
ways of building responsive websites, one of the popular ways to to use
an existing framework like Bootstrap from Twitter which provide base
scaffolding to quickly build responsive websites. In this blog post I am
going to focus on how to integrate **Twitter Bootstrap** with
Umbraco 6 and MVC/Razor display engine to build a HTML5/CSS3 based responsive
website. The goal is to build a simple single page responsive website similar
to the fluid [bootstrap sample](http://twitter.github.io/bootstrap/examples/fluid.html) and focus on the integration part so that you can build more complex layouts
as required. I plan to build upon this sample in future blog posts.

I am aware that there exists a Bootstrap package for Umbraco, but I
found that it has not been updated in a while so I choose to start with
a blank slate. I this blog post I am assuming that you have already
setup [Umbraco 6 with MVC](https://www.systenics.com/blogs/setting-up-umbraco-6-in-visual-studio-2012-for-mvc-development) as explained in the last blog post. The Visual Studio 2012 project that
I am using is already provided as a download in the previous article.

## Getting Started with Bootstrap integration

Once you have the Visual Studio 2012 project ready, head over to the [Bootstrap website](http://twitter.github.io/bootstrap/index.html) to [download](http://getbootstrap.com/2.3.2/) its zip file. Bootstrap provides a wide variety of customization options,
for the purpose of this article I am just using the default download, feel
free to customize your download as required. Extract the zip file to a temporary
folder so that its contents are available for us to import into Umbraco. You
can learn more about the files included in the bootstrap zip from [here](http://twitter.github.io/bootstrap/getting-started.html#file-structure), for the purpose of this blog I will focus on using only the required
files and minified versions of the same, since I do not intend to
customize the default Bootstrap scripts.

Run (Ctrl+F5) the Umbraco project from within Visual Studio to launch it
in the browser so that we can start importing the bootstrap items into
our project. If you have not created any content in your Umbraco then
you will be presented with the default **Set up your website** button and click on it to login to the admin site (credentials for the admin
site are given in the [previous article](https://www.systenics.com/blogs/setting-up-umbraco-6-in-visual-studio-2012-for-mvc-development)). In case you already have a site setup, then navigate to [http://<sitename>/Umbraco](http://sitename/Umbraco) to login into Umbraco admin by providing your credentials.

We need to import the Bootstrap JavaScript and CSS files into our
project so that we can use them. In Visual Studio Solution Explorer
window right click the project name and select**
Add – > New Folder** from the context menu and give the name **css** to the new
folder (if one does not already exist). Umbraco by default imports all style
sheet files stored in this folder. Right click the **css** folder
in Solution Explorer and select **Add** –> **Existing Item** from the context menu, navigate to the folder where you have extracted the
boostrap files and select both **bootstrap.min.css** and **bootstrap-responsive.min.css** files from the **css** folder. This step will import the boostrap
style sheets into your Visual Studio project as well as into Umbraco. Now
right click the **scripts** folder in Solution Explorer and select
**Add** –> **Existing Item** from the context
menu, navigate to the folder where you have extracted the bootstrap files
and select **bootstrap.min.js** file from the **js** folder. This step will import the bootstrap JavaScript file into Visual
Studio as well as Umbraco. This completes our integration of Bootstrap into
Umbraco we now move on to building our simple responsive website.

## Building Our Responsive, Fluid Sample

The simple website that I plan to build will have single Homepage as
shown in the [bootstrap sample](http://twitter.github.io/bootstrap/examples/fluid.html). Before you being building any website in Umbraco its very important
to identify the sites structure followed by the structure of each page.
Its essential that this information is thought through before hand so
that its easier to arrange the Umbraco doctypes and templates
accordingly. Figure 1 displays the layout for the Home page.

Figure 1 – Published Responsive Bootstrap enabled Umbraco website

As you can see from Figure 1 above the page has three distinct areas
primary message, 3 secondary messages and a sidebar. Both the Primary
Message and Secondary Message areas have title and content areas. Once
we have fixed the areas of the page we will define them as editable
below so that the content editors can edit the appropriate content based
on the structure of the page and not worry about its display format.

To get started with the custom editing, we need to add our custom
site-specific style sheet into to the project, this style sheet will
contains styles which are specific to our site. Right click the **css** folder in the Solution Explorer and select **Add** –>**
New Item** to open the Add New Item dialog. Select **Style Sheet** from
the templates selection and give the name **site.css** and click
**OK** to create the style sheet file. Copy paste the code from
listing 1 below into the **site.css** style sheet file open in
visual studio. Listing 1 contains all the styles required by our custom website,
feel free to update the style sheet as per your requirements.

```
body {
padding-top: 60px;
padding-bottom: 40px;
}

.sidebar-nav {
padding: 9px 0;
}

@media (max-width: 980px) {
/* Enable use of floated navbar text */
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
}
```

Listing 1: site.css custom style sheet

### Creating the Site base Document Type

Umbraco allows you to nest Document Types, its an important feature to
ensure that common properties for all documents are defined at the base
document level so that they are reused in child document types. Its very
similar to the master page concept in ASP.NET but different given the
fact that master pages deal with layouts (which are similar to the
Templates concept in Umbraco) while document types deal with defining
properties that will be available for the CMS Content Editor to edit. In
our case there are three properties that we need to define on the base
document type: SEO Title, SEO Description and umbracoNaviHide. The first
two properties are self explanatory and will map to title and
description meta tag in the content header. The 3rd property is specific
named Umbraco property. Basically if you set the umbracoNaviHide
property on any of the content pages it will make the page invisible
from the navigation menu’s even though the page remains published. This
property is optional but I find it a good practice to include it since
there are pages like Sitemap which need not show up in the navigation
menu but at the same time they are required.

In the web browser go to the Umbraco administration portal. Select **Settings** from the **Sections** as shown in figure 2 below.

Figure 2: Umbraco Admin Settings

Right click on **Document Types** under **Settings** and select **Create** from the context menu (as shown in figure
3) to create a new Document Type.

Figure 3: Create new Document Type

In the **Create** dialog provide the **Name** as
**[PageBase]** and click **Create** to create the
Document Template as well as a matching Template with the same name as shown
in figure 4. The Template will be used as our Master Layout.

Figure 4: Create Base Document Type

The **[Pagebase]** document type will open in the editor. Switch
to the **Generic properties** tab and click on the **Click here to add a new property** bar to add the 3 properties as listed below and **save** them.
Figures 5 to 7 show them being added.

Name: SEO Title
Alias: sEOTitle
Type: Textstring

Figure 5: SEO Title Property

Name: SEO Description
Alias: sEODescription
Type: textbox
multiple

Figure 6: SEO Description property

Name: umbracoNaviHide
Alias: umbracoNaviHide
Type: True/false

Figure 7: umbracoNaviHide property

Now that we have our base page setup we need to create Partial View for
our Site Navigation Header so that we can include it into our **[PageBase]** template. Right click **Partial Views** under **Settings** and select **Create** from the context menu. In the **Create** dialog give the **Name** as **Navigation** and
click **Create** to create the Partial view and open its editor.
Copy paste the code from listing 2 below into the editor and click the Save
icon to save the partial view.

```
@inherits Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>

@{
Layout = null;
var parent = Model.AncestorOrSelf(1);
string classSelectedMenuItem = "";

// Special Handling for Home page
if(Model.Name == parent.Name)
{
classSelectedMenuItem = "active";
}
}
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar"
data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Responsive Sample</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="@classSelectedMenuItem" >
<a href="@parent.NiceUrl()">@parent.Name</a></li>
@foreach(var page in parent.Children.Where(x => x.IsVisible()))
{
string strClassName = "";
if(@Model.Name == @page.Name)
{
strClassName = "active";
}
<li class="@strClassName">
<a href="@page.NiceUrl()">
@page.Name
</a></li>
}
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
```

Listing 2: NavigationHeader partial view

The above listing uses the Bootstrap Navigation bar to build the
navigation menu. We loop over all published and visible pages in Umbraco
to build the dynamic navigation menu.
Under **Settings**, expand **Templates** node and click on the**
[PageBase]** template to open it in Umbraco editor. This template with automatically
created when we created the Document Type with the same name. This template
will server as our Master Layout template. Copy Paste code from listing 3
into the editor and click the **Save** icon to save the template
in Umbraco.

```
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>@Umbraco.Field("sEOTitle")</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content='@Umbraco.Field("sEODescription")'>

<!-- styles -->
<link href="~/css/bootstrap.min.css" rel="stylesheet">
<link href="~/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="~/css/site.css" rel="stylesheet">
</head>

<body>

<nav>
@Html.Partial("Navigation", @Model.Content)
</nav>
<div class="container-fluid">
<div class="row-fluid">
@RenderSection("Content")
</div><!--/row-->

<hr>
<footer>
<p>&copy; Systenics Solutions 2013</p>
</footer>

</div><!--/.fluid-container-->
<script src="~/scripts/jquery-1.9.1.min.js"></script>
<script src="~/scripts/bootstrap.min.js"></script>
</body>
</html>
```

Listing 3  - [PageBase] template

In the above listing I have defined a HTML5 based responsive template
using Bootstrap classes where necessary. The appropriate Bootstrap style
sheets and JavaScripts have also been included into the template file. I
have defined one section **Content** on the page which will be
replaced by appropriate child pages. You will also find that I am using the
Umbraco Field method to define the SEO Title and SEO Description properties
that we defined on the **[PageBase]** document type on the page.

Now we need to define the Home Page document type, expand the **Document Types** node under **Settings**. Right click on the **[PageBase]** node and select **Create** from the context menu. Provide the
document name as **Home** and *uncheck* the **Create Matching template** checkbox and click **Create** button to create the **Home** document type under the **[PageBase]** document. We create
it under the **[PageBase]** document so that it can inherit properties
defined in the base document. Switch to the **Structure** tab
and select **Yes** for **Allow at root** so that
Home page can be the root of the site. **Save** the setting and
switch to the **Tabs** tab so that we can define the tabs required
for the Homepage. Add 3 new tabs named **Primary Message**, **Secondary Message** and **Sidebar** by entering the tab name and clicking **New Tab** button. Switch to the **Generic Properties** tab and add the
following properties.

Name: homePrimaryMessageTitle
Alias: homePrimaryMessageTitle
Type: Textstring
Tab: Primary Message

Name: homePrimaryMessageContent
Alias: homePrimaryMessageContent
Type: Richtext editor
Tab: Primary Message

Name: homeSecondaryMessageTitle1
Alias: homeSecondaryMessageTitle1
Type: Textstring
Tab: Secondary Message

Name: homeSecondaryMessageContent1
Alias:
homeSecondaryMessageContent1
Type: Richtext editor
Tab:
Secondary Message

Name: homeSecondaryMessageTitle2
Alias: homeSecondaryMessageTitle2
Type: Textstring
Tab: Secondary Message

Name: homeSecondaryMessageContent2
Alias:
homeSecondaryMessageContent2
Type: Richtext editor
Tab:
Secondary Message

Name: homeSecondaryMessageTitle3
Alias: homeSecondaryMessageTitle3
Type: Textstring
Tab: Secondary Message

Name: homeSecondaryMessageContent3
Alias:
homeSecondaryMessageContent3
Type: Richtext editor
Tab:
Secondary Message

Name: homeSidebar
Alias: homeSidebar
Type: Richtext editor
Tab: Secondary Message

Once you have saved all the properties your properties definition for
the **Home** document type should look like figure 8 below.

Figure 8: Properties defined for Home document type

Now let’s define the matching **Home** template so that we have
appropriate containers defined to display the properties that have been added
by us. Expand the **Templates** node under **Settings** and right click on the existing **[PageBase]** template and
select **Create** from the context menu to create a new template
using **[PageBase]** as the master template. Enter the template
name as **Home** and click **Create** button to
create it. You will see that the new template uses the**
[PageBase]** template as the master page template. Copy paste the code from Listing 4
below into the editor for **Home** template and click the **Save** icon to save the template.

```
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "PageBase.cshtml";
}
@section content{
<div class="span3">
<div class="well sidebar-nav">
@Umbraco.Field("homeSidebar")
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
<div class="hero-unit">
<h1>@Umbraco.Field("homePrimaryMessageTitle")</h1>
@Umbraco.Field("homePrimaryMessageContent")
</div>
<div class="row-fluid">
<div class="span4">
<h2>@Umbraco.Field("homeSecondaryMessageTitle1")</h2>
@Umbraco.Field("homeSecondaryMessageContent1")
</div><!--/span-->
<div class="span4">
<h2>@Umbraco.Field("homeSecondaryMessageTitle2")</h2>
@Umbraco.Field("homeSecondaryMessageContent2")
</div><!--/span-->
<div class="span4">
<h2>@Umbraco.Field("homeSecondaryMessageTitle3")</h2>
@Umbraco.Field("homeSecondaryMessageContent3")
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
}
```

Listing 4 – Home template

The above listing 4 lays out the appropriate HTML elements using
Bootstrap styles and also uses Umbraco **Field** method to provide
placeholder for content that will be provided by the end user. Now that we
have the **Home** template setup we need to update the **Home** document type so that it uses this template by default. Expand **Document Types** under **Settings** and then select the **Home** document type. Under the **Info** tab, **Default Template** choose **Home** from the drop down list and click **Save** icon. Now we are all set to build our content page for the **Home** document type. Click on **Content** icon (figure 2) under **Sections** and from the top tree view right click on **Content** under
**Content** title and select **Create** from the
context menu. Provide the **Name** as **Home** and
select the **Document Type** **Home** and click on **Create** button to create
the new content as shown in figure 9.

Figure 9 – Create Home content page

You will see that the Home content page is created but unpublished
(indicated by the greyed out icon for the page – figure 10) and you are
presented with tab to fill up the content for the page. These same tabs
will be available to your content editors to edit content for the page.
As you can see the content page really hides the inner implementation
details of the page and just presents the user with a friendly view to
edit content as per their requirements. The power of Umbraco CMS shines
in this aspect where you are given totally liberty to define the tabs
and its editable properties so that the content is presented to content
editors in a format they understand rather than training the content
editors to understand the limited structure other CMS systems provide.

Fill up the content of each of the **Home** page tabs and save
them as you proceed. Its important that you also fill up the **SEO Title** and **SEO Description** properties on the **Properties** tab. You can see that even though these properties were defined on the **[PageBase]** document type, they have been inherited by the **Home** document
type. Once you have filled all the information, click on the Save and Publish
icon (circled red in Figure 10) to publish the page and make it available
for everyone to view.

Figure 10 – Unpublished Home content page

Figure 10 shows the unpublished view of the **Home** content
page. Once the page is published you can see that Umbraco has provided a published
date as well as path to view the published page. If you click on that path
or access the Umbraco website Url in a new browser you will be able to view
the final result of the responsive website. You can use the **Responsive Design View** tool available in latest version of **FireFox** browser to
test the responsive capabilities of the site. Figures 11 to 13 show the Home
page rendered in different browser sizes.

Figure 11 – 320x480 Mobile view of the Home page

Figure 12 – 786x1024 Tablet view of the Home page

Figure 13 – 1280x600 Desktop view of the Home page

The above 3 figures show the mobile, tablet and desktop view of the
responsive Home page. You can see how the page menu automatically
changes to an icon on the mobile screen (Figure 11,12) and other content
elements are also laid out one below another on the mobile browser. You
can see similar fluid changes between the tablet and desktop screen
sizes.

## Summary

In this blog post I have integrated the popular Twitter Bootstrap
framework into Umbraco 6 CMS. I have covered all the steps related to
integration as well as building your first responsive, fluid Home page
in Umbraco 6. This blog post should serve as a starting point for anyone
interested in building responsive fluid layouts on Umbraco 6. In future
blog posts I plan to extend on this sample adding more features.

## Download

[Click here](https://www.systenics.com/media/CreatingResponsiveBootstrapUmbraco6.zip) to download the sample used in this article.