Yeah I say it from my heart , I am glad you liked my theme and purchased it. I am sure I dont have enough file size to explain how thankful I am . Lets get quickly get into the documentation but not much quickly finish it, its more detailed :)

You acquired a right to ask anything about this template with the following links, make use of them when you are feeling like you are drowning.

Item Support Self-hosted Forum

Cascade is a admin template built on Twitter Bootstrap 3 with enoromous feautures and highly customisable options. In this documentation I am going to explain the best to make you go easy on the integration. All the best and enjoy coding with Cascade
So you have the cascade.zip file after downloading from purchased site. Now Unzip the files and copy the following folders to your root working directory
  • Bootstrap
  • csss
  • images
  • fonts
  • less( only if you want to use less css)
  • js
  • partials( only if you want to use php)
Next copy the file called template.html ( or template.php) to your working directory. Now you can using the template file as a base file. Continue to read to understand the markup and the structure.
First lets see the big Cascade template in a small parts so that we will get a good idea what it is and how it is actually structured. Please make sure you get the whole idea of the below image.



General Markup

The general template structure is the same throughout the template. Here is the general structure.

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cascade Flat , Responsive Bootstrap 3.0 Admin Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Loading Stylesheets -->    
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet" type="text/css"> 

    <link href="less/style.less" rel="stylesheet"  title="lessCss" id="lessCss">

    <!-- Loading Custom Stylesheets -->    
    <link href="css/custom.css" rel="stylesheet">

    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
      <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <![endif]-->
    </head>
    <body>
      <div class="site-holder">

        <!-- .navbar -->
        <nav class="navbar" >


        </nav> <!-- /.navbar -->

        <!-- .box-holder -->
        <div class="box-holder">

          <!-- .left-sidebar -->
          <div class="left-sidebar">
            <div class="sidebar-holder">

            </div><!-- /.left-sidebar Holder-->
          </div> <!-- /.left-sidebar -->

          <!-- .content -->
          <div class="content">


            @content

            <div class="footer">
              @footer
            </div>

          </div> <!-- /.content -->

          <!-- .right-sidebar -->
          <div class="right-sidebar right-sidebar-hidden">
            <div class="right-sidebar-holder">

             @right Side Content


           </div>  <!-- /.right-sidebar-holder -->
         </div>  <!-- /.right-sidebar -->


       </div> <!-- /.box-holder -->
     </div><!-- /.site-holder -->



     <!-- Load JS here for Faster site load =============================-->


   </body>
   </html>

Template file sections

Cascade admin template comes with a well documented code. Check the sections one by one , template.html is demonstrated below

Start:

<!DOCTYPE html>
<html lang="en">

Page Head:

<head>
  <meta charset="utf-8">
  <title>Cascade Flat , Responsive Bootstrap 3.0 Admin Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Loading Bootstrap -->
  <link href="css/bootstrap.css" rel="stylesheet">

  <!-- Loading Stylesheets -->    
  <link href="css/font-awesome.css" rel="stylesheet">
   <link href="css/style.css" rel="stylesheet" type="text/css"> 

  <link href="less/style.less" rel="stylesheet"  title="lessCss" id="lessCss">
  
  <!-- Loading Custom Stylesheets -->    
  <link href="css/custom.css" rel="stylesheet">

  <link rel="shortcut icon" href="images/favicon.ico">

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
      <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <![endif]-->
</head>

Body Start:

    <body>
      <div class="site-holder">

