Learn how you can use an MVC approach to apply a Bootstrap template to your Sitefinity website in this step-by-step tutorial.

Have you ever been given a template that someone else coded to make a Sitefinity site from? If yes, this article is for you. We’ll explore how to apply Timer, a Free Responsive Multi Page Personal Bootstrap Template to a Sitefinity project using an MVC approach with a Bootstrap package.

It is very easy to apply a Bootstrap template downloaded from the internet to a Sitefinity project when using MVC. First we setup the project and combine the CSS and JS resources and refer them in the template file. Step two is to setup the template in Sitefinity and in step three we create the pages and the dynamic modules they use. In general each page has several grid widgets which are placeholders with HTML tags and CSS classes and content widgets that are placed in the grid widgets. Content widgets can be content blocks, which are basically free HTML, or widgets used to display the content items of content modules.

On the other hand, working with MVC is always super fun. It is developed for the frontend users of Sitefinity and has adopted the latest frontend trends for managing frontend assets. Also, you have full control over the markup that widgets generate. Let’s start with the setup.

Project and Package Setup

1. Create a Sitefinity project.

2. Copy Timer template frontend assets to <root>/ResourcePackages/Bootstrap/assets/project.

Import the CSS files in <root>/ResourcePackages/Bootstrap/assets/project/sass/main.scss.

In <root>/ResourcePackages/Bootstrap/jsfiles.json list the JS files from <root>/ResourcePackages/Bootstrap/assets/project/js.

After that open a command line console in <root>/ResourcePackages/Bootstrap, install the package with npm install, run grunt iconfont task to copy the font files to <root>/ResourcePackages/Bootstrap/assets/dist folder and grunt to compile the CSS and JS files to the <root>/ResourcePackages/Bootstrap/assets/dist folder.

3. After that open default.cshtml (<root>/ResourcePackages/Bootstrap/Mvc/Views/Layouts/) and add references to *.css and *.js files. Then add placeholders for the header, page body and footer and the respective HTML tags around them.

4. Place the favicon.ico file in the root of the project (under <root>) and after application restart, the site will start using it. 

Check out this video for more on the project setup:

Page Templates Setup

5. default.cshtml is the base of the default page template in Sitefinity under Design > Page Templates.

Add the reusable parts of Timer template to the default page template in Sitefinity under Design > Page Templates to be used by all pages.

Open the default page template (Sitefinity under Design > Page Templates) and add container grid widget to header and footer placeholders.

The footer consists of Bootstrap columns so put grid-8+4 grid widget in it. The rest of the footer is HTML code, which can be placed in Content block widgets (it's easier to place the HTML directly in the HTML view of the Content block widget).

6. The next thing to do is choose which navigation template to use. The most suitable one turns out to be NavigationView.Horizontal.cshtml (from Bootstrap package).

In <root>/ResourcePackages/Bootstrap/MVC/Views make a copy of NavigationView.Horizontal.cshtml and name it NavigationView.TimerHorizontal.cshtml. After that change the markup of the template to be like the markup of Timer navigation. Tip: Make sure to remove the jQuery reference from the Navigation template since it is already loaded in the Layout file.

7. Next we have to create two grid widgets that are commonly used to wrap different parts of the pages.

All pages contain section elements (<section>). Create a grid widget "Section.html" and place it in <root>/ResourcePackages/Bootstrap/GridSystem/. In some cases a <div> HTML tag with CSS class row is used to wrap a section. Create a grid widget called row (<root>/ResourcePackages/Bootstrap/GridSystem/row.html).
Tip: It is important to put "sf_colsIn" class to the <div> html tag in order to create a placeholder in Sitefinity UI.

8. Most of the sections in Timer template have IDs assigned to them. These IDs are used in the CSS to define CSS selectors. Multiple instances of the same grid widget are used on the same page, which is why there can’t be unique ID attributes for every dragged grid widget. Therefore the IDs from Timer template have to be replaced with CSS classes. Open <root>/ResourcePackages/Bootstrap/assets/project/css/main.css and change the id selectors to class selectors with “sf-“ prefix so they can be distinguished from the native Timer template CSS styles. After that these classes can be easily applied to certain grid widgets dragged on the page through Sitefinity UI to alter their looks. For example, if Timer template contains a section element with id="hero-area" (<section id=”hero-area”>) the ID will be replaced with CSS class "sf-hero-area" (<section class=”sf-hero-area”>).

9. There are repeated section elements among the pages. The repeated sections have to be placed in the templates in order to be used by all pages.

All pages have a "call-to-action" section, so a "call-to-action" section is added to the default page template in Sitefinity under Design > Page Templates.

Seven pages have a "global-page-header" section, therefore another template based on the default one is created. It is called default-with-global-header and the "global-page-header" section is placed in it.
The "global-page-header" consists of a wrapping <div> with CSS class, a <h2> heading and a breadcrumb. Drag a grid-12 grid widget and set the CSS class needed in the widget designer in its Classes property. For the heading drop a Content block widget in the grid-12 grid widget and make it editable on pages from its actions menu. In the template the common markup is specified, and on each page the particular Content block is edited to write the particular page name.

For the breadcrumb use a MVC breadcrumb with a different template as done for other widgets before.

Now that the common elements are all setup let’s proceed with individual pages.

Check out this video for more on page templates:

Page Creation and Setup

10. Home

a) The home page contains a header with information about the designer. To create this header use a Content block widget and paste the required HTML in it.

