Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web. Bootstrap doesn’t only make front-end development faster and easier, it’s also made for all skill levels, devices of all shapes and projects of all sizes. To gain some ideas for your design, check out the Bootstrap Expo.

Integrating Bootstrap in DNN is really easy. In this article, I’ll show you how to build a DNN website with Bootstrap from scratch.

Set up your Bootstrap website in DNN

Before you use Bootstrap components, take a look at the Bootstrap website. It’s possible to create a customized version of Bootstrap for your DNN skin.

Start with creating a Head.ascx file in your DNN portal. Register the DNN ClientResourceManagement by adding next line:

<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>

Next you can make use of DnnCssInclude’s and DnnJsInclude’s. Add the latest version of Bootstrap.

<dnn:DnnCssInclude ID="BootstrapCSS" runat="server" FilePath="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<dnn:DnnJsInclude ID="jQuery" runat="server" FilePath="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" />

<dnn:DnnJsInclude ID="BootstrapJS" runat="server" FilePath="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" />

Bootstrap navigation in DNN

For each DNN Component, such as your navigation menu, we’ll use existing Bootstrap components. For example, your DNN menu exist out of HTML combined with DNN Skinobjects. In a Bootstrap based DNN Skin your menu could be similar as code below. You can also take a look at the free Bootstrap based DNN Navigation Plug-in.

<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="MENU" src="~/Admin/Skins/Menu.ascx" %>
    
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
         <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Awesome-DNN-Nav" aria-expanded="false">
                    <span class="sr-only">Menu</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"><dnn:LOGO id="dnnLOGO" runat="server" class="img-responsive"/></a>
        </div>
        <div class="collapse navbar-collapse" id="Awesome-DNN-Nav">
              <dnn:MENU id="dnnMENU" MenuStyle="mainMenu" runat="server"></dnn:MENU>
              <dnn:SEARCH id="dnnSEARCH" runat="server" showWeb="false" showSite="false"></dnn:SEARCH>
        </div>
    </div>
</nav>

Next, configure the DNN Menu Skinobject. This is explained at the DNN Mobile Plug-in page. Once you followed these steps your DNN menu will work properly.

For an awesome DNN search lay-out, use the free Searchbar Plug-in.

Bootstrap contentpane in DNN

To use all Bootstrap functionalities I recommend creating a really small skin with several Bootstrap components. Your portal.ascx file will only contain the necessary code. This allows your customer / content manager to be really flexible with adding and managing content. Add "container" and "row" to create a full responsive skin.

<!--#include file="includes/headInclude.ascx"-->
<!--#include file="includes/navigationInclude.ascx"-->
<div class="container">   
    <div id="contentPane" runat="server" class="row"/>
<!--#include file="includes/footerInclude.ascx"-->
</div>
<!--#include file="includes/scripts.ascx"-->

After you created your skin file you have to create some Bootstrap based containers. By creating different containers, your content manager can easily create an awesome landings page without coding. I recommend creating at least 3 containers:

• Hero_background_container.ascx;
• Content_container_h2_white_background.ascx;
• Content_container_h2_colored_background.ascx (+ some variants).

The advantage of this setup is that you only need to change some colors.

<%@ Control AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Containers.Container" %>
<%@ Register TagPrefix="dnn" TagName="TITLE" Src="~/Admin/Containers/Title.ascx" %>

<section class="col-md-12 bg-light-gray">
        <div class="row">
            <div class="col-md-12 text-center">
                <h2 class="section-heading"><dnn:TITLE runat="server" id="dnnTITLE" /></h2>
            </div>
        </div>
        <div class="row text-center">
            <div class="col-md-12 text-center">
                <div id="ContentPane" runat="server"/>
            </div>
        </div>
</section>

Your DNN containers should be placed in your portal > containers file. You can add as much containers you want.

Bootstrap portfolio in DNN

For business development, you definitely want to show your Portfolio. To manage images and text, use the DNN Form & List module. Why? Because you only need to configure your module once so everyone can manage the portfolio easily. Read the documentation at the “Portfolio Plug-in” page and add the code to your portal.

Bootstrap footer in DNN

Create a new file called “footerInclude.ascx”. Add your code, as shown in the example.

Now you just created an entire DNN website, which is easy to manage and easy to contain.