Top Navigation

   <nav class="navbar" role="navigation">

          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <a class="navbar-brand" href="#"><i class="fa fa-list btn-nav-toggle-responsive text-white"></i> <span class="logo">Cas<strong>ca</strong>de <i class="fa fa-bookmark"></i></span></a>
          </div>
          
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav user-menu navbar-right ">

              <li><a href="#" class="user dropdown-toggle" data-toggle="dropdown"><span class="username"><img src="images/profiles/eleven.png" class="user-avatar" alt="">  Vijay Kumar </span></a>
                <ul class="dropdown-menu">
                  <li><a href="#"><i class="fa fa-user"></i> My Profile</a></li>
                  <li><a href="#"><i class="fa fa-envelope"></i> Inbox</a></li>
                  <li><a href="#"><i class="fa fa-cogs"></i> Settings</a></li>
                  <li class="divider"></li>
                  <li><a href="#" class="text-danger"><i class="fa fa-lock"></i> Logout</a></li>
                </ul>
                <li><a href="#" class="settings dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i><span class="badge bg-pink">4</span></a>
                  <ul class="dropdown-menu inbox">
                    <li>
                      <a href="inbox.php">     
                        <img src="images/profiles/three.png" alt="" class="avatar">
                        <div class="message">
                          <span class="username">John Deo</span> 
                          <span class="mini-details">(6) <i class="fa fa-paper-clip"></i></span>
                          <span class="time pull-right"> <i class="fa fa-clock-o"></i> 06:58 PM</span>
                          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's ... </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="inbox.php">     
                        <img src="images/profiles/four.png" alt="" class="avatar">
                        <div class="message">
                          <span class="username">Jane Deo</span> 
                          <span class="mini-details">(6) <i class="fa fa-paper-clip"></i></span>
                          <span class="time pull-right"> <i class="fa fa-clock-o"></i> 06:58 PM</span>
                          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's ... </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="inbox.php">     
                        <img src="images/profiles/five.png" alt="" class="avatar">
                        <div class="message">
                          <span class="username">Mr Deo</span> 
                          <span class="mini-details">(6) <i class="fa fa-paper-clip"></i></span>
                          <span class="time pull-right"> <i class="fa fa-clock-o"></i> 06:58 PM</span>
                          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's ... </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="inbox.php">     
                        <img src="images/profiles/six.png" alt="" class="avatar">
                        <div class="message">
                          <span class="username">Miss Deo</span> 
                          <span class="mini-details">(6) <i class="fa fa-paper-clip"></i></span>
                          <span class="time pull-right"> <i class="fa fa-clock-o"></i> 06:58 PM</span>
                          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's ... </p>
                        </div>
                      </a>
                    </li>
                    <li><a href="inbox.php" class="btn bg-primary">View All</a></li>
                  </ul>
                  <li><a href="#" class="settings dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell animated shake"></i><span class="badge bg-success">10</span></a>
                    <ul class="dropdown-menu notifications">
                      <li>
                        <a href="#">
                          <i class="fa fa-user noty-icon bg-primary"></i> 
                          <span class="description">10 Users are registered</span>
                          <span class="time"> <i class="fa fa-clock-o"></i> 06:58 PM</span>
                        </a>
                      </li>
                      <li>
                        <a href="#" class="text-danger">
                          <i class="fa fa-inbox noty-icon bg-pink"></i> 
                          <span class="description">Your disk space has been exceeeded</span>
                          <span class="time"> <i class="fa fa-clock-o"></i> 06:58 PM</span>
                        </a>
                      </li>
                      <li>
                        <a href="#" class="text-info">
                          <i class="fa fa-comment noty-icon bg-purple"></i> 
                          <span class="description">58 new comments</span>
                          <span class="time"> <i class="fa fa-clock-o"></i> 06:58 PM</span>
                        </a>
                      </li>
                      <li>
                        <a href="#" class="text-warning">
                          <i class="fa fa-user noty-icon bg-warning"></i> 
                          <span class="description">User deleted</span>
                          <span class="time"> <i class="fa fa-clock-o"></i> 06:58 PM</span>
                        </a>
                      </li>
                      <li>
                        <a href="#" class="text-success">
                          <i class="fa fa-bookmark-o noty-icon bg-seagreen"></i> 
                          <span class="description">You have a new badge</span>
                          <span class="time"> <i class="fa fa-clock-o"></i> 06:58 PM</span>
                        </a>
                      </li>
                      <li>
                        <a href="#" class="text-info">
                          <i class="fa fa-envelope noty-icon bg-info"></i> 
                          <span class="description">24 Unread mails</span>
                          <span class="time"> <i class="fa fa-clock-o"></i> 06:58 PM</span>
                        </a>
                      </li>
                      <li>
                        <a href="#" class="text-success">
                          <i class="fa fa-link noty-icon bg-purple"></i> 
                          <span class="description">Urls forwarding activated</span>
                          <span class="time"> <i class="fa fa-clock-o"></i> 06:58 PM</span>
                        </a>
                      </li>
                      <li>
                        <a href="#" class="text-warning">
                          <i class="fa fa-clock-o noty-icon bg-yellow"></i> 
                          <span class="description">Action</span>
                          <span class="time"> <i class="fa fa-clock-o"></i> 06:58 PM</span>
                        </a>
                      </li>
                      <li>
                        <a href="#" class="text-danger">
                          <i class="fa fa-exclamation noty-icon bg-danger"></i> 
                          <span class="description">3 domains expired</span>
                          <span class="time"> <i class="fa fa-clock-o"></i> 06:58 PM</span>
                        </a>
                      </li>
                      <li>
                        <a href="#" class="text-success">
                          <i class="fa fa-clock-o noty-icon bg-success"></i> 
                          <span class="description">Your have $950 as outstanding amount</span>
                          <span class="time"> <i class="fa fa-clock-o"></i> 06:58 PM</span>
                        </a>
                      </li>
                      
                      <li><a href="#" class="btn bg-primary">View All</a></li>
                    </ul>
                  </li>
                  <li><a href="#" class="settings"><i class="fa fa-indent settings-toggle"></i><span class="badge bg-info">20</span></a></li>
                </ul>
              </div><!-- /.navbar-collapse -->
            </nav> <!-- /.navbar -->

Box Start: ( This holds the leftsidebar,content and rightsidebar)

 <!-- .box-holder -->
            <div class="box-holder">

Body Start:

 <body>
 <div class="site-holder">