b) Next comes the “About me” information, which consists of some text and an image. To accomplish this part of the design drop a section grid widget and in the widget designer set sf-about in the section property. After that place a container grid widget and then place another grid-6+6 grid widget in it. The two columns of grid-6+6 grid widget have col-sm-6 CSS classes so click Edit  and add them to Column 1 and Column 2 properties. The layout is ready so drop two Content blocks widgets in each column. The first Content block widget contains text and simple markup with classes. The one in the second column contains an image and some markup. Add the image from the Insert image tool of the Content block widget.

TIP: The Image widget is not used in this particular case, because some additional markup around the image is needed and the easiest way to add it is directly in the Content block widget.

c) For the next section add a section grid widget and set the CSS class needed as was done in the previous step. After that drag a container grid widget in the section grid widget. This section consists of artworks with title, image and details information. In order to add new items and modify existing ones easily, create a dynamic module called Artwork, with content items "works" and with the following fields:

-  Title - Type: Short text

-  Information - Type: Long text

-  Description - Type: Short text

-  Image - Related media (images, videos, files)

After creating the module create a few module items in Sitefinity under Content > Artwork. Then modify the List and Details templates of the module, to suit the design. For every custom module List and Detail widget templates are created in Sitefinity under Design > Widget Templates. The name of the templates are List.work (List.[name-of-content-item]) and Detail.work (Detail.[name-of-content-item]). To modify the default List or Detail view or to create new ones, create a folder with the name of the content item work (not the content type!) in <root>/ResourcePackages/Bootstrap/Mvc/Views/ and inside <root>/ResourcePackages/Bootstrap/Mvc/Views/work add the templates following the naming convention.

To modify the List view add a cshtml file List.work.cshtml (because the content items name is work) in <root>/ResourcePackages/Bootstrap/Mvc/Views/work. To create another list or detail template create a .cshtml file and follow the naming convention “List.” or “Detail.” + [name-of-the-template] + “.cshtml”. [name-of-the-template] will be shown in the UI.

Create List.WorkList.cshtml in <root>/ResourcePackages/Bootstrap/Mvc/Views/work and modify its markup. After that drop a works widget to the page, open its designer, choose WorkList list template and configure it to open single items on Artworks details page.

d) For the last section add a section grid widget and a container grid widget in it and setup the CSS classes. This section consists of two rows with three column elements on each row. The elements have col-md-4 col-lg-4 col-xs-12 classes assigned to them. Again, use the default grid widgets that come with “-md” classes and manually add the other resolution classes through the grid widget designer. The rest is achieved with Content block widgets in each column element.

Artwork Details

11. Create the page and drag a works widget. Create a new Detail template like done for the List view and configure the works widget to use it.

Check out this video to see more on the home and artworks detail pages:

12. About

a) Edit the Content block widget in the “global-page-header” section to write the page title.

b) Setup the next section with a section grid widget and another container grid widget in it and configure them as needed. The section has two columns so drag a grid-6+6 grid widget in the container grid widget. The first column contains an image. Use the Image widget to upload the image to Sitefinity libraries and add it to the page. The image has an img-responsive class. Add the class through the Image widget designer.

Tip: All static content (for example text, that shouldn't be part of any module) can be placed directly in a Content block widget.

c) Setup the next section with a section grid widget and set the CSS classes needed (about-feature clearfix). After that drop a Content block widget and add the HTML for this section through the HTML view of the Content block widget editor.

d) Setup the next section with a section grid widget and another container grid widget in it and configure them as needed. The "Meet the team" section can be handled with a dynamic module. Create a module Team with content items "teammembers" and fields:

- Title (Name) - Type: Short text   

