# Create a Responsive, Fluid HTML5/CSS3 based website on Umbraco 7 using Bootstrap 3.0 Framework **by:** Saurabh Nandu **in:** [Programming](https://www.systenics.com/blogs/category/programming) **tags:** [*ASP.NET MVC*](https://www.systenics.com/blogs/tag/aspnet-mvc) , [*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 which provide base scaffolding to quickly build responsive websites. In this blog post I am going to focus on how to integrate **Bootstrap v3.0.X** with Umbraco 7 to build a HTML5/CSS3 based fluid responsive website. The goal is to build a simple single page responsive web page similar to the Jumbotron [bootstrap sample](https://getbootstrap.com/examples/jumbotron/) 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. This article assumes you have setup Umbraco 7 in VS 2013 as given in my previous blog post [Setting up Umbraco 7 in Visual Studio 2013 for MVC 4 development](https://www.systenics.com/blogs/setting-up-umbraco-7-in-visual-studio-2013-for-mvc-4-development). ## Getting Started with Bootstrap integration Open up the Umbraco 7 project in Visual Studio 2013 and start the Nuget Package Manager from **Tools** menu –>** Library Package Manager** –> **Package Manager Console**. On the Package Manager Console Screen, type the command** Install-Package bootstrap**. Please refer to Figure 1 to see the command being executed. Figure 1: Install Bootstrap from Nuget The above command will install the latest version of Bootstrap, currently its 3.0.3. The folder structure of the nuget package contents are different from the folder structure required by Umbraco. So we will have to move some files around to ensure that the bootstrap files are available within the Umbraco framework to be used. This nuget package creates the folders **Content** (for CSS files), **Fonts** (for Font files) and places JavaScripts in the **Scripts** folder in the root of the project. Umbraco needs style sheet files to be placed in the **CSS** folder. In the **Solution Explorer** window, expand the **Content** folder and select the **bootstrap-theme.min.css** and **bootstrap.min.css** style sheet files and drag them into the the **CSS** folder below as shown in Figure 2 below. This action will copy over the style sheet files we want to use into the correct Umbraco folder, the Font files and Script files are in their correct folders and do not need any change. Now bootstrap is ready to be used within our Umbraco template. Figure 2: Solution Explorer – after copy of 2 style sheet files. ## Building Our Responsive, Fluid Sample The simple web page that I plan to build will have single Homepage as shown in the [Jumbotron bootstrap sample](https://getbootstrap.com/examples/jumbotron/). 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 3 displays the layout for the Home page. Figure 3: Home Page layout As you can see from Figure 3 above the page has three distinct areas primary message, 3 secondary messages and login control. 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. Since we are trying to build a replica of the Jumbotron Bootstrap sample, the best way to start is to analyze its source and build appropriate parts in Umbraco. You should follow this method whenever you try to implement a template which has predefined HTML/CSS provided with the designer. Open the Jumbotron sample in the browser** right-click** and select **View Source** from the context menu. This source will act as our guide while we try to build our template. The neat feature of Umbraco is that it can create identical HTML from its template without injecting any tags of its own. This is a great feature when you want to implement a new website based on designs provided by a designer. Listing 1 below shows the source code for the Jumbotron sample. ``` Jumbotron Template for Bootstrap

Hello, world!

This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.

Learn more »

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

View details »