Left Sidebar: first declare .left-sidebar and then child is .left-sidebar-holder.

  <!-- .left-sidebar -->
              <div class="left-sidebar">
                <div class="sidebar-holder">
                  <ul class="nav  nav-list">

                    <!-- sidebar to mini Sidebar toggle -->
                    <li class="nav-toggle">
                      <button class="btn  btn-nav-toggle text-primary"><i class="fa fa-angle-double-left toggle-left"></i> </button>
                    </li>


                    <!-- Sidebar header @add class list-subheading for sidebar header -->
                    <li class="list-subheading"><span class="hiden-minibar">Overview</span></li>
                    <li class="active"><a href="index.php" data-original-title="Dashboard"><i class="fa fa-dashboard"></i><span class="hidden-minibar"> Dashboard </span></a></li>
                    <li><a href="#" data-original-title="Cascade"><i class="fa fa-group"></i><span class="hidden-minibar"> Cascade</span></a></li>

                    <li>
                      <a class="dropdown" href="#" data-original-title="Pages"><i class="fa fa-book"></i><span class="hidden-minibar">  Pages <span class="badge bg-primary pull-right">14</span></a>
                      <ul>
                        <li><a href="calendar.php" data-original-title="Calendar"><i class="fa fa-calendar"></i><span class="hidden-minibar"> Calendar</span></a></li>
                        <li><a href="chat.php" data-original-title="Calendar"><i class="fa fa-comment"></i><span class="hidden-minibar"> Chat</span></a></li>
                        <li><a href="profile.php" data-original-title="Profile"><i class="fa fa-th"></i><span class="hidden-minibar"> Profile Activity</span></a></li>
                        <li><a href="profile-two.php" data-original-title="Profile Two"><i class="fa fa-th"></i><span class="hidden-minibar"> Profile Posts</span></a></li>
                        <li><a href="gallery.php" data-original-title="Gallery"><i class="fa fa-th"></i><span class="hidden-minibar"> Gallery</span></a></li>
                        <li><a href="grids.php" data-original-title="Grids"><i class="fa fa-th-large"></i><span class="hidden-minibar"> Grids</span></a></li>
                        <li><a href="helpers.php" data-original-title="Helpers"><i class="fa fa-shield"></i><span class="hidden-minibar"> Helpers</span></a></li>
                        <li><a href="images.php" data-original-title="Images"><i class="fa fa-picture-o"></i><span class="hidden-minibar"> Images</span></a></li>
                        <li><a href="inbox.php" data-original-title="Inbox"><i class="fa fa-envelope"></i><span class="hidden-minibar"> Inbox</span></a></li>
                        <li><a href="invoice.php" data-original-title="Invoice"><i class="fa fa-credit-card"></i><span class="hidden-minibar"> Invoice</span></a></li>
                        <li><a href="pricing-table.php" data-original-title="Pricing Table"><i class="fa fa-money"></i><span class="hidden-minibar"> Pricing Table</span></a></li>
                        <li><a href="support.php" data-original-title="Support"><i class="fa fa-gears"></i><span class="hidden-minibar"> Support</span></a></li>
                        <li><a href="timeline.php" data-original-title="Timeline"><i class="fa fa-clock-o"></i><span class="hidden-minibar"> Timeline</span></a></li>
                        <li><a href="typography.php" data-original-title="Typography"><i class="fa fa-text-width"></i><span class="hidden-minibar"> Typography</span></a></li>
                      </ul>
                    </li>

                    <li>
                      <a class="dropdown" href="#" data-original-title="Utility"><i class="fa fa-tint"></i><span class="hidden-minibar">  Utility <span class="badge bg-primary pull-right">7</span></a>
                      <ul>
                        <li><a href="404.php" data-original-title="404"><i class="fa fa-exclamation-circle"></i><span class="hidden-minibar"> 404 Error Page</span></a></li>
                        <li><a href="505.php" data-original-title="505"><i class="fa fa-exclamation-circle"></i><span class="hidden-minibar"> 505 Error Page</span></a></li>
                        <li><a href="faq.php" data-original-title="FAQ"><i class="fa fa-question"></i><span class="hidden-minibar"> FAQ</span></a></li>
                        <li><a href="screens.php" data-original-title="Lock Screen"><i class="fa fa-lock"></i><span class="hidden-minibar"> Lock Screen</span></a></li>
                        <li><a href="screens.php" data-original-title="LogIn"><i class="fa fa-sign-in"></i><span class="hidden-minibar"> Log In</span></a></li>
                        <li><a href="screens.php" data-original-title="SignUp"><i class="fa fa-smile-o"></i><span class="hidden-minibar"> Sign Up</span></a></li>
                        <li><a href="template.php" data-original-title="Template"><i class="fa fa-pagelines"></i><span class="hidden-minibar"> Template Page</span></a></li>
                      </ul> 
                    </li>
                    <!-- Sidebar header @add class list-subheading for sidebar header -->
                    <li class="list-subheading"><span class="hiden-minibar">Components</span></li>
                    <li> <!-- Example for second level menu -->
                      <a class="dropdown" href="#" data-original-title="UI Elements"><i class="fa fa-user"></i><span class="hidden-minibar">  UI Elements <span class="badge bg-primary pull-right">17</span></a>
                      <ul>
                        <li><a href="alerts.php" data-original-title="Alerts"><i class="fa fa-exclamation-triangle"></i><span class="hidden-minibar"> Alerts</span></a></li>
                        <li><a href="animations.php" data-original-title="Animations"><i class="fa fa-font"></i><span class="hidden-minibar"> Animations</span></a></li>
                        <li><a href="breadcrumbs-jumbotron.php" data-original-title="Breadcrumbs"><i class="fa fa-chain"></i><span class="hidden-minibar"> Breadcrumbs &amp; Jumbo</span></a></li>
                        <li><a href="buttons.php" data-original-title="Buttons"><i class="fa fa-sort"></i><span class="hidden-minibar"> Buttons </span></a></li>
                        <li><a href="carousel.php" data-original-title="carousel"><i class="fa fa-coffee"></i><span class="hidden-minibar"> Carousel</span></a></li>
                        <li><a href="notifications.php" data-original-title="Notifications"><i class="fa fa-bell-o"></i><span class="hidden-minibar"> Notifications</span></a></li>
                        <li><a href="knobs.php" data-original-title="Knobs"><i class="fa fa-dot-circle-o"></i><span class="hidden-minibar"> Knobs</span></a></li>
                        <li><a href="labels-badges.php" data-original-title="Labels"><i class="fa fa-phone-square"></i><span class="hidden-minibar"> Labels &amp; badges</span></a></li>
                        <li><a href="list-groups.php" data-original-title="List Groups"><i class="fa fa-list"></i><span class="hidden-minibar"> List Groups</span></a></li>
                        <li><a href="pagination.php" data-original-title="Pagination"><i class="fa fa-sort-numeric-asc"></i><span class="hidden-minibar"> Pagination</span></a></li>
                        <li><a href="panels.php" data-original-title="Panels"><i class="fa fa-windows"></i><span class="hidden-minibar"> Panels</span></a></li>
                        <li><a href="progress-bars.php" data-original-title="Progress"><i class="fa fa-ruble"></i><span class="hidden-minibar"> Progress Bars</span></a></li>
                        <li><a href="sliders.php" data-original-title="Sliders"><i class="fa fa-exchange"></i><span class="hidden-minibar"> Sliders</span></a></li>
                        <li><a href="tabs-accordians.php" data-original-title="Tabs"><i class="fa fa-check"></i><span class="hidden-minibar"> Tabs &amp; Accordians</span></a></li>
                        <li><a href="info-boxes.php" data-original-title="Info Boxes"><i class="fa fa-bullseye"></i><span class="hidden-minibar"> Info Boxes</span></a></li>
                        <li><a href="tooltips-popovers.php" data-original-title="Tooltips"><i class="fa fa-asterisk"></i><span class="hidden-minibar"> Tooltips &amp; popovers</span></a></li>
                        <li><a href="wells.php" data-original-title="Wells"><i class="fa fa-beer"></i><span class="hidden-minibar"> Wells</span></a></li>
                      </ul>
                    </li>    

                    <li> <!-- Example for second level menu -->
                      <a class="dropdown" href="#" data-original-title="Tables"><i class="fa fa-table"></i><span class="hidden-minibar">  Tables <span class="badge bg-primary pull-right">3</span></a>
                      <ul>
                        <li><a href="basic-tables.php" data-original-title="Basic"><i class="fa fa-table"></i><span class="hidden-minibar">  Basic Tables</span></a></li>
                        <li><a href="editable-tables.php" data-original-title="Editable"><i class="fa fa-table"></i><span class="hidden-minibar">  Editable Tables</span></a></li>
                        <li><a href="dynamic-tables.php" data-original-title="Dynamic"><i class="fa fa-table"></i><span class="hidden-minibar">  Dynamic Tables</span></a></li>
                      </ul> 
                    </li>

                    <li> <!-- Example for Third level menu -->
                      <a class="dropdown" href="#" data-original-title="Unlimited Menu"><i class="fa fa-sitemap"></i><span class="hidden-minibar"> Unlimited Menu <span class="badge bg-primary pull-right">3</span></a>
                      <ul>
                        <li><a href="#" data-original-title="SubMenu"><i class="fa fa-android"></i><span class="hidden-minibar"> Submenu </span></a></li>
                        <li><a href="#" data-original-title="SubMenu"><i class="fa fa-apple"></i><span class="hidden-minibar"> Submenu </span></a></li>
                        <li>
                          <a class="dropdown" href="#" data-original-title="One More"><i class="fa fa-windows"></i><span class="hidden-minibar"> One More <span class="badge bg-primary pull-right">3</span></a>
                          <ul>
                            <li><a href="#" data-original-title="SubMenu"><i class="fa fa-facebook-square"></i><span class="hidden-minibar"> Submenu </span></a></li>
                            <li><a href="#" data-original-title="SubMenu"><i class="fa fa-google-plus-square"></i><span class="hidden-minibar"> Submenu </span></a></li>
                            <li>
                              <a class="dropdown" href="#" data-original-title="More Here"><i class="fa fa-twitter-square"></i><span class="hidden-minibar"> More here <span class="badge bg-primary pull-right">3</span></a>
                              <ul>
                                <li><a href="#" data-original-title="SubMenu"><i class="fa fa-flickr"></i><span class="hidden-minibar"> Submenu </span></a></li>
                                <li><a href="#" data-original-title="SubMenu"><i class="fa fa-pinterest"></i><span class="hidden-minibar"> Submenu </span></a></li>
                                <li><a href="#" data-original-title="Add More"><i class="fa fa-linkedin-square"></i><span class="hidden-minibar">More.. trust me </span></a></li>
                              </ul> 
                            </li>
                          </ul> 
                        </li>
                      </ul> 
                    </li>

                    <li>
                      <a class="dropdown" href="#" data-original-title="Forms"><i class="fa fa-list-alt"></i><span class="hidden-minibar"> Forms  <span class="badge bg-primary pull-right">9</span></a>
                      <ul>
                        <li ><a href="dropzone-file-upload.php" data-original-title="Dropzone"><i class="fa fa-level-down"></i><span class="hidden-minibar">  Dropzone File Upload</span></a></li>
                        <li><a href="form-input-masks.php" data-original-title="Input Masks"><i class="fa fa-pencil-square"></i><span class="hidden-minibar"> Form Input Masks</span></a></li>
                        <li><a href="form-validation.php" data-original-title="validation"><i class="fa fa-warning"></i><span class="hidden-minibar"> Form Validation</span></a></li>
                        <li><a href="form-wizard.php" data-original-title="Form wizard"><i class="fa fa-indent"></i><span class="hidden-minibar">  Form Wizard</span></a></li>
                        <li><a href="input-groups.php" data-original-title="Input Groups"><i class="fa fa-group"></i><span class="hidden-minibar"> Input Groups</span></a></li>
                        <li><a href="layouts-elements.php" data-original-title="Form Elements"><i class="fa fa-indent"></i><span class="hidden-minibar">  Layouts &amp; elements</span></a></li>
                        <li><a href="multiple-file-upload.php" data-original-title="File Upload"><i class="fa fa-cloud-upload"></i><span class="hidden-minibar">  Multiple File Upload</span></a></li>
                        <li><a href="pickers.php" data-original-title="Pickers"><i class="fa fa-eye"></i><span class="hidden-minibar">  Pickers</span></a></li>
                        <li><a href="wysiwyg-markdown.php" data-original-title="Wysiwyg &amp; Markdown"><i class="fa fa-pencil-square"></i><span class="hidden-minibar"> Wysiwyg &amp; Markdown</span></a></li>
                      </ul> 
                    </li>

                    <li>
                      <a class="dropdown" href="#" data-original-title="Charts"><i class="fa fa-bar-chart-o"></i><span class="hidden-minibar"> Charts  <span class="badge bg-primary pull-right">6</span></a>
                      <ul>
                        <li ><a href="basic-charts.php" data-original-title="Basic Charts"><i class="fa fa-bar-chart-o"></i><span class="hidden-minibar">  Basic Charts</span></a></li>
                        <li><a href="live-charts.php" data-original-title="Live Charts"><i class="fa fa-bar-chart-o"></i><span class="hidden-minibar"> Live Charts</span></a></li>
                        <li><a href="morris.php" data-original-title="Morris Charts"><i class="fa fa-bar-chart-o"></i><span class="hidden-minibar"> Morris Charts</span></a></li>
                        <li><a href="pie-charts.php" data-original-title="Pie Charts"><i class="fa fa-bar-chart-o"></i><span class="hidden-minibar">  Pie Charts</span></a></li>
                        <li><a href="sparklines.php" data-original-title="Spark Lines"><i class="fa fa-bar-chart-o"></i><span class="hidden-minibar">  Spark Lines</span></a></li>
                        <li><a href="nvd3.php" data-original-title="NVD3"><i class="fa fa-bar-chart-o"></i><span class="hidden-minibar">  NVD3</span></a></li>
                      </ul> 
                    </li>

                    <li>
                      <a class="dropdown" href="#" data-original-title="Maps"><i class="fa fa-map-marker"></i><span class="hidden-minibar"> Maps  <span class="badge bg-primary pull-right">2</span></a>
                      <ul>
                        <li><a href="google-maps.php" data-original-title="Google Maps"><i class="fa fa-google-plus"></i><span class="hidden-minibar"> Google Maps</span></a></li>
                        <li><a href="vector-maps.php" data-original-title="Vector Maps"><i class="fa fa-vimeo-square"></i><span class="hidden-minibar"> Vector Maps</span></a></li>
                      </ul> 
                    </li>

                    <li><a href="icons.php" data-original-title="Icons"><i class="fa fa-truck"></i><span class="hidden-minibar"> Icons</span></a></li>


                  </ul>
                </div>
              </div> <!-- /.left-sidebar -->

