Learn DNN / DotNetNuke

Creating a Responsive Bootstrap 3 Skin for DotNetNuke

Subscribe to the magazine

By Andy Stephenson

November 2013

In this tutorial we walk through step by step how to create a responsive skin for DNN using the new Twitter Bootstrap framework version 3.

Bootstrap 3 offers several powerful tools that can be a huge advantage to a DotNetNuke skin developer. Some of these include:

Various layout options: Bootstrap 3 allows us to work with a variety of layout options such as the grid system, this grid system allows us to create pane layouts extremely quickly.
Bootstrap 3 comes with excellent typography and button styles.
A selection of handy javascript plugins such as popups, animated menus, and a responsive carousel.

Bootstrap 3 has been rebuilt from the ground up and is now a mobile-first framework, meaning it is written and coded perfectly for mobile devices from the beginning. Rather than adapting a desktop HTML/CSS framework to look good on a mobile device, this time the bootstrap framework looks perfect on a mobile device and then it is adapted and extended upon for the extra screen real estate of a tablet and then a desktop screen.

This tutorial will give you a solid template for creating your Bootstrap 3 based skins. You will also learn some techniques such as file inclusion using the client resource management features available in DNN 6 and 7.

The videos contain:

How to Build a Basic DotNetNuke Skin with Twitter Bootstrap 3

Introduction
Downloading Bootstrap 3
Unzipping the Bootstrap files into the DotNetNuke file system
Accessing the DotNetNuke file system with Visual Studio Express for Web
Creating the default skin file
Creating a ‘barebones’ DotNetNuke skin
Introduction to Client Resource Management
How to implement client resource management within a skin
Registering the Bootstrap 3 CSS and Javascript files with client resource management
Introduction to the viewport meta tag
Implementing the viewport meta tag from within a skin
How to create the Bootstrap container div

Creating a DDR Bootstrap 3 Navbar Menu

Introduction
Creating the menu markup
Preventing the Bootstrap menu conflicting with the admin menu
Implementing the DDR menu within a DNN skin
How to convert the bootstrap menu into a DDR menu
How to display the portal title within a skin inside the Bootstrap menu
How to add the login link to the Bootstrap menu using the Login skin object
About the nav-collapse CSS class

Creating Instant Content Panes and Containers using the Bootstrap 3 Framework