``` Listing 1: Jumbotron bootstrap sample source code. We need to analyze this source to figure out all its external dependencies like images, style sheets and javascripts to ensure we have that available on our project structure. On analyzing the elements in Listing 1 above we can see that there is a reference to a **favicon.png, ie8-responsive-file-warning.js** and ** jumbotron.css** files which we do not have in our project. The **favicon.png** and **ie8-responsive-file-warning.js** we will omit as its not necessary for this sample, you can provide it and change its path as necessary in your project. The missing **jumbotron.css** file is what we need to add to our project. ### Add new Stylesheet to Umbraco We need to add our custom **jumbotron.css** 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 **jumbotron.css** and click **OK** to create the style sheet file. If you are viewing the source of the jumbotron sample is a browser like chrome, then click **jumbotron.css** file referenced to see its source. Copy paste the code from the css source (as shown in listing 2 below) into the **jumbotron.css** style sheet file open in visual studio. Listing 2 contains all the styles required by our custom website, feel free to update the style sheet as per your requirements. Save the file and we are ready to start building templates in Umbraco. ``` /* Move down content because we have a fixed navbar that is 50px tall */ body { padding-top: 50px; padding-bottom: 20px; } ``` Listing 2: Jumbotron.css style sheet ## Creating the Site base Document Type Now that we have addressed all the external dependencies of the site, its time to start working on the Umbraco templates. Run the Umbraco project in Visual Studio, it will launch the site in the default browser and inform you that site needs to be setup. Click on the **Setup your new website** button to be redirected to Umbraco administration site. Provide the credentials Username: **root** and Password: **@123test** (if you are using code from my previous sample) to login to the administration control panel. The first step for creating a new site is to create a new **Document Type** in Umbraco. 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. Click on **Settings** –>** Document Type (…)** –> **+ Create** as shown in figure 4 below to create a new Document Type. Figure 4: 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 5. The Template will be used as our Master Layout. Figure 5: Create new [PageBase] document type and Template 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** link to add the 3 properties as listed below and **save** them. Figures 6 to 8 show them being added. Name: SEO Title Alias: sEOTitle Type: Textstring Figure 6: SEO Title Property Name: SEO Description Alias: sEODescription Type: textbox multiple Figure 7: SEO Description Property Name: umbracoNaviHide Alias: umbracoNaviHide Type: True/false Figure 8: 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 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 3 below into the editor and click the **Save** button to save the partial view. ``` @inherits Umbraco.Web.Mvc.UmbracoTemplatePage @* Macro to display child pages below the root page of a standard website. Also highlights the current active page/section in the navigation with the css class "current". *@ @{ @*Get the root of the website *@ var root = CurrentPage.AncestorOrSelf(1); } ``` Listing 3: Navigation Partial View The above listing uses the Bootstrap Navigation bar component to build the navigation menu. We loop over all published and visible pages in Umbraco to build the dynamic navigation menu. You can see that rest of the HTML code is copied from the Jumbotron source which we had opened in the browser. Under **Settings**, expand **Templates** node and click on the** [PageBase]** template to open it in Umbraco editor. This template was 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 4 into the editor and click the **Save** button to save the template in Umbraco. ``` @inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ Layout = null; } @Umbraco.Field("sEOTitle") @Html.Partial("Navigation", @Model.Content)
@RenderSection("jumbotron")
@RenderSection("content")
``` Listing 4: [PageBase] template In the above listing I have defined a HTML5 based responsive template using Bootstrap classes where necessary. If you compare the code from Listing 3 below with the source from Listing 1 you will find that I have kept the HTML which will repeat on all pages in the** [PageBase]** template and the home page specific HTML has been replaced by RenderSection razor commands which will be rendered from the child templates. I have also changed the path for all local CSS and JavaScript files so that they point to the right local folder. The appropriate Bootstrap style sheets and JavaScripts have also been included into the template file. 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 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 2 new tabs named **Primary Message** and **Secondary Message** by entering the tab name and clicking **New Tab** button. Switch to the **Generic Properties** tab and add the following properties. These properties have been defined looking at the Jumbotron example and every bit of information that we want to be editable on the Home page needs to be defined as a property in the document type definition. Name: homePrimaryMessageTitle Alias: homePrimaryMessageTitle Type: Textstring Tab: Primary Message Name: homePrimaryMessageContent Alias: homePrimaryMessageContent Type: Richtext editor Tab: Primary Message Name: homePrimaryLink Alias: homePrimaryLink Type: Content Picker Tab: Primary Message Name: homeSecondaryMessageTitle1 Alias: homeSecondaryMessageTitle1 Type: Textstring Tab: Secondary Message Name: homeSecondaryMessageContent1 Alias: homeSecondaryMessageContent1 Type: Richtext editor Tab: Secondary Message Name: homeSecondaryMessageLink1 Alias: homeSecondaryMessageLink1 Type: Content Picker Tab: Secondary Message Name: homeSecondaryMessageTitle2 Alias: homeSecondaryMessageTitle2 Type: Textstring Tab: Secondary Message Name: homeSecondaryMessageContent2 Alias: homeSecondaryMessageContent2 Type: Richtext editor Tab: Secondary Message Name: homeSecondaryMessageLink2 Alias: homeSecondaryMessageLink2 Type: Content Picker Tab: Secondary Message Name: homeSecondaryMessageTitle3 Alias: homeSecondaryMessageTitle3 Type: Textstring Tab: Secondary Message Name: homeSecondaryMessageContent3 Alias: homeSecondaryMessageContent3 Type: Richtext editor Tab: Secondary Message Name: homeSecondaryMessageLink3 Alias: homeSecondaryMessageLink3 Type: Content Picker Tab: Secondary Message Once you have saved all the properties your properties definition for the **Home** document type should look like figure 9 below. Figure 9: Home document type properties 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 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 5 below into the editor for **Home** template and click the **Save** button to save the template. ``` @inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ Layout = "PageBase.cshtml"; } @section jumbotron{

@Umbraco.Field("homePrimaryMessageTitle")

@Umbraco.Field("homePrimaryMessageContent")

Learn more »

} @section content{

@Umbraco.Field("homeSecondaryMessageTitle1")

@Umbraco.Field("homeSecondaryMessageContent1")

View details »

@Umbraco.Field("homeSecondaryMessageTitle2")

@Umbraco.Field("homeSecondaryMessageContent2")

View details »

@Umbraco.Field("homeSecondaryMessageTitle3")

@Umbraco.Field("homeSecondaryMessageContent3")

View details »

} ``` Listing 5: Home template The above listing 5 lays out the appropriate HTML elements using Bootstrap styles and also uses Umbraco **Field** razor 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** button. Now we are all set to build our content page for the **Home** document type. Click on **Content** icon, right click on **Content** and click on **Home** from the menu to create a new **Home** page as shown in figure 10. Figure 10: Add Home page This action will create a new content page with the Home document type. Provide the **Name** as **Home** and fill up the properties for the page. The properties that we defined in the Home document type are shown as tabs. 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 button to publish the page and make it available for everyone to view as shown in Figure 11 below. Figure 11: Save home page properties Figure 11 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 12 to 14 show the Home page rendered in different browser sizes. Figure 12: 320x480 Mobile view of the Home page Figure 13: 768x1024 Tablet View Figure 14: Full HD 1900x1080 view 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 12,13) 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 Bootstrap framework into Umbraco 7 CMS. I have covered all the steps related to integration as well as building your first responsive, fluid Home page in Umbraco 7. This blog post should serve as a starting point for anyone interested in building responsive fluid layouts on Umbraco 7. In future blog posts I plan to extend on this sample adding more features. ## Download [Click here](https://www.systenics.com/media/CreatingResponsiveBootstrapUmbraco7.zip) to download the sample used in this article. ## Related pages on Systenics - [AuctionWorx development and customization](https://www.systenics.com/auctionworx/development-and-customization/) ## Need help implementing this for your business? Our team helps plan, build, and scale marketplace and auction workflows. Explore [industry solutions](https://www.systenics.com/solutions/), [platform products](https://www.systenics.com/products/), and [custom development services](https://www.systenics.com/auctionworx/development-and-customization/) tailored to your goals. [Book a quick consultation](https://outlook.office365.com/owa/calendar/sales1@systenics.net/bookings/).