Content

  <!-- .content -->
              <div class="content">
                @content goes here
               <div class="footer">   </div>
              </div> <!-- /.content -->

RightSidebar first declare .right-sidebar and then child is .right-sidebar-holder.

<!-- .right-sidebar -->
<div class="right-sidebar right-sidebar-hidden">
  <div class="right-sidebar-holder">

    <!-- @Demo part only The part from here can be removed till end of the @demo  -->
    <a href="login.php" class="btn btn-danger btn-block">Logout </a>


    <h4 class="page-header text-primary text-center">
      Theme Options
      <a  href="#"  class="theme-panel-close text-primary pull-right"><strong><i class="fa fa-times"></i></strong></a>
    </h4>

    <ul class="list-group theme-options">
      <li class="list-group-item" href="#"> 
        <div class="checkbox">
          <label>
            <input type="checkbox" id="fixedNavbar" value=""> Fixed Top Navbar
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" id="fixedNavbarBottom" value=""> Fixed Bottom Navbar
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" id="boxed" value=""> Boxed Version
          </label>
        </div>
        
          <div class="form-group backgroundImage hidden" >
            <label class="control-label">Paste Image Url and then hit enter</label>
              <input type="text" class="form-control" id="backgroundImageUrl" />
          </div>
        <!-- 
        <div class="checkbox">
          <label>
            <input type="checkbox" id="responsive" value=""> Disable Responsiveness
          </label>
        </div> 
      -->      
    </li>
    <li class="list-group-item" href="#">Predefined Themes
      <ul class="list-inline predefined-themes"> 
        <li><a class="badge" style="background-color:#54b5df" data-color-primary="#54b5df" data-color-secondary="#2f4051" data-color-link="#FFFFFF"> &nbsp; </a></li>
        <li><a class="badge" style="background-color:#d85f5c" data-color-primary="#d85f5c" data-color-secondary="#f0f0f0" data-color-link="#474747"> &nbsp; </a></li>
        <li><a class="badge" style="background-color:#3d4a5d" data-color-primary="#3d4a5d" data-color-secondary="#edf0f1" data-color-link="#777e88"> &nbsp; </a></li>
        <li><a class="badge" style="background-color:#A0B448" data-color-primary="#A0B448" data-color-secondary="#485257" data-color-link="#AFB5AA"> &nbsp; </a></li>
        <li><a class="badge" style="background-color:#2FA2D1" data-color-primary="#2FA2D1" data-color-secondary="#484D51" data-color-link="#A5B1B7"> &nbsp; </a></li>
        <li><a class="badge" style="background-color:#2f343b" data-color-primary="#2f343b" data-color-secondary="#525a65" data-color-link="#FFFFFF"> &nbsp; </a></li>
      </ul>
    </li>
    <li class="list-group-item" href="#">Change Primary Color
      <div class="input-group colorpicker-component bscp" data-color="#54728c" data-color-format="hex" id="colr">
        <span class="input-group-addon"><i style="background-color: #54728c"></i></span>
        <input type="text" value="#54728c" id="primaryColor" readonly class="form-control" />

      </div>
    </li>
    <li class="list-group-item" href="#">Change LeftSidebar Background
      <div class="input-group colorpicker-component bscp" data-color="#f9f9f9" data-color-format="hex" id="Scolr">
        <span class="input-group-addon"><i style="background-color: #f9f9f9"></i></span>
        <input type="text" value="#f9f9f9" id="secondaryColor" readonly class="form-control" />

      </div>
    </li>
    <li class="list-group-item" href="#">Change Leftsidebar Link Color
      <div class="input-group colorpicker-component bscp" data-color="#54728c" data-color-format="hex" id="Lcolr">
        <span class="input-group-addon"><i style="background-color: #54728c"></i></span>
        <input type="text" value="#54728c" id="linkColor" readonly class="form-control" />

      </div>
    </li>
    <li class="list-group-item" href="#">Change RightSidebar Background
      <div class="input-group colorpicker-component bscp" data-color="#f9f9f9" data-color-format="hex" id="Rcolr">
        <span class="input-group-addon"><i style="background-color: #f9f9f9"></i></span>
        <input type="text" value="#f9f9f9" id="rightsidebarColor" readonly class="form-control" />

      </div>
    </li>
  </li>