- JobTitle (Job Title) - Type: Short text   

- ShortInfo (Short info) - Type: Long text        

- Facebook - Type: Short text        

- Twitter - Type: Short text  

- LinkedIn - Type: Short text

- Google (Google+) - Type: Short text

After the module is created create a List template, change its markup and configure it as was done for the Artworks module.

13. Service

a) “What we love to” and “Our happy clients” sections are similar to section that have already been setup on other pages.

b) There is another list with artworks on this page. This list contains only featured works. Go to Sitefinity Content > Artwork and mark all featured works with tag Featured. Drop a works widget on the page and narrow the items to be displayed to the ones tagged with Featured. In the List settings tab set four items to be displayed and configure the list template. In the Single item settings tab configure single items to be opened in Arwork details page.

14. Gallery

a) This page contains an image gallery with artworks. So create a custom Gallery template List.WorksGallery.cshtml in <root>/ResourcePackages/Bootstrap/Mvc/Views/ImageGallery and modify its markup.

Create a new Artworks album in Sitefinity Content > Images and configure the Image gallery widget to display images from this selected gallery only.

15. Blog Full

In the Blog posts module add a custom field from type Related images in Custom Fields for posts. This field will be used for the header image. Some blog posts might have related Artworks, therefore create another custom field ArtWork from type Related data and data type works. The meta-data business and people will be tags.

a) Create Blog full page and drag a Blog posts widget.

b) Create a List template under <root>/ResourcePackages/Bootstrap/Mvc/Views/BlogPost/ and modify its markup.

c) Configure the Blog posts widget to use BlogPostList template and to open single items in Blog details page.

16. Blog Details

a) Drag a Blog posts widget.

b) Create a Detail template of the Blog posts widget under <root>/ResourcePackages/Bootstrap/Mvc/Views/BlogPost/ and add a template for the related Artworks in it.

Go to Sitefinity Content > Artwork > Pages where items like this are published and move Artwork details page on top. After that related Artworks of a blog post will be opened in Artwork details page.

c) Each blog post detail template contains a social share option. The MVC Social share widget can be enabled through the designer of the widget. To do so open Edit > Advanced > Modal and set EnableSocialShare to True.
TIPS: To enable more social sharing options go to Sitefinity Administration > Settings > Social sharing and check the ones you need.

d) To enable comments for blogs go to Administration > CommentsModule > Commentable types. Then create custom comments templates in <root>/ResourcePackages/Bootstrap/Mvc/Views/Comments.
Tip: When modifying the template make sure to keep the Sitefinity additions like sorting and comments count. Also, you can enable Captcha from Administration > CommentsModule > UseSpamProtectionImage.

17. Blog Left Sidebar

The specific sections for this page are search section, categories section and recent posts section.

a) For search section use a Search box widget and create a new search index for blog posts in Sitefinity Administration > Search Indexes.
Create a new Search box widget template in <root>/ResourcePackages/Bootstrap/Mvc/Views/SearchBox and change the markup as needed.
Configure the Search box widget to use the created search index and the SearchBox widget template as well as to display results on Blog left search page.

b) For the categories section use a Categories widget and create a custom CategoriesSidebarList template (as done with other widgets before)

c) For recent blog posts section use a Blog posts widget and create a new template BlogPostSimple. Configure the widget to show only three items in total, to sort posts so that last published are on top and to open single item in Blog details page.

d) Drag a Blog posts widget and configure it to open single items in Blog details page as done for the Blog full page.

18. Blog Left Search Results

a) Create this page as a duplicate of Blog left sidebar but change the Blog posts widget with a Search results widget.

b) Go to Sitefinity Content > Blogs and click Actions > Title and Properties for Blog item. Set Default page property to Blog > Blog details. After that blog posts from the Search result widget will be opened in Blog details page like in the other cases.

19. Contacts

The interesting section on this page is the Contact form. The other sections are realized with section + container grid widgets and Content block widgets.

a) Create a Contact with me form ContactWithMe in Sitefinity Content > Forms.

b) Change the markup of the fields in ParagraphTextField, TextField and SubmitButton folders in <root>/ResourcePackages/Bootstrap/Mvc/Views/.

c) Customize the message which is displayed after the form is submitted in the Form widget designer in Settings tab.

Conclusion

We hope you found this step-by-step tutorial useful! You can learn more about Sitefinity here, and feel free to check out the source code for everything above yourself on this Github repo.

Need a refresher, or step-by-step guide on how to leverage the full power of Sitefinity? We have designed a free course to help developers get up to speed with the latest Sitefinity version. Sign up here,.