</ul>
    <!-- /.@Demo part only The part to here can be removed   -->
<div id="bic_calendar_right" class="bg-white"></div>

<h4 class="page-header text-primary">Current Projects </h4>

<div class="list-group projects">
  <a class="list-group-item" href="#">  
    <p> Archon <span class="pull-right label bg-success">90%</span></p>
    <div class="progress progress-mini">
      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
        <span class="sr-only">90% Complete</span>
      </div>
    </div>

  </a>
  <a class="list-group-item" href="#">  
    <p> Banshee <span class="pull-right label bg-warning">40%</span></p>
    <div class="progress progress-mini">
      <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
        <span class="sr-only">40% Complete</span>
      </div>
    </div>

  </a>
  <a class="list-group-item" href="#">  
    <p> Cascade <span class="pull-right label bg-primary">40%</span></p>
    <div class="progress progress-mini">
      <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
        <span class="sr-only">75% Complete</span>
      </div>
    </div>
  </a>
</div>
<h4 class="page-header">Contacts</h4>
<div class="list-group contact-list">
          <a class="list-group-item">
            <img src="images/profiles/one.png" class="chat-user-avatar" alt="">
            Jane Doe
            <i class="fa fa-circle"></i>
          </a>
          <a class="list-group-item contact">
            <img src="images/profiles/two.png" class="chat-user-avatar" alt="">
            Jenny
            <i class="fa fa-circle online"></i>
          </a>
          <a class="list-group-item contact">
            <img src="images/profiles/three.png" class="chat-user-avatar" alt="">
            Vijay
            <i class="fa fa-circle busy"></i>
          </a>
          <a class="list-group-item">
            <img src="images/profiles/four.png" class="chat-user-avatar" alt="">
            Nikky
            <i class="fa fa-circle offline"></i>
          </a>
          <a class="list-group-item contact">
            <img src="images/profiles/five.png" class="chat-user-avatar" alt="">
            John
            <i class="fa fa-circle"></i>
          </a>
          <a class="list-group-item contact">
            <img src="images/profiles/six.png" class="chat-user-avatar" alt="">
            Anusha
            <i class="fa fa-circle"></i>
          </a>
          <a class="list-group-item">
            <img src="images/profiles/seven.png" class="chat-user-avatar" alt="">
            Antony
            <i class="fa fa-circle offline"></i>
          </a>
          <a class="list-group-item contact">
            <img src="images/profiles/eight.png" class="chat-user-avatar" alt="">
            Fana
            <i class="fa fa-circle busy"></i>
          </a>
          <a class="list-group-item contact">
            <img src="images/profiles/nine.png" class="chat-user-avatar" alt="">
            Chris
            <i class="fa fa-circle offline"></i>
          </a>
          <a class="list-group-item">
            <img src="images/profiles/ten.png" class="chat-user-avatar" alt="">
            Sandy
            <i class="fa fa-circle online"></i>
          </a>
          <a class="list-group-item contact">
            <img src="images/profiles/eleven.png" class="chat-user-avatar" alt="">
            Ajay
            <i class="fa fa-circle"></i>
          </a>
          <a class="list-group-item contact">
            <img src="images/profiles/twelve.png" class="chat-user-avatar" alt="">
            Sanju
            <i class="fa fa-circle"></i>
          </a>
        </div>
      </div>


</div>  <!-- /.right-sidebar-holder -->
</div>  <!-- /.right-sidebar -->

End of box and site holder

</div> <!-- /.box-holder -->
</div><!-- /.site-holder -->

Load Js after the site holder ending

<!-- Load JS here for Faster site load =============================-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/less-1.5.0.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>
<script src="js/bootstrap-switch.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script src="js/application.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/jquery.sortable.js"></script>
<script type="text/javascript" src="js/jquery.gritter.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/skylo.js"></script>
<script src="js/prettify.min.js"></script>
<script src="js/jquery.noty.js"></script>
<script src="js/bic_calendar.js"></script>
<script src="js/theme-options.js"></script>

<script src="js/bootstrap-progressbar.js"></script>
<script src="js/bootstrap-progressbar-custom.js"></script>
<script src="js/bootstrap-colorpicker.min.js"></script>
<script src="js/bootstrap-colorpicker-custom.js"></script>



<script src="js/raphael-min.js"></script>
<script src="js/morris-0.4.3.min.js"></script>
<script src="js/morris-custom.js"></script>

<script src="js/charts/jquery.sparkline.min.js"></script> 

<!-- NVD3 graphs  =============================-->
<script src="js/nvd3/lib/d3.v3.js"></script>
<script src="js/nvd3/nv.d3.js"></script>
<script src="js/nvd3/src/models/legend.js"></script>
<script src="js/nvd3/src/models/pie.js"></script>
<script src="js/nvd3/src/models/pieChart.js"></script>
<script src="js/nvd3/src/utils.js"></script>
<script src="js/nvd3/sample.nvd3.js"></script>


<!-- Core Jquery File  =============================-->
<script src="js/core.js"></script>
<script src="js/dashboard-custom.js"></script>

End of Document

</body>
</html>
I think you got some idea of how it is structured. To get started quickly please open up template.html (or template.php) It has basic css and jquery files to get started.Lets go more detail on template page with sections.

Sections are explained

What ever you start on the new page, make sure to include in a .row class

<div class="row">
  <div class="col-mod-12">

    <ul class="breadcrumb">
      <li><a href="index.html">Dashboard</a></li>
      <li><a href="template.html">Basic Template</a></li>
      <li class="active">BreadCrumb</li>
    </ul>

    <div class="form-group pull-right">
      <input type="text" class="form-control form-cascade-control nav-input-search" size="20" placeholder="Search through site" />
    </div>

    <h3 class="page-header"> Basic Template <i class="fa fa-info-circle animated bounceInDown show-info"></i> </h3>

    <blockquote class="page-information hidden">
      <p>
        <b>Template Page</b> is the basic page where you can add more pages according to your requirements easily within this division.
      </p>
    </blockquote>

  </div>
</div>

So as I explained, lets get anything in between .row class like above. Nextly we need to give .breadcumb with ul and yeah here comes little of my tricks, let me explain each class

  • .form-cascade-control you can add this class to a normal .form-control to give border effect like you see in demo
  • .nav-input-search This class is referred in core.js file to use for search function with the plugin typehead
  • .page-information This class is used for blockqoute to get the border effect.

I have a written a small code with a big logic to help you with the left side menu. To make it easy for you , there is a file called menu-builder.php in the root folder

All you need to do is open that file and check the array defined $menuList in php. Right box is the array defined by me. it is just for demo, you can easily edit it basing on the your menu list or extract the code from database and then pass the array to the function buildMenu($menuList) defined in .menu-builder.php The following array supports the multdimensional array.

The first array for example ,
title is the menu list title shown
link is the link to be directed to
icon is the icon for the list item
$menuList = Array(
    0 => Array(
        'title' => 'Dashboard',
        'link' => 'index.php',
        'icon' => 'dashboard',
        'children' => Array()
    ),
    

So to build the menu simple thing is pass array to the function where you need the menu to be printed. Please refer the partials/header.php file.

$menuList = Array(
    0 => Array(
        'title' => 'Dashboard',
        'link' => 'index.php',
        'icon' => 'dashboard',
        'children' => Array()
    ),
    1 => Array(
        'title' => 'Top Navbar',
        'link' => 'top-navbar.php',
        'icon' => 'indent',
        'children' => Array()
            
    ),
    2 => Array(
        'title' => 'Pages',
        'link' => '#',
        'icon' => 'book',
        'children' => Array(
            0 => Array(
                'title' => 'Calendar',
                'link' => 'calendar.php',
                'icon' => 'calendar',
                'children' => Array(),
            ),
            1 => Array(
                'title' => 'Chat',
                'link' => 'chat.php',
                'icon' => 'comment',
                'children' => Array()
            ),
            2 => Array(
                'title' => 'Profile',
                'link' => 'profile.php',
                'icon' => 'user',
                'children' => Array()
            ),
            3 => Array(
                'title' => 'Gallery',
                'link' => 'gallery.php',
                'icon' => 'th',
                'children' => Array()
            ),
            4 => Array(
                'title' => 'Grid',
                'link' => 'grids.php',
                'icon' => 'th-large',
                'children' => Array()
            ),
            5 => Array(
                'title' => 'Images',
                'link' => 'images.php',
                'icon' => 'picture-o',
                'children' => Array()
            ),
            6 => Array(
                'title' => 'Inbox',
                'link' => 'inbox.php',
                'icon' => 'envelope',
                'children' => Array()
            ),
            7 => Array(
                'title' => 'Invoice',
                'link' => 'invoice.php',
                'icon' => 'credit-card',
                'children' => Array()
            ),
            8 => Array(
                'title' => 'Pricing',
                'link' => 'pricing-table.php',
                'icon' => 'money',
                'children' => Array()
            ),
            9 => Array(
                'title' => 'Support',
                'link' => 'support.php',
                'icon' => 'gears',
                'children' => Array()
            ),
            10 => Array(
                'title' => 'Typography',
                'link' => 'typography.php',
                'icon' => 'text-width',
                'children' => Array()
            )
        )
    ),
    3 => Array(
        'title' => 'Utility',
        'link' => '#',
        'icon' => 'tint',
        'children' => Array(
            0 => Array(
                'title' => '404',
                'link' => '404.php',
                'icon' => 'exclamation-circle',
                'children' => Array(),
            ),
            1 => Array(
                'title' => '505',
                'link' => '505.php',
                'icon' => 'exclamation-circle',
                'children' => Array()
           ),
            2 => Array(
                'title' => 'FAQ',
                'link' => 'faq.php',
                'icon' => 'question',
                'children' => Array()
           ),
            3 => Array(
                'title' => 'Lock Screen',
                'link' => 'screens.php',
                'icon' => 'lock',
                'children' => Array()
           ),
            4 => Array(
                'title' => 'Signin',
                'link' => 'screens.php',
                'icon' => 'sign-in',
                'children' => Array()
           ),
            5 => Array(
                'title' => 'Sign Up',
                'link' => 'screens.php',
                'icon' => 'smile-o',
                'children' => Array()
           ),
            6 => Array(
                'title' => 'Template',
                'link' => 'template.php',
                'icon' => 'pagelines',
                'children' => Array()
           ),
        )
    ),
    4 => Array(
        'title' => 'UI Elements',
        'link' => '#',
        'icon' => 'user',
        'children' => Array(
            0 => Array(
                'title' => 'Alerts',
                'link' => 'alerts.php',
                'icon' => 'exclamation-triangle',
                'children' => Array(),
            ),
            1 => Array(
                'title' => 'Animations',
                'link' => 'animations.php',
                'icon' => 'font',
                'children' => Array()
           ),
            2 => Array(
                'title' => 'BreadCrubms',
                'link' => 'breadcrumbs-jumbotron.php',
                'icon' => 'chain',
                'children' => Array()
           ),
            3 => Array(
                'title' => 'Buttons',
                'link' => 'buttons.php',
                'icon' => 'lock',
                'children' => Array()
           ),
            4 => Array(
                'title' => 'Carousel',
                'link' => 'carousel.php',
                'icon' => 'coffee',
                'children' => Array()
           ),
            5 => Array(
                'title' => 'Notifications',
                'link' => 'notifications.php',
                'icon' => 'bell-o',
                'children' => Array()
           ),
            6 => Array(
                'title' => 'Labels Badges',
                'link' => 'labels-badges.php',
                'icon' => 'phone-square',
                'children' => Array()
           ),
            7 => Array(
                'title' => 'List Groups',
                'link' => 'list-groups.php',
                'icon' => 'dot-circle-o',
                'children' => Array()
           ),
            8 => Array(
                'title' => 'Pagination',
                'link' => 'pagination.php',
                'icon' => 'sort-numeric-asc',
                'children' => Array()
           ),
            9 => Array(
                'title' => 'Panels',
                'link' => 'panels.php',
                'icon' => 'windows',
                'children' => Array()
           ),
            10 => Array(
                'title' => 'Progress Bars',
                'link' => 'progress-bars.php',
                'icon' => 'ruble',
                'children' => Array()
           ),
            11 => Array(
                'title' => 'Sliders',
                'link' => 'sliders.php',
                'icon' => 'exchange',
                'children' => Array()
           ),
            12 => Array(
                'title' => 'Tabs Accordians',
                'link' => 'tabs-accordians.php',
                'icon' => 'check',
                'children' => Array()
           ),
            13 => Array(
                'title' => 'Info Boxes',
                'link' => 'info-boxes.php',
                'icon' => 'bullseye',
                'children' => Array()
           ),
            14 => Array(
                'title' => 'Tooltips Popovers',
                'link' => 'tooltips-popovers.php',
                'icon' => 'asterisk',
                'children' => Array()
           ),
            15 => Array(
                'title' => 'Wells',
                'link' => 'wells.php',
                'icon' => 'beer',
                'children' => Array()
           ),
        )
    ),
   5 => Array(
        'title' => 'Tables',
        'link' => '#',
        'icon' => 'table',
        'children' => Array(
            0 => Array(
                'title' => 'Basic Tables',
                'link' => 'basic-tables.php',
                'icon' => 'table',
                'children' => Array(),
            ),
            1 => Array(
                'title' => 'Editable Tables',
                'link' => 'editable-tables.php',
                'icon' => 'table',
                'children' => Array(),
            ),
            2 => Array(
                'title' => 'Dynamic Tables',
                'link' => 'dynamic-tables.php',
                'icon' => 'table',
                'children' => Array(),
            ),
        )
    ),
   6 => Array(
        'title' => 'Unlimited Menu',
        'link' => '#',
        'icon' => 'sitemap',
        'children' => Array(
            0 => Array(
                'title' => 'Submenu',
                'link' => '#',
                'icon' => 'android',
                'children' => Array(),
            ),
            2 => Array(
                'title' => 'Submenu',
                'link' => '#',
                'icon' => 'apple',
                'children' => Array(),
            ),
            3 => Array(
                'title' => 'windows',
                'link' => '#',
                'icon' => 'android',
                'children' => Array(
                    0 => Array(
                        'title' => 'Submenu',
                        'link' => '#',
                        'icon' => 'android',
                        'children' => Array(),
                    ),
                    2 => Array(
                        'title' => 'Submenu',
                        'link' => '#',
                        'icon' => 'apple',
                        'children' => Array(),
                    ),
                    3 => Array(
                        'title' => 'windows',
                        'link' => '#',
                        'icon' => 'android',
                        'children' => Array(
                            0 => Array(
                                'title' => 'Submenu',
                                'link' => '#',
                                'icon' => 'android',
                                'children' => Array(),
                            ),
                            2 => Array(
                                'title' => 'Submenu',
                                'link' => '#',
                                'icon' => 'apple',
                                'children' => Array(),
                            ),
                            3 => Array(
                              'title' => 'windows',
                              'link' => '#',
                              'icon' => 'android',
                              'children' => Array(),
                            )
                        ),
                    )
                ),
            ),
        )
    ),
   7 => Array(
        'title' => 'Forms',
        'link' => '#',
        'icon' => 'list-alt',
        'children' => Array(
            0 => Array(
                'title' => 'Dropzone File Upload',
                'link' => 'dropzone-file-upload.php',
                'icon' => 'level-down',
                'children' => Array(),
            ),
            1 => Array(
                'title' => 'Form Input Masks',
                'link' => 'form-input-masks.php',
                'icon' => 'pencil-square',
                'children' => Array(),
            ),
            2 => Array(
                'title' => 'Form Validation',
                'link' => 'form-validation.php',
                'icon' => 'warning',
                'children' => Array(),
            ),
            3 => Array(
                'title' => 'Form Wizard',
                'link' => 'form-wizard.php',
                'icon' => 'indent',
                'children' => Array(),
            ),
            4 => Array(
                'title' => 'Input Groups',
                'link' => 'input-groups.php',
                'icon' => 'group',
                'children' => Array(),
            ),
            5 => Array(
                'title' => 'Layouts &nbsp; Elements',
                'link' => 'layouts-elements.php',
                'icon' => 'indent',
                'children' => Array(),
            ),
            6 => Array(
                'title' => 'Multiple File Upload',
                'link' => 'multiple-file-upload.php',
                'icon' => 'cloud-upload',
                'children' => Array(),
            ),
            7 => Array(
                'title' => 'Pickers',
                'link' => 'pickers.php',
                'icon' => 'eye',
                'children' => Array(),
            ),
            8 => Array(
                'title' => 'Wysiwyg &nbp; Markdown',
                'link' => 'wysiwyg-markdown.php',
                'icon' => 'pencil-square',
                'children' => Array(),
            ),
        )
    ),
   8 => Array(
        'title' => 'Charts',
        'link' => '#',
        'icon' => 'bar-chart-o',
        'children' => Array(
            0 => Array(
                'title' => 'Basic Charts',
                'link' => 'basic-charts.php',
                'icon' => 'bar-chart-o',
                'children' => Array(),
            ),
            1 => Array(
                'title' => 'Live Charts',
                'link' => 'live-charts.php',
                'icon' => 'bar-chart-o',
                'children' => Array(),
            ),
            2 => Array(
                'title' => 'Morris Charts',
                'link' => 'morris.php',
                'icon' => 'bar-chart-o',
                'children' => Array(),
            ),
            3 => Array(
                'title' => 'Pie Charts',
                'link' => 'pie-charts.php',
                'icon' => 'bar-chart-o',
                'children' => Array(),
            ),
            4 => Array(
                'title' => 'Spark Lines',
                'link' => 'sparklines.php',
                'icon' => 'bar-chart-o',
                'children' => Array(),
            ),
            5 => Array(
                'title' => 'NVD3 Charts',
                'link' => 'nvd3.php',
                'icon' => 'bar-chart-o',
                'children' => Array(),
            )
        )
    ),
   9 => Array(
        'title' => 'Maps',
        'link' => '#',
        'icon' => 'map-marker',
        'children' => Array(
            0 => Array(
                'title' => 'Google Maps',
                'link' => 'google-maps.php',
                'icon' => 'google-plus',
                'children' => Array(),
            ),
            1 => Array(
                'title' => 'Vector Maps',
                'link' => 'vector-maps.php',
                'icon' => 'vimeo-square',
                'children' => Array(),
            )
        )
    ),
   10 => Array(
        'title' => 'Icons',
        'link' => '#',
        'icon' => 'truck',
        'children' => Array()
    )
);

Top Fixed Navbar

Top navbar can be fixed with two simple classes by adding navbar-fixed-top to the navbar and navbar-fixed to the content This will make the top navbar fixed and content adjust according to the top navbar. Simple right ? ;)
so for the navbar code looks from

<nav class="navbar" role="navigation"> to <nav class="navbar navbar-fixed-top" role="navigation">

<divdiv class="content"> to <div class="content navbar-fixed">


Bottom Fixed Navbar

Top navbar can be fixed to the bottom but with four classes here. no worries simple again navbar-fixed-bottom to the navbar , navbar-fixedBottom to the content , btn-group to the navbar-collapse in the navbar menu and finally dropup to the navbar-collapse again. This will make the top navbar fixed to the bottom and adjust content according to the bottom fixed navbar. Simple right ? well I hope so

Boxed Version

Well I promise this one is really simple, just add the class container to the site-holder and sorry there is nothing left except adding a background to the body if you did not do that already. You are good to check it live now.

Advanced

you can refer panels from www.getbootstrap.com , apart from that i have defined some possiblities to use them more . First of all let me explain about .panel-cascade class. This class is added to .panel class and the style applies now for more classes for panels are as below
Class How it helps
.panel-cascade this class has its own styles defined by me, try it for sure
.nopadding This removes the padding from .panel-body if applied to .panel-body
.panel-minimise and .panel-close These are defined with the font awesome icon and they help the panels to close or minimise. Make sure you follow the demo panel code shown next to this table so that they will work. The js code for this operation is already defined in corre.js
.panel-info This applies the panel-heading color to be blue
.panel-warning This applies the panel-heading color to be orange
.panel-success This applies the panel-heading color to be green
.panel-danger This applies the panel-heading color to be red
.text-primary, bg-primary Primary uses the primary color defined in the css/style.less file . .bg-primary gives background, .text-primary gives primary text color
.bg-info, .bg-danger, .bg-warning, .bg-success yeah you can use these classes to any tag to get background colors
.text-info, .text-danger, .text-warning, .text-success yeah you can use these classes to any tag to get text colors
<!-- Demo Panel -->
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-cascade">
      <div class="panel-heading">
        <h3 class="panel-title text-primary">
          Heading goes here
          <span class="pull-right">
            <a href="#" class="panel-minimize"><i class="fa fa-chevron-up"></i></a>
            <a href="#" class="panel-close"><i class="fa fa-times"></i></a>
          </span>
        </h3>
      </div>
      <div class="panel-body panel-border">
        This is a basic structure for demo panel
      </div> <!-- /panel body --> 
    </div>  
  </div>
</div>