essential_admin_setting_styleguide.php

<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**
 * Style guide.
 *
 * @package    theme
 * @subpackage essential
 * @copyright  &copy; 2016-onwards G J Barnard.
 * @author     G J Barnard - gjbarnard at gmail dot com and {@link http://moodle.org/user/profile.php?id=442195}
 * @license    PHP Code: http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later.
 * @license    Source HTML Code: http://www.apache.org/licenses/LICENSE-2.0 Apache License v2.0:
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Which is a compatible license, see: http://www.gnu.org/licenses/license-list.en.html#apache2.
 *
 * @license    Content: http://creativecommons.org/licenses/by/3.0/ Creative Commons Attribution 3.0 Unported (CC BY 3.0).
 *
 * Content source reference: http://getbootstrap.com/2.3.2/base-css.html.
 */
class essential_admin_setting_styleguide extends admin_setting {

    /**
     * Constructor
     *
     * @param string $name unique ascii name, either 'mysetting' for settings that in config, or
     * 'myplugin/mysetting' for ones in config_plugins.
     * @param string $visiblename localised
     * @param string $description long localised info
     */
    public function __construct($name, $visiblename, $description) {
        $this->nosave = true;

        global $PAGE;
        if ($PAGE->bodyid == 'page-admin-setting-' . $name) {
            $bc = new block_contents();
            $bc->title = get_string('styleguide', 'theme_essential');
            $bc->attributes['class'] = 'block block_style_guide';
            $bc->content = '<ul class="nav nav-list">';
            $bc->content .= '<li><a href="#gridSystem"><i class="fa fa-hand-o-right"></i> Grid system</a></li>';
            $bc->content .= '<li><a href="#fluidGridSystem"><i class="fa fa-hand-o-right"></i> Fluid grid system</a></li>';
            $bc->content .= '<li><a href="#layouts"><i class="fa fa-hand-o-right"></i> Layouts</a></li>';
            $bc->content .= '<li><a href="#responsive"><i class="fa fa-hand-o-right"></i> Responsive design</a></li>';
            $bc->content .= '<li><a href="#typography"><i class="fa fa-hand-o-right"></i> Typography</a></li>';
            $bc->content .= '<li><a href="#code"><i class="fa fa-hand-o-right"></i> Code</a></li>';
            $bc->content .= '<li><a href="#tables"><i class="fa fa-hand-o-right"></i> Tables</a></li>';
            $bc->content .= '<li><a href="#forms"><i class="fa fa-hand-o-right"></i> Forms</a></li>';
            $bc->content .= '<li><a href="#buttons"><i class="fa fa-hand-o-right"></i> Buttons</a></li>';
            $bc->content .= '<li><a href="#images"><i class="fa fa-hand-o-right"></i> Images</a></li>';
            $bc->content .= '<li><a href="#dropdowns"><i class="fa fa-hand-o-right"></i> Dropdowns</a></li>';
            $bc->content .= '<li><a href="#buttonGroups"><i class="fa fa-hand-o-right"></i> Button groups</a></li>';
            $bc->content .= '<li><a href="#buttonDropdowns"><i class="fa fa-hand-o-right"></i> Button dropdowns</a></li>';
            $bc->content .= '<li><a href="#navs"><i class="fa fa-hand-o-right"></i> Navs</a></li>';
            $bc->content .= '<li><a href="#navbar"><i class="fa fa-hand-o-right"></i> Navbar</a></li>';
            $bc->content .= '<li><a href="#breadcrumbs"><i class="fa fa-hand-o-right"></i> Breadcrumbs</a></li>';
            $bc->content .= '<li><a href="#pagination"><i class="fa fa-hand-o-right"></i> Pagination</a></li>';
            $bc->content .= '<li><a href="#labels-badges"><i class="fa fa-hand-o-right"></i> Labels and badges</a></li>';
            $bc->content .= '<li><a href="#typography"><i class="fa fa-hand-o-right"></i> Typography</a></li>';
            $bc->content .= '<li><a href="#thumbnails"><i class="fa fa-hand-o-right"></i> Thumbnails</a></li>';
            $bc->content .= '<li><a href="#alerts"><i class="fa fa-hand-o-right"></i> Alerts</a></li>';
            $bc->content .= '<li><a href="#progress"><i class="fa fa-hand-o-right"></i> Progress bars</a></li>';
            $bc->content .= '<li><a href="#media"><i class="fa fa-hand-o-right"></i> Media object</a></li>';
            $bc->content .= '<li><a href="#misc"><i class="fa fa-hand-o-right"></i> Misc</a></li>';
            $bc->content .= '<li><a href="#overview"><i class="fa fa-hand-o-right"></i> JavaScript overview</a></li>';
            $bc->content .= '<li><a href="#transitions"><i class="fa fa-hand-o-right"></i> Transitions</a></li>';
            $bc->content .= '<li><a href="#modals"><i class="fa fa-hand-o-right"></i> Modal</a></li>';
            $bc->content .= '<li><a href="#dropdowns"><i class="fa fa-hand-o-right"></i> Dropdown</a></li>';
            $bc->content .= '<li><a href="#scrollspy"><i class="fa fa-hand-o-right"></i> Scrollspy</a></li>';
            $bc->content .= '<li><a href="#tabs"><i class="fa fa-hand-o-right"></i> Tab</a></li>';
            $bc->content .= '<li><a href="#tooltips"><i class="fa fa-hand-o-right"></i> Tooltip</a></li>';
            $bc->content .= '<li><a href="#popovers"><i class="fa fa-hand-o-right"></i> Popover</a></li>';
            $bc->content .= '<li><a href="#alerts"><i class="fa fa-hand-o-right"></i> Alert</a></li>';
            $bc->content .= '<li><a href="#buttons"><i class="fa fa-hand-o-right"></i> Button</a></li>';
            $bc->content .= '<li><a href="#collapse"><i class="fa fa-hand-o-right"></i> Collapse</a></li>';
            $bc->content .= '<li><a href="#carousel"><i class="fa fa-hand-o-right"></i> Carousel</a></li>';
            $bc->content .= '<li><a href="#typeahead"><i class="fa fa-hand-o-right"></i> Typeahead</a></li>';
            $bc->content .= '<li><a href="#affix"><i class="fa fa-hand-o-right"></i> Affix</a></li>';
            $bc->content .= '</ul>';
            $defaultregion = $PAGE->blocks->get_default_region();
            $PAGE->blocks->add_fake_block($bc, $defaultregion);

            $PAGE->requires->js_call_amd('theme_essential/styleguide', 'init');
        }

        parent::__construct($name, $visiblename, $description, '');
    }

    /**
     * Always returns true
     * @return bool Always returns true
     */
    public function get_setting() {
        return true;
    }

    /**
     * Always returns true
     * @return bool Always returns true
     */
    public function get_defaultsetting() {
        return true;
    }

    /**
     * Never write settings
     * @return string Always returns an empty string
     */
    public function write_setting($data) {
        // Do not write any setting.
        return '';
    }

    /**
     * Returns an HTML string
     * @return string Returns an HTML string
     */
    public function output_html($data, $query = '') {
        global $OUTPUT;
        $return = '';
        if ($this->visiblename != '') {
            $return .= $OUTPUT->heading($this->visiblename, 3, 'main');
        }
        if ($this->description != '') {
            $return .= $OUTPUT->box(highlight($query, markdown_to_html($this->description)),
                    'generalbox formsettingheading');
        }

        $return .= '<div class="'.$this->name.'">';

        $return .= '<style type="text/css" media="screen">';
        $return .= '/* <![CDATA[ */';
        $return .= "body {";
        $return .= "position: relative;";
        $return .= "}";
        $return .= "/* Code in headings */";
        $return .= "h3 code {";
        $return .= "font-size: 14px;";
        $return .= "font-weight: normal;";
        $return .= "}";
        $return .= "/* Tweak navbar brand link to be super sleek";
        $return .= "-------------------------------------------------- */";
        $return .= "body > .navbar {";
        $return .= "font-size: 13px;";
        $return .= "}";
        $return .= "/* Change the docs' brand */";
        $return .= "body > .navbar .brand {";
        $return .= "padding-right: 0;";
        $return .= "padding-left: 0;";
        $return .= "margin-left: 20px;";
        $return .= "float: right;";
        $return .= "font-weight: bold;";
        $return .= "color: #000;";
        $return .= "text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);";
        $return .= "-webkit-transition: all .2s linear;";
        $return .= "-moz-transition: all .2s linear;";
        $return .= "transition: all .2s linear;";
        $return .= "}";
        $return .= "body > .navbar .brand:hover {";
        $return .= "text-decoration: none;";
        $return .= "text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);";
        $return .= "}";
        $return .= "/* Sections";
        $return .= "-------------------------------------------------- */";
        $return .= "/* padding for in-page bookmarks and fixed navbar */";
        $return .= "section {";
        $return .= "padding-top: 30px;";
        $return .= "}";
        $return .= "section > .page-header,";
        $return .= "section > .lead {";
        $return .= "color: #5a5a5a;";
        $return .= "}";
        $return .= "section > ul li {";
        $return .= "margin-bottom: 5px;";
        $return .= "}";
        $return .= "/* Separators (hr) */";
        $return .= ".bs-docs-separator {";
        $return .= "margin: 40px 0 39px;";
        $return .= "}";
        $return .= "/* Faded out hr */";
        $return .= "hr.soften {";
        $return .= "height: 1px;";
        $return .= "margin: 70px 0;";
        $return .= "background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));";
        $return .= "background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));";
        $return .= "background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));";
        $return .= "background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));";
        $return .= "border: 0;";
        $return .= "}";
        $return .= "/* Jumbotrons";
        $return .= "-------------------------------------------------- */";
        $return .= "/* Base class";
        $return .= "------------------------- */";
        $return .= ".jumbotron {";
        $return .= "position: relative;";
        $return .= "padding: 40px 0;";
        $return .= "color: #fff;";
        $return .= "text-align: center;";
        $return .= "text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);";
        $return .= "background: #020031; /* Old browsers */";
        $return .= "background: -moz-linear-gradient(45deg,  #020031 0%, #6d3353 100%); /* FF3.6+ */";
        $return .= "background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), ";
        $return .= "color-stop(100%,#6d3353)); /* Chrome,Safari4+ */";
        $return .= "background: -webkit-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */";
        $return .= "background: -o-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* Opera 11.10+ */";
        $return .= "background: -ms-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* IE10+ */";
        $return .= "background: linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* W3C */";
        $return .= "filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', ";
        $return .= "endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */";
        $return .= "-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);";
        $return .= "-moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);";
        $return .= "box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);";
        $return .= "}";
        $return .= ".jumbotron h1 {";
        $return .= "font-size: 80px;";
        $return .= "font-weight: bold;";
        $return .= "letter-spacing: -1px;";
        $return .= "line-height: 1;";
        $return .= "}";
        $return .= ".jumbotron p {";
        $return .= "font-size: 24px;";
        $return .= "font-weight: 300;";
        $return .= "line-height: 1.25;";
        $return .= "margin-bottom: 30px;";
        $return .= "}";
        $return .= "/* Link styles (used on .masthead-links as well) */";
        $return .= ".jumbotron a {";
        $return .= "color: #fff;";
        $return .= "color: rgba(255,255,255,.5);";
        $return .= "-webkit-transition: all .2s ease-in-out;";
        $return .= "-moz-transition: all .2s ease-in-out;";
        $return .= "transition: all .2s ease-in-out;";
        $return .= "}";
        $return .= ".jumbotron a:hover {";
        $return .= "color: #fff;";
        $return .= "text-shadow: 0 0 10px rgba(255,255,255,.25);";
        $return .= "}";
        $return .= "/* Download button */";
        $return .= ".masthead .btn {";
        $return .= "padding: 19px 24px;";
        $return .= "font-size: 24px;";
        $return .= "font-weight: 200;";
        $return .= "color: #fff; /* redeclare to override the '.jumbotron a' */";
        $return .= "border: 0;";
        $return .= "-webkit-border-radius: 6px;";
        $return .= "-moz-border-radius: 6px;";
        $return .= "border-radius: 6px;";
        $return .= "-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);";
        $return .= "-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);";
        $return .= "box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);";
        $return .= "-webkit-transition: none;";
        $return .= "-moz-transition: none;";
        $return .= "transition: none;";
        $return .= "}";
        $return .= ".masthead .btn:hover {";
        $return .= "-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);";
        $return .= "-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);";
        $return .= "box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);";
        $return .= "}";
        $return .= ".masthead .btn:active {";
        $return .= "-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);";
        $return .= "-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);";
        $return .= "box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);";
        $return .= "}";
        $return .= "/* Pattern overlay";
        $return .= "------------------------- */";
        $return .= ".jumbotron .container {";
        $return .= "position: relative;";
        $return .= "z-index: 2;";
        $return .= "}";
        $return .= ".jumbotron:after {";
        $return .= "content: '';";
        $return .= "display: block;";
        $return .= "position: absolute;";
        $return .= "top: 0;";
        $return .= "right: 0;";
        $return .= "bottom: 0;";
        $return .= "left: 0;";
        $return .= "background: url(../img/bs-docs-masthead-pattern.png) repeat center center;";
        $return .= "opacity: .4;";
        $return .= "}";
        $return .= "@media";
        $return .= "only screen and (-webkit-min-device-pixel-ratio: 2),";
        $return .= "only screen and (   min--moz-device-pixel-ratio: 2),";
        $return .= "only screen and (     -o-min-device-pixel-ratio: 2/1) {";
        $return .= "";
        $return .= ".jumbotron:after {";
        $return .= "background-size: 150px 150px;";
        $return .= "}";
        $return .= "}";
        $return .= "/* Masthead (docs home)";
        $return .= "------------------------- */";
        $return .= ".masthead {";
        $return .= "padding: 70px 0 80px;";
        $return .= "margin-bottom: 0;";
        $return .= "color: #fff;";
        $return .= "}";
        $return .= ".masthead h1 {";
        $return .= "font-size: 120px;";
        $return .= "line-height: 1;";
        $return .= "letter-spacing: -2px;";
        $return .= "}";
        $return .= ".masthead p {";
        $return .= "font-size: 40px;";
        $return .= "font-weight: 200;";
        $return .= "line-height: 1.25;";
        $return .= "}";
        $return .= "";
        $return .= "/* Textual links in masthead */";
        $return .= ".masthead-links {";
        $return .= "margin: 0;";
        $return .= "list-style: none;";
        $return .= "}";
        $return .= ".masthead-links li {";
        $return .= "display: inline;";
        $return .= "padding: 0 10px;";
        $return .= "color: rgba(255,255,255,.25);";
        $return .= "}";
        $return .= "/* Social proof buttons from GitHub & Twitter */";
        $return .= ".bs-docs-social {";
        $return .= "padding: 15px 0;";
        $return .= "text-align: center;";
        $return .= "background-color: #f5f5f5;";
        $return .= "border-top: 1px solid #fff;";
        $return .= "border-bottom: 1px solid #ddd;";
        $return .= "}";
        $return .= "/* Quick links on Home */";
        $return .= ".bs-docs-social-buttons {";
        $return .= "margin-left: 0;";
        $return .= "margin-bottom: 0;";
        $return .= "padding-left: 0;";
        $return .= "list-style: none;";
        $return .= "}";
        $return .= ".bs-docs-social-buttons li {";
        $return .= "display: inline-block;";
        $return .= "padding: 5px 8px;";
        $return .= "line-height: 1;";
        $return .= "*display: inline;";
        $return .= "*zoom: 1;";
        $return .= "}";
        $return .= "/* Subhead (other pages)";
        $return .= "------------------------- */";
        $return .= ".subhead {";
        $return .= "text-align: left;";
        $return .= "border-bottom: 1px solid #ddd;";
        $return .= "}";
        $return .= ".subhead h1 {";
        $return .= "font-size: 60px;";
        $return .= "}";
        $return .= ".subhead p {";
        $return .= "margin-bottom: 20px;";
        $return .= "}";
        $return .= ".subhead .navbar {";
        $return .= "display: none;";
        $return .= "}";
        $return .= "/* Marketing section of Overview";
        $return .= "-------------------------------------------------- */";
        $return .= ".marketing {";
        $return .= "text-align: center;";
        $return .= "color: #5a5a5a;";
        $return .= "}";
        $return .= ".marketing h1 {";
        $return .= "margin: 60px 0 10px;";
        $return .= "font-size: 60px;";
        $return .= "font-weight: 200;";
        $return .= "line-height: 1;";
        $return .= "letter-spacing: -1px;";
        $return .= "}";
        $return .= ".marketing h2 {";
        $return .= "font-weight: 200;";
        $return .= "margin-bottom: 5px;";
        $return .= "}";
        $return .= ".marketing p {";
        $return .= "font-size: 16px;";
        $return .= "line-height: 1.5;";
        $return .= "}";
        $return .= ".marketing .marketing-byline {";
        $return .= "margin-bottom: 40px;";
        $return .= "font-size: 20px;";
        $return .= "font-weight: 300;";
        $return .= "line-height: 1.25;";
        $return .= "color: #999;";
        $return .= "}";
        $return .= ".marketing-img {";
        $return .= "display: block;";
        $return .= "margin: 0 auto 30px;";
        $return .= "max-height: 145px;";
        $return .= "}";
        $return .= "/* Special grid styles";
        $return .= "-------------------------------------------------- */";
        $return .= ".show-grid {";
        $return .= "margin-top: 10px;";
        $return .= "margin-bottom: 20px;";
        $return .= "}";
        $return .= ".show-grid [class*=\"span\"] {";
        $return .= "background-color: #eee;";
        $return .= "text-align: center;";
        $return .= "-webkit-border-radius: 3px;";
        $return .= "-moz-border-radius: 3px;";
        $return .= "border-radius: 3px;";
        $return .= "min-height: 40px;";
        $return .= "line-height: 40px;";
        $return .= "}";
        $return .= ".show-grid [class*=\"span\"]:hover {";
        $return .= "background-color: #ddd;";
        $return .= "}";
        $return .= ".show-grid .show-grid {";
        $return .= "margin-top: 0;";
        $return .= "margin-bottom: 0;";
        $return .= "}";
        $return .= ".show-grid .show-grid [class*=\"span\"] {";
        $return .= "margin-top: 5px;";
        $return .= "}";
        $return .= ".show-grid [class*=\"span\"] [class*=\"span\"] {";
        $return .= "background-color: #ccc;";
        $return .= "}";
        $return .= ".show-grid [class*=\"span\"] [class*=\"span\"] [class*=\"span\"] {";
        $return .= "background-color: #999;";
        $return .= "}";
        $return .= "/* Mini layout previews";
        $return .= "-------------------------------------------------- */";
        $return .= ".mini-layout {";
        $return .= "border: 1px solid #ddd;";
        $return .= "-webkit-border-radius: 6px;";
        $return .= "-moz-border-radius: 6px;";
        $return .= "border-radius: 6px;";
        $return .= "-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075);";
        $return .= "-moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);";
        $return .= "box-shadow: 0 1px 2px rgba(0,0,0,.075);";
        $return .= "}";
        $return .= ".mini-layout,";
        $return .= ".mini-layout .mini-layout-body,";
        $return .= ".mini-layout.fluid .mini-layout-sidebar {";
        $return .= "height: 300px;";
        $return .= "}";
        $return .= ".mini-layout {";
        $return .= "margin-bottom: 20px;";
        $return .= "padding: 9px;";
        $return .= "}";
        $return .= ".mini-layout div {";
        $return .= "-webkit-border-radius: 3px;";
        $return .= "-moz-border-radius: 3px;";
        $return .= "border-radius: 3px;";
        $return .= "}";
        $return .= ".mini-layout .mini-layout-body {";
        $return .= "background-color: #dceaf4;";
        $return .= "margin: 0 auto;";
        $return .= "width: 70%;";
        $return .= "}";
        $return .= ".mini-layout.fluid .mini-layout-sidebar,";
        $return .= ".mini-layout.fluid .mini-layout-header,";
        $return .= ".mini-layout.fluid .mini-layout-body {";
        $return .= "float: left;";
        $return .= "}";
        $return .= ".mini-layout.fluid .mini-layout-sidebar {";
        $return .= "background-color: #bbd8e9;";
        $return .= "width: 20%;";
        $return .= "}";
        $return .= ".mini-layout.fluid .mini-layout-body {";
        $return .= "width: 77.5%;";
        $return .= "margin-left: 2.5%;";
        $return .= "}";
        $return .= "/* Download page";
        $return .= "-------------------------------------------------- */";
        $return .= ".download .page-header {";
        $return .= "margin-top: 36px;";
        $return .= "}";
        $return .= ".page-header .toggle-all {";
        $return .= "margin-top: 5px;";
        $return .= "}";
        $return .= "/* Space out h3s when following a section */";
        $return .= ".download h3 {";
        $return .= "margin-bottom: 5px;";
        $return .= "}";
        $return .= ".download-builder input + h3,";
        $return .= ".download-builder .checkbox + h3 {";
        $return .= "margin-top: 9px;";
        $return .= "}";
        $return .= "/* Fields for variables */";
        $return .= ".download-builder input[type=text] {";
        $return .= "margin-bottom: 9px;";
        $return .= "font-family: Menlo, Monaco, \"Courier New\", monospace;";
        $return .= "font-size: 12px;";
        $return .= "color: #d14;";
        $return .= "}";
        $return .= ".download-builder input[type=text]:focus {";
        $return .= "background-color: #fff;";
        $return .= "}";
        $return .= "/* Custom, larger checkbox labels */";
        $return .= ".download .checkbox {";
        $return .= "padding: 6px 10px 6px 25px;";
        $return .= "font-size: 13px;";
        $return .= "line-height: 18px;";
        $return .= "color: #555;";
        $return .= "background-color: #f9f9f9;";
        $return .= "-webkit-border-radius: 3px;";
        $return .= "-moz-border-radius: 3px;";
        $return .= "border-radius: 3px;";
        $return .= "cursor: pointer;";
        $return .= "}";
        $return .= ".download .checkbox:hover {";
        $return .= "color: #333;";
        $return .= "background-color: #f5f5f5;";
        $return .= "}";
        $return .= ".download .checkbox small {";
        $return .= "font-size: 12px;";
        $return .= "color: #777;";
        $return .= "}";
        $return .= "/* Variables section */";
        $return .= "#variables label {";
        $return .= "margin-bottom: 0;";
        $return .= "}";
        $return .= "/* Giant download button */";
        $return .= ".download-btn {";
        $return .= "margin: 36px 0 108px;";
        $return .= "}";
        $return .= "#download p,";
        $return .= "#download h4 {";
        $return .= "max-width: 50%;";
        $return .= "margin: 0 auto;";
        $return .= "color: #999;";
        $return .= "text-align: center;";
        $return .= "}";
        $return .= "#download h4 {";
        $return .= "margin-bottom: 0;";
        $return .= "}";
        $return .= "#download p {";
        $return .= "margin-bottom: 18px;";
        $return .= "}";
        $return .= ".download-btn .btn {";
        $return .= "display: block;";
        $return .= "width: auto;";
        $return .= "padding: 19px 24px;";
        $return .= "margin-bottom: 27px;";
        $return .= "font-size: 30px;";
        $return .= "line-height: 1;";
        $return .= "text-align: center;";
        $return .= "-webkit-border-radius: 6px;";
        $return .= "-moz-border-radius: 6px;";
        $return .= "border-radius: 6px;";
        $return .= "}";
        $return .= "/* Misc";
        $return .= "-------------------------------------------------- */";
        $return .= "/* Make tables spaced out a bit more */";
        $return .= "h2 + table,";
        $return .= "h3 + table,";
        $return .= "h4 + table,";
        $return .= "h2 + .row {";
        $return .= "margin-top: 5px;";
        $return .= "}";
        $return .= "/* Example sites showcase */";
        $return .= ".example-sites {";
        $return .= "xmargin-left: 20px;";
        $return .= "}";
        $return .= ".example-sites img {";
        $return .= "max-width: 100%;";
        $return .= "margin: 0 auto;";
        $return .= "}";
        $return .= ".scrollspy-example {";
        $return .= "height: 200px;";
        $return .= "overflow: auto;";
        $return .= "position: relative;";
        $return .= "}";
        $return .= "/* Fake the :focus state to demo it */";
        $return .= ".focused {";
        $return .= "border-color: rgba(82,168,236,.8);";
        $return .= "-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);";
        $return .= "-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);";
        $return .= "box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);";
        $return .= "outline: 0;";
        $return .= "}";
        $return .= "/* For input sizes, make them display block */";
        $return .= ".docs-input-sizes select,";
        $return .= ".docs-input-sizes input[type=text] {";
        $return .= "display: block;";
        $return .= "margin-bottom: 9px;";
        $return .= "}";
        $return .= "/* Icons";
        $return .= "------------------------- */";
        $return .= ".the-icons {";
        $return .= "margin-left: 0;";
        $return .= "list-style: none;";
        $return .= "}";
        $return .= ".the-icons li {";
        $return .= "float: left;";
        $return .= "width: 25%;";
        $return .= "line-height: 25px;";
        $return .= "}";
        $return .= ".the-icons i:hover {";
        $return .= "background-color: rgba(255,0,0,.25);";
        $return .= "}";
        $return .= "/* Example page";
        $return .= "------------------------- */";
        $return .= ".bootstrap-examples h4 {";
        $return .= "margin: 10px 0 5px;";
        $return .= "}";
        $return .= ".bootstrap-examples p {";
        $return .= "font-size: 13px;";
        $return .= "line-height: 18px;";
        $return .= "}";
        $return .= ".bootstrap-examples .thumbnail {";
        $return .= "margin-bottom: 9px;";
        $return .= "background-color: #fff;";
        $return .= "}";
        $return .= "/* Bootstrap code examples";
        $return .= "-------------------------------------------------- */";
        $return .= "/* Base class */";
        $return .= ".bs-docs-example {";
        $return .= "position: relative;";
        $return .= "margin: 15px 0;";
        $return .= "padding: 39px 19px 14px;";
        $return .= "*padding-top: 19px;";
        $return .= "background-color: #fff;";
        $return .= "border: 1px solid #ddd;";
        $return .= "-webkit-border-radius: 4px;";
        $return .= "-moz-border-radius: 4px;";
        $return .= "border-radius: 4px;";
        $return .= "}";
        $return .= "/* Echo out a label for the example */";
        $return .= ".bs-docs-example:after {";
        $return .= "content: \"Example\";";
        $return .= "position: absolute;";
        $return .= "top: -1px;";
        $return .= "left: -1px;";
        $return .= "padding: 3px 7px;";
        $return .= "font-size: 12px;";
        $return .= "font-weight: bold;";
        $return .= "background-color: #f5f5f5;";
        $return .= "border: 1px solid #ddd;";
        $return .= "color: #9da0a4;";
        $return .= "-webkit-border-radius: 4px 0 4px 0;";
        $return .= "-moz-border-radius: 4px 0 4px 0;";
        $return .= "border-radius: 4px 0 4px 0;";
        $return .= "}";
        $return .= "/* Remove spacing between an example and it's code */";
        $return .= ".bs-docs-example + .prettyprint {";
        $return .= "margin-top: -20px;";
        $return .= "padding-top: 15px;";
        $return .= "}";
        $return .= "/* Tweak examples";
        $return .= "------------------------- */";
        $return .= ".bs-docs-example > p:last-child {";
        $return .= "margin-bottom: 0;";
        $return .= "}";
        $return .= ".bs-docs-example .table,";
        $return .= ".bs-docs-example .progress,";
        $return .= ".bs-docs-example .well,";
        $return .= ".bs-docs-example .alert,";
        $return .= ".bs-docs-example .hero-unit,";
        $return .= ".bs-docs-example .pagination,";
        $return .= ".bs-docs-example .navbar,";
        $return .= ".bs-docs-example > .nav,";
        $return .= ".bs-docs-example blockquote {";
        $return .= "margin-bottom: 5px;";
        $return .= "}";
        $return .= ".bs-docs-example .pagination {";
        $return .= "margin-top: 0;";
        $return .= "}";
        $return .= ".bs-navbar-top-example,";
        $return .= ".bs-navbar-bottom-example {";
        $return .= "z-index: 1;";
        $return .= "padding: 0;";
        $return .= "height: 90px;";
        $return .= "overflow: hidden; /* cut the drop shadows off */";
        $return .= "}";
        $return .= ".bs-navbar-top-example .navbar-fixed-top,";
        $return .= ".bs-navbar-bottom-example .navbar-fixed-bottom {";
        $return .= "margin-left: 0;";
        $return .= "margin-right: 0;";
        $return .= "}";
        $return .= ".bs-navbar-top-example {";
        $return .= "-webkit-border-radius: 0 0 4px 4px;";
        $return .= "-moz-border-radius: 0 0 4px 4px;";
        $return .= "border-radius: 0 0 4px 4px;";
        $return .= "}";
        $return .= ".bs-navbar-top-example:after {";
        $return .= "top: auto;";
        $return .= "bottom: -1px;";
        $return .= "-webkit-border-radius: 0 4px 0 4px;";
        $return .= "-moz-border-radius: 0 4px 0 4px;";
        $return .= "border-radius: 0 4px 0 4px;";
        $return .= "}";
        $return .= ".bs-navbar-bottom-example {";
        $return .= "-webkit-border-radius: 4px 4px 0 0;";
        $return .= "-moz-border-radius: 4px 4px 0 0;";
        $return .= "border-radius: 4px 4px 0 0;";
        $return .= "}";
        $return .= ".bs-navbar-bottom-example .navbar {";
        $return .= "margin-bottom: 0;";
        $return .= "}";
        $return .= "form.bs-docs-example {";
        $return .= "padding-bottom: 19px;";
        $return .= "}";
        $return .= "/* Images */";
        $return .= ".bs-docs-example-images img {";
        $return .= "margin: 10px;";
        $return .= "display: inline-block;";
        $return .= "}";
        $return .= "/* Tooltips */";
        $return .= ".bs-docs-tooltip-examples {";
        $return .= "text-align: center;";
        $return .= "margin: 0 0 10px;";
        $return .= "list-style: none;";
        $return .= "}";
        $return .= ".bs-docs-tooltip-examples li {";
        $return .= "display: inline;";
        $return .= "padding: 0 10px;";
        $return .= "}";
        $return .= "/* Popovers */";
        $return .= ".bs-docs-example-popover {";
        $return .= "padding-bottom: 24px;";
        $return .= "background-color: #f9f9f9;";
        $return .= "}";
        $return .= ".bs-docs-example-popover .popover {";
        $return .= "position: relative;";
        $return .= "display: block;";
        $return .= "float: left;";
        $return .= "width: 260px;";
        $return .= "margin: 20px;";
        $return .= "}";
        $return .= "/* Dropdowns */";
        $return .= ".bs-docs-example-submenus {";
        $return .= "min-height: 180px;";
        $return .= "}";
        $return .= ".bs-docs-example-submenus > .pull-left + .pull-left {";
        $return .= "margin-left: 20px;";
        $return .= "}";
        $return .= ".bs-docs-example-submenus .dropup > .dropdown-menu,";
        $return .= ".bs-docs-example-submenus .dropdown > .dropdown-menu {";
        $return .= "display: block;";
        $return .= "position: static;";
        $return .= "margin-bottom: 5px;";
        $return .= "*width: 180px;";
        $return .= "}";
        $return .= "/* Responsive docs";
        $return .= "-------------------------------------------------- */";
        $return .= "/* Utility classes table";
        $return .= "------------------------- */";
        $return .= ".responsive-utilities th small {";
        $return .= "display: block;";
        $return .= "font-weight: normal;";
        $return .= "color: #999;";
        $return .= "}";
        $return .= ".responsive-utilities tbody th {";
        $return .= "font-weight: normal;";
        $return .= "}";
        $return .= ".responsive-utilities td {";
        $return .= "text-align: center;";
        $return .= "}";
        $return .= ".responsive-utilities td.is-visible {";
        $return .= "color: #468847;";
        $return .= "background-color: #dff0d8 !important;";
        $return .= "}";
        $return .= ".responsive-utilities td.is-hidden {";
        $return .= "color: #ccc;";
        $return .= "background-color: #f9f9f9 !important;";
        $return .= "}";
        $return .= "/* Responsive tests";
        $return .= "------------------------- */";
        $return .= ".responsive-utilities-test {";
        $return .= "margin-top: 5px;";
        $return .= "margin-left: 0;";
        $return .= "list-style: none;";
        $return .= "overflow: hidden; /* clear floats */";
        $return .= "}";
        $return .= ".responsive-utilities-test li {";
        $return .= "position: relative;";
        $return .= "float: left;";
        $return .= "width: 25%;";
        $return .= "height: 43px;";
        $return .= "font-size: 14px;";
        $return .= "font-weight: bold;";
        $return .= "line-height: 43px;";
        $return .= "color: #999;";
        $return .= "text-align: center;";
        $return .= "border: 1px solid #ddd;";
        $return .= "-webkit-border-radius: 4px;";
        $return .= "-moz-border-radius: 4px;";
        $return .= "border-radius: 4px;";
        $return .= "}";
        $return .= ".responsive-utilities-test li + li {";
        $return .= "margin-left: 10px;";
        $return .= "}";
        $return .= ".responsive-utilities-test span {";
        $return .= "position: absolute;";
        $return .= "top:    -1px;";
        $return .= "left:   -1px;";
        $return .= "right:  -1px;";
        $return .= "bottom: -1px;";
        $return .= "-webkit-border-radius: 4px;";
        $return .= "-moz-border-radius: 4px;";
        $return .= "border-radius: 4px;";
        $return .= "}";
        $return .= ".responsive-utilities-test span {";
        $return .= "color: #468847;";
        $return .= "background-color: #dff0d8;";
        $return .= "border: 1px solid #d6e9c6;";
        $return .= "}";
        $return .= "/* Sidenav for Docs";
        $return .= "-------------------------------------------------- */";
        $return .= ".bs-docs-sidenav {";
        $return .= "width: 228px;";
        $return .= "margin: 30px 0 0;";
        $return .= "padding: 0;";
        $return .= "background-color: #fff;";
        $return .= "-webkit-border-radius: 6px;";
        $return .= "-moz-border-radius: 6px;";
        $return .= "border-radius: 6px;";
        $return .= "-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);";
        $return .= "-moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);";
        $return .= "box-shadow: 0 1px 4px rgba(0,0,0,.065);";
        $return .= "}";
        $return .= ".bs-docs-sidenav > li > a {";
        $return .= "display: block;";
        $return .= "width: 190px \9;";
        $return .= "margin: 0 0 -1px;";
        $return .= "padding: 8px 14px;";
        $return .= "border: 1px solid #e5e5e5;";
        $return .= "}";
        $return .= ".bs-docs-sidenav > li:first-child > a {";
        $return .= "-webkit-border-radius: 6px 6px 0 0;";
        $return .= "-moz-border-radius: 6px 6px 0 0;";
        $return .= "border-radius: 6px 6px 0 0;";
        $return .= "}";
        $return .= ".bs-docs-sidenav > li:last-child > a {";
        $return .= "-webkit-border-radius: 0 0 6px 6px;";
        $return .= "-moz-border-radius: 0 0 6px 6px;";
        $return .= "border-radius: 0 0 6px 6px;";
        $return .= "}";
        $return .= ".bs-docs-sidenav > .active > a {";
        $return .= "position: relative;";
        $return .= "z-index: 2;";
        $return .= "padding: 9px 15px;";
        $return .= "border: 0;";
        $return .= "text-shadow: 0 1px 0 rgba(0,0,0,.15);";
        $return .= "-webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);";
        $return .= "-moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);";
        $return .= "box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);";
        $return .= "}";
        $return .= "/* Chevrons */";
        $return .= ".bs-docs-sidenav .fa fa-hand-o-right {";
        $return .= "float: right;";
        $return .= "margin-top: 2px;";
        $return .= "margin-right: -6px;";
        $return .= "opacity: .25;";
        $return .= "}";
        $return .= ".bs-docs-sidenav > li > a:hover {";
        $return .= "background-color: #f5f5f5;";
        $return .= "}";
        $return .= ".bs-docs-sidenav a:hover .fa fa-hand-o-right {";
        $return .= "opacity: .5;";
        $return .= "}";
        $return .= ".bs-docs-sidenav .active .fa fa-hand-o-right,";
        $return .= ".bs-docs-sidenav .active a:hover .fa fa-hand-o-right {";
        $return .= "background-image: url(../img/glyphicons-halflings-white.png);";
        $return .= "opacity: 1;";
        $return .= "}";
        $return .= ".bs-docs-sidenav.affix {";
        $return .= "top: 40px;";
        $return .= "}";
        $return .= ".bs-docs-sidenav.affix-bottom {";
        $return .= "position: absolute;";
        $return .= "top: auto;";
        $return .= "bottom: 270px;";
        $return .= "}";
        $return .= "/* Responsive";
        $return .= "-------------------------------------------------- */";
        $return .= "/* Desktop large";
        $return .= "------------------------- */";
        $return .= "@media (min-width: 1200px) {";
        $return .= ".bs-docs-container {";
        $return .= "max-width: 970px;";
        $return .= "}";
        $return .= ".bs-docs-sidenav {";
        $return .= "width: 258px;";
        $return .= "}";
        $return .= ".bs-docs-sidenav > li > a {";
        $return .= "width: 230px \9; /* Override the previous IE8-9 hack */";
        $return .= "}";
        $return .= "}";
        $return .= "/* Desktop";
        $return .= "------------------------- */";
        $return .= "@media (max-width: 980px) {";
        $return .= "/* Unfloat brand */";
        $return .= "body > .navbar-fixed-top .brand {";
        $return .= "float: left;";
        $return .= "margin-left: 0;";
        $return .= "padding-left: 10px;";
        $return .= "padding-right: 10px;";
        $return .= "}";
        $return .= "";
        $return .= "/* Inline-block quick links for more spacing */";
        $return .= ".quick-links li {";
        $return .= "display: inline-block;";
        $return .= "margin: 5px;";
        $return .= "}";
        $return .= "";
        $return .= "/* When affixed, space properly */";
        $return .= ".bs-docs-sidenav {";
        $return .= "top: 0;";
        $return .= "width: 218px;";
        $return .= "margin-top: 30px;";
        $return .= "margin-right: 0;";
        $return .= "}";
        $return .= "}";
        $return .= "/* Tablet to desktop";
        $return .= "------------------------- */";
        $return .= "@media (min-width: 768px) and (max-width: 979px) {";
        $return .= "/* Remove any padding from the body */";
        $return .= "body {";
        $return .= "padding-top: 0;";
        $return .= "}";
        $return .= "/* Widen masthead and social buttons to fill body padding */";
        $return .= ".jumbotron {";
        $return .= "margin-top: -20px; /* Offset bottom margin on .navbar */";
        $return .= "}";
        $return .= "/* Adjust sidenav width */";
        $return .= ".bs-docs-sidenav {";
        $return .= "width: 166px;";
        $return .= "margin-top: 20px;";
        $return .= "}";
        $return .= ".bs-docs-sidenav.affix {";
        $return .= "top: 0;";
        $return .= "}";
        $return .= "}";
        $return .= "/* Tablet";
        $return .= "------------------------- */";
        $return .= "@media (max-width: 767px) {";
        $return .= "/* Remove any padding from the body */";
        $return .= "body {";
        $return .= "padding-top: 0;";
        $return .= "}";
        $return .= "";
        $return .= "/* Widen masthead and social buttons to fill body padding */";
        $return .= ".jumbotron {";
        $return .= "padding: 40px 20px;";
        $return .= "margin-top:   -20px; /* Offset bottom margin on .navbar */";
        $return .= "margin-right: -20px;";
        $return .= "margin-left:  -20px;";
        $return .= "}";
        $return .= ".masthead h1 {";
        $return .= "font-size: 90px;";
        $return .= "}";
        $return .= ".masthead p,";
        $return .= ".masthead .btn {";
        $return .= "font-size: 24px;";
        $return .= "}";
        $return .= ".marketing .span4 {";
        $return .= "margin-bottom: 40px;";
        $return .= "}";
        $return .= ".bs-docs-social {";
        $return .= "margin: 0 -20px;";
        $return .= "}";
        $return .= "";
        $return .= "/* Space out the show-grid examples */";
        $return .= ".show-grid [class*=\"span\"] {";
        $return .= "margin-bottom: 5px;";
        $return .= "}";
        $return .= "";
        $return .= "/* Sidenav */";
        $return .= ".bs-docs-sidenav {";
        $return .= "width: auto;";
        $return .= "margin-bottom: 20px;";
        $return .= "}";
        $return .= ".bs-docs-sidenav.affix {";
        $return .= "position: static;";
        $return .= "width: auto;";
        $return .= "top: 0;";
        $return .= "}";
        $return .= "";
        $return .= "/* Unfloat the back to top link in footer */";
        $return .= ".footer {";
        $return .= "margin-left: -20px;";
        $return .= "margin-right: -20px;";
        $return .= "padding-left: 20px;";
        $return .= "padding-right: 20px;";
        $return .= "}";
        $return .= ".footer p {";
        $return .= "margin-bottom: 9px;";
        $return .= "}";
        $return .= "}";
        $return .= "/* Landscape phones";
        $return .= "------------------------- */";
        $return .= "@media (max-width: 480px) {";
        $return .= "/* Remove padding above jumbotron */";
        $return .= "body {";
        $return .= "padding-top: 0;";
        $return .= "}";
        $return .= "";
        $return .= "/* Change up some type stuff */";
        $return .= "h2 small {";
        $return .= "display: block;";
        $return .= "}";
        $return .= "";
        $return .= "/* Downsize the jumbotrons */";
        $return .= ".jumbotron h1 {";
        $return .= "font-size: 45px;";
        $return .= "}";
        $return .= ".jumbotron p,";
        $return .= ".jumbotron .btn {";
        $return .= "font-size: 18px;";
        $return .= "}";
        $return .= ".jumbotron .btn {";
        $return .= "display: block;";
        $return .= "margin: 0 auto;";
        $return .= "}";
        $return .= "";
        $return .= "/* center align subhead text like the masthead */";
        $return .= ".subhead h1,";
        $return .= ".subhead p {";
        $return .= "text-align: center;";
        $return .= "}";
        $return .= "";
        $return .= "/* Marketing on home */";
        $return .= ".marketing h1 {";
        $return .= "font-size: 30px;";
        $return .= "}";
        $return .= ".marketing-byline {";
        $return .= "font-size: 18px;";
        $return .= "}";
        $return .= "";
        $return .= "/* center example sites */";
        $return .= ".example-sites {";
        $return .= "margin-left: 0;";
        $return .= "}";
        $return .= ".example-sites > li {";
        $return .= "float: none;";
        $return .= "display: block;";
        $return .= "max-width: 280px;";
        $return .= "margin: 0 auto 18px;";
        $return .= "text-align: center;";
        $return .= "}";
        $return .= ".example-sites .thumbnail > img {";
        $return .= "max-width: 270px;";
        $return .= "}";
        $return .= "";
        $return .= "/* Do our best to make tables work in narrow viewports */";
        $return .= "table code {";
        $return .= "white-space: normal;";
        $return .= "word-wrap: break-word;";
        $return .= "word-break: break-all;";
        $return .= "}";
        $return .= "";
        $return .= "/* Examples: dropdowns */";
        $return .= ".bs-docs-example-submenus > .pull-left {";
        $return .= "float: none;";
        $return .= "clear: both;";
        $return .= "}";
        $return .= ".bs-docs-example-submenus > .pull-left,";
        $return .= ".bs-docs-example-submenus > .pull-left + .pull-left {";
        $return .= "margin-left: 0;";
        $return .= "}";
        $return .= ".bs-docs-example-submenus p {";
        $return .= "margin-bottom: 0;";
        $return .= "}";
        $return .= ".bs-docs-example-submenus .dropup > .dropdown-menu,";
        $return .= ".bs-docs-example-submenus .dropdown > .dropdown-menu {";
        $return .= "margin-bottom: 10px;";
        $return .= "float: none;";
        $return .= "max-width: 180px;";
        $return .= "}";
        $return .= "";
        $return .= "/* Examples: modal */";
        $return .= ".modal-example .modal {";
        $return .= "position: relative;";
        $return .= "top: auto;";
        $return .= "right: auto;";
        $return .= "bottom: auto;";
        $return .= "left: auto;";
        $return .= "}";
        $return .= "/* Tighten up footer */";
        $return .= ".footer {";
        $return .= "padding-top: 20px;";
        $return .= "padding-bottom: 20px;";
        $return .= "}";
        $return .= "}";
        // Beyond docs.css.
        $return .= ".show-grid {";
        $return .= "margin-left: 0;";
        $return .= "margin-right: 0;";
        $return .= "}";
        $return .= ".bs-docs-example .navbar {";
        $return .= "position: static;";
        $return .= "}";
        $return .= ".bs-docs-example .carousel-indicators {";
        $return .= "background-color: #30add1;";
        $return .= "border-radius: 4px;";
        $return .= "padding: 2px;";
        $return .= "}";
        $return .= ".bs-docs-example .carousel-indicators li {";
        $return .= "margin-left: 2px;";
        $return .= "margin-right: 2px;";
        $return .= "}";
        $return .= ".bs-docs-example .carousel-inner img {";
        $return .= "margin: 0 auto;";
        $return .= "}";
        $return .= "#forms .checkbox input[type=checkbox] {";
        $return .= "margin-left: 0;";
        $return .= "margin-right: 0;";
        $return .= "}";
        $return .= '.'.$this->name.' .thumbnail-container {';
        $return .= 'width: 100%;';
        $return .= 'position: relative;';
        $return .= 'padding-bottom: 75%;';
        $return .= '}';
        $return .= '.'.$this->name.' .thumbnail-container img {';
        $return .= 'position: absolute;';
        $return .= 'max-height: 100%;';
        $return .= 'left: 0;';
        $return .= 'right: 0;';
        $return .= 'top: 0;';
        $return .= 'bottom: 0;';
        $return .= 'margin: auto;';
        $return .= '}';
        $return .= '/* ]]> */';
        $return .= '</style>';

        $return .= '<!-- Grid system';
        $return .= '================================================== -->';
        $return .= '<section id="gridSystem">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Default grid system</h1>';
        $return .= '</div>';
        $return .= '';
        $return .= '<h2>Live grid example</h2>';
        $return .= '<p>The default Bootstrap grid system utilizes <strong>12 columns</strong>, making for a 940px wide container ';
        $return .= 'without <a href="./scaffolding.html#responsive">responsive features</a> enabled. With the responsive CSS ';
        $return .= 'file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, ';
        $return .= 'the columns become fluid and stack vertically.</p>';
        $return .= '<div class="bs-docs-grid">';
        $return .= '<div class="row show-grid">';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '</div>';
        $return .= '<div class="row show-grid">';
        $return .= '<div class="span2">2</div>';
        $return .= '<div class="span3">3</div>';
        $return .= '<div class="span4">4</div>';
        $return .= '</div>';
        $return .= '<div class="row show-grid">';
        $return .= '<div class="span4">4</div>';
        $return .= '<div class="span5">5</div>';
        $return .= '</div>';
        $return .= '<div class="row show-grid">';
        $return .= '<div class="span9">9</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '';
        $return .= '<h3>Basic grid HTML</h3>';
        $return .= '<p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>';
        $return .= '.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 ';
        $return .= 'columns, and should always add up to 12 for each row (or the number of columns in the parent).</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="row"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="span4"&gt;...&lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="span8"&gt;...&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total ';
        $return .= 'columns and a complete row.</p>';
        $return .= '';
        $return .= '<h2>Offsetting columns</h2>';
        $return .= '<p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left ';
        $return .= 'margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> ';
        $return .= 'over four columns.</p>';
        $return .= '<div class="bs-docs-grid">';
        $return .= '<div class="row show-grid">';
        $return .= '<div class="span4">4</div>';
        $return .= '<div class="span3 offset2">3 offset 2</div>';
        $return .= '</div><!-- /row -->';
        $return .= '<div class="row show-grid">';
        $return .= '<div class="span3 offset1">3 offset 1</div>';
        $return .= '<div class="span3 offset2">3 offset 2</div>';
        $return .= '</div><!-- /row -->';
        $return .= '<div class="row show-grid">';
        $return .= '<div class="span6 offset3">6 offset 3</div>';
        $return .= '</div><!-- /row -->';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="row"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="span4"&gt;...&lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="span3 offset2"&gt;...&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h2>Nesting columns</h2>';
        $return .= '<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*';
        $return .= '</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of ';
        $return .= 'columns that add up to the number of columns of its parent.</p>';
        $return .= '<div class="row show-grid">';
        $return .= '<div class="span9">';
        $return .= 'Level 1 column';
        $return .= '<div class="row show-grid">';
        $return .= '<div class="span6">';
        $return .= 'Level 2';
        $return .= '</div>';
        $return .= '<div class="span3">';
        $return .= 'Level 2';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="row"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="span9"&gt;'.PHP_EOL;
        $return .= '    Level 1 column'.PHP_EOL;
        $return .= '    &lt;div class="row"&gt;'.PHP_EOL;
        $return .= '      &lt;div class="span6"&gt;Level 2&lt;/div&gt;'.PHP_EOL;
        $return .= '      &lt;div class="span3"&gt;Level 2&lt;/div&gt;'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '</section>';

        $return .= '<!-- Fluid grid system';
        $return .= '================================================== -->';
        $return .= '<section id="fluidGridSystem">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Fluid grid system</h1>';
        $return .= '</div>';
        $return .= '';
        $return .= '<h2>Live fluid grid example</h2>';
        $return .= '<p>The fluid grid system uses percents instead of pixels for column widths. It has the same ';
        $return .= 'responsive capabilities as our fixed grid system, ensuring proper proportions for key screen ';
        $return .= 'resolutions and devices.</p>';
        $return .= '<div class="bs-docs-grid">';
        $return .= '<div class="row-fluid show-grid">';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '<div class="span1">1</div>';
        $return .= '</div>';
        $return .= '<div class="row-fluid show-grid">';
        $return .= '<div class="span4">4</div>';
        $return .= '<div class="span4">4</div>';
        $return .= '<div class="span4">4</div>';
        $return .= '</div>';
        $return .= '<div class="row-fluid show-grid">';
        $return .= '<div class="span4">4</div>';
        $return .= '<div class="span8">8</div>';
        $return .= '</div>';
        $return .= '<div class="row-fluid show-grid">';
        $return .= '<div class="span6">6</div>';
        $return .= '<div class="span6">6</div>';
        $return .= '</div>';
        $return .= '<div class="row-fluid show-grid">';
        $return .= '<div class="span12">12</div>';
        $return .= '</div>';
        $return .= '</div>';

        $return .= '<h3>Basic fluid grid HTML</h3>';
        $return .= '<p>Make any row "fluid" by changing <code>.row</code> to <code>.row-fluid</code>. The ';
        $return .= 'column classes stay the exact same, making it easy to flip between fixed and fluid grids.</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="row-fluid"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="span4"&gt;...&lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="span8"&gt;...&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h2>Fluid offsetting</h2>';
        $return .= '<p>Operates the same way as the fixed grid system offsetting: add <code>.offset*</code> ';
        $return .= 'to any column to offset by that many columns.</p>';
        $return .= '<div class="bs-docs-grid">';
        $return .= '<div class="row-fluid show-grid">';
        $return .= '<div class="span4">4</div>';
        $return .= '<div class="span4 offset4">4 offset 4</div>';
        $return .= '</div><!-- /row -->';
        $return .= '<div class="row-fluid show-grid">';
        $return .= '<div class="span3 offset3">3 offset 3</div>';
        $return .= '<div class="span3 offset3">3 offset 3</div>';
        $return .= '</div><!-- /row -->';
        $return .= '<div class="row-fluid show-grid">';
        $return .= '<div class="span6 offset6">6 offset 6</div>';
        $return .= '</div><!-- /row -->';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="row-fluid"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="span4"&gt;...&lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="span4 offset2"&gt;...&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h2>Fluid nesting</h2>';
        $return .= '<p>Fluid grids utilize nesting differently: each nested level of columns should add up to 12 ';
        $return .= 'columns. This is because the fluid grid uses percentages, not pixels, for setting widths.</p>';
        $return .= '<div class="row-fluid show-grid">';
        $return .= '<div class="span12">';
        $return .= 'Fluid 12';
        $return .= '<div class="row-fluid show-grid">';
        $return .= '<div class="span6">';
        $return .= 'Fluid 6';
        $return .= '<div class="row-fluid show-grid">';
        $return .= '<div class="span6">';
        $return .= 'Fluid 6';
        $return .= '</div>';
        $return .= '<div class="span6">';
        $return .= 'Fluid 6';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<div class="span6">';
        $return .= 'Fluid 6';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="row-fluid"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="span12"&gt;'.PHP_EOL;
        $return .= '    Fluid 12'.PHP_EOL;
        $return .= '    &lt;div class="row-fluid"&gt;'.PHP_EOL;
        $return .= '      &lt;div class="span6"&gt;'.PHP_EOL;
        $return .= '        Fluid 6'.PHP_EOL;
        $return .= '        &lt;div class="row-fluid"&gt;'.PHP_EOL;
        $return .= '          &lt;div class="span6"&gt;Fluid 6&lt;/div&gt;'.PHP_EOL;
        $return .= '          &lt;div class="span6"&gt;Fluid 6&lt;/div&gt;'.PHP_EOL;
        $return .= '        &lt;/div&gt;'.PHP_EOL;
        $return .= '      &lt;/div&gt;'.PHP_EOL;
        $return .= '      &lt;div class="span6"&gt;Fluid 6&lt;/div&gt;'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '</section>';

        $return .= '<!-- Layouts (Default and fluid)';
        $return .= '================================================== -->';
        $return .= '<section id="layouts">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Layouts</h1>';
        $return .= '</div>';

        $return .= '<h2>Fixed layout</h2>';
        $return .= '<p>Provides a common fixed-width (and optionally responsive) layout with only <code>&lt;div ';
        $return .= 'class="container"&gt;</code> required.</p>';
        $return .= '<div class="mini-layout">';
        $return .= '<div class="mini-layout-body"></div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;body&gt;'.PHP_EOL;
        $return .= '  &lt;div class="container"&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/body&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h2>Fluid layout</h2>';
        $return .= '<p>Create a fluid, two-column page with <code>&lt;div class="container-fluid"&gt;</code>&mdash;great for ';
        $return .= 'applications and docs.</p>';
        $return .= '<div class="mini-layout fluid">';
        $return .= '<div class="mini-layout-sidebar"></div>';
        $return .= '<div class="mini-layout-body"></div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="container-fluid"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="row-fluid"&gt;'.PHP_EOL;
        $return .= '    &lt;div class="span2"&gt;'.PHP_EOL;
        $return .= '      &lt;!--Sidebar content--&gt;'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '    &lt;div class="span10"&gt;'.PHP_EOL;
        $return .= '      &lt;!--Body content--&gt;'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '</section>';

        $return .= '<!-- Responsive design';
        $return .= '================================================== -->';
        $return .= '<section id="responsive">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Responsive design</h1>';
        $return .= '</div>';
        $return .= '';
        $return .= '<h2>Enabling responsive features</h2>';
        $return .= '<p>Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within ';
        $return .= 'the <code>&lt;head&gt;</code> of your document. If you\'ve compiled Bootstrap from the Customize page, you ';
        $return .= 'need only include the meta tag.</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;'.PHP_EOL;
        $return .= '&lt;link href="assets/css/bootstrap-responsive.css" rel="stylesheet"&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p><span class="label label-info">Heads up!</span>  Bootstrap doesn\'t include responsive features by default ';
        $return .= 'at this time as not everything needs to be responsive. Instead of encouraging developers to remove this ';
        $return .= 'feature, we figure it best to enable it as needed.</p>';
        $return .= '';
        $return .= '<h2>About responsive Bootstrap</h2>';
        $return .= '<p>Media queries allow for custom CSS based on a number of conditions&mdash;ratios, widths, display type, ';
        $return .= 'etc&mdash;but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>';
        $return .= '<ul>';
        $return .= '<li>Modify the width of column in our grid</li>';
        $return .= '<li>Stack elements instead of float wherever necessary</li>';
        $return .= '<li>Resize headings and text to be more appropriate for devices</li>';
        $return .= '</ul>';
        $return .= '<p>Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do ';
        $return .= 'consider dedicated code bases and not layers of media queries.</p>';
        $return .= '';
        $return .= '<h2>Supported devices</h2>';
        $return .= '<p>Bootstrap supports a handful of media queries in a single file to help make your projects more ';
        $return .= 'appropriate on different devices and screen resolutions. Here\'s what\'s included:</p>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th>Label</th>';
        $return .= '<th>Layout width</th>';
        $return .= '<th>Column width</th>';
        $return .= '<th>Gutter width</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>Large display</td>';
        $return .= '<td>1200px and up</td>';
        $return .= '<td>70px</td>';
        $return .= '<td>30px</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>Default</td>';
        $return .= '<td>980px and up</td>';
        $return .= '<td>60px</td>';
        $return .= '<td>20px</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>Portrait tablets</td>';
        $return .= '<td>768px and above</td>';
        $return .= '<td>42px</td>';
        $return .= '<td>20px</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>Phones to tablets</td>';
        $return .= '<td>767px and below</td>';
        $return .= '<td class="muted" colspan="2">Fluid columns, no fixed widths</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>Phones</td>';
        $return .= '<td>480px and below</td>';
        $return .= '<td class="muted" colspan="2">Fluid columns, no fixed widths</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '/* Large desktop */'.PHP_EOL;
        $return .= '@media (min-width: 1200px) { ... }'.PHP_EOL.PHP_EOL;
        $return .= '/* Portrait tablet to landscape and desktop */'.PHP_EOL;
        $return .= '@media (min-width: 768px) and (max-width: 979px) { ... }'.PHP_EOL.PHP_EOL;
        $return .= '/* Landscape phone to portrait tablet */'.PHP_EOL;
        $return .= '@media (max-width: 767px) { ... }'.PHP_EOL.PHP_EOL;
        $return .= '/* Landscape phones and down */'.PHP_EOL;
        $return .= '@media (max-width: 480px) { ... }'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h2>Responsive utility classes</h2>';
        $return .= '<p>For faster mobile-friendly development, use these utility classes for showing and hiding content by ';
        $return .= 'device.  Below is a table of the available classes and their effect on a given media query layout (labeled ';
        $return .= 'by device). They can be found in <code>responsive.less</code>.</p>';
        $return .= '<table class="table table-bordered table-striped responsive-utilities">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th>Class</th>';
        $return .= '<th>Phones <small>767px and below</small></th>';
        $return .= '<th>Tablets <small>979px to 768px</small></th>';
        $return .= '<th>Desktops <small>Default</small></th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<th><code>.visible-phone</code></th>';
        $return .= '<td class="is-visible">Visible</td>';
        $return .= '<td class="is-hidden">Hidden</td>';
        $return .= '<td class="is-hidden">Hidden</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<th><code>.visible-tablet</code></th>';
        $return .= '<td class="is-hidden">Hidden</td>';
        $return .= '<td class="is-visible">Visible</td>';
        $return .= '<td class="is-hidden">Hidden</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<th><code>.visible-desktop</code></th>';
        $return .= '<td class="is-hidden">Hidden</td>';
        $return .= '<td class="is-hidden">Hidden</td>';
        $return .= '<td class="is-visible">Visible</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<th><code>.hidden-phone</code></th>';
        $return .= '<td class="is-hidden">Hidden</td>';
        $return .= '<td class="is-visible">Visible</td>';
        $return .= '<td class="is-visible">Visible</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<th><code>.hidden-tablet</code></th>';
        $return .= '<td class="is-visible">Visible</td>';
        $return .= '<td class="is-hidden">Hidden</td>';
        $return .= '<td class="is-visible">Visible</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<th><code>.hidden-desktop</code></th>';
        $return .= '<td class="is-visible">Visible</td>';
        $return .= '<td class="is-visible">Visible</td>';
        $return .= '<td class="is-hidden">Hidden</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '';
        $return .= '<h3>When to use</h3>';
        $return .= '<p>Use on a limited basis and avoid creating entirely different versions of the same site.  Instead, ';
        $return .= 'use them to complement each device\'s presentation. Responsive utilities should not be used with tables, ';
        $return .= 'and as such are not supported.</p>';
        $return .= '';
        $return .= '<h3>Responsive utilities test case</h3>';
        $return .= '<p>Resize your browser or load on different devices to test the above classes.</p>';
        $return .= '<h4>Visible on...</h4>';
        $return .= '<p>Green checkmarks indicate that class is visible in your current viewport.</p>';
        $return .= '<ul class="responsive-utilities-test">';
        $return .= '<li>Phone<span class="visible-phone">&#10004; Phone</span></li>';
        $return .= '<li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>';
        $return .= '<li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>';
        $return .= '</ul>';
        $return .= '<h4>Hidden on...</h4>';
        $return .= '<p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>';
        $return .= '<ul class="responsive-utilities-test hidden-on">';
        $return .= '<li>Phone<span class="hidden-phone">&#10004; Phone</span></li>';
        $return .= '<li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>';
        $return .= '<li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>';
        $return .= '</ul>';
        $return .= '';
        $return .= '</section>';

        $return .= '<!-- Typography';
        $return .= '================================================== -->';
        $return .= '<section id="typography">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Typography</h1>';
        $return .= '</div>';

        $return .= '<h2 id="headings">Headings</h2>';
        $return .= '<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<h1>h1. Heading 1</h1>';
        $return .= '<h2>h2. Heading 2</h2>';
        $return .= '<h3>h3. Heading 3</h3>';
        $return .= '<h4>h4. Heading 4</h4>';
        $return .= '<h5>h5. Heading 5</h5>';
        $return .= '<h6>h6. Heading 6</h6>';
        $return .= '</div>';

        $return .= '<h2 id="body-copy">Body copy</h2>';
        $return .= '<p>Bootstrap\'s global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height';
        $return .= '</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs.';
        $return .= 'In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height ';
        $return .= '(10px by default).</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis ';
        $return .= 'dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>';
        $return .= '<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ';
        $return .= 'ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat ';
        $return .= 'porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>';
        $return .= '<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta ';
        $return .= 'gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia ';
        $return .= 'odio sem nec elit.</p>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint">&lt;p&gt;...&lt;/p&gt;</pre>';

        $return .= '<h3>Lead body copy</h3>';
        $return .= '<p>Make a paragraph stand out by adding <code>.lead</code>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, ';
        $return .= 'est non commodo luctus.</p>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>';

        $return .= '<h3>Built with Less</h3>';
        $return .= '<p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>';
        $return .= '@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout';
        $return .= 'and the second is the base line-height. We use those variables and some simple math to create the margins, ';
        $return .= 'paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2 id="emphasis">Emphasis</h2>';
        $return .= '<p>Make use of HTML\'s default emphasis tags with lightweight styles.</p>';

        $return .= '<h3><code>&lt;small&gt;</code></h3>';
        $return .= '<p>For de-emphasizing inline or blocks of text, <small>use the small tag.</small></p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<p><small>This line of text is meant to be treated as fine print.</small></p>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint">';
        $return .= '&lt;p&gt;'.PHP_EOL;
        $return .= '&lt;small&gt;This line of text is meant to be treated as fine print.&lt;/small&gt;'.PHP_EOL;
        $return .= '&lt;/p&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Bold</h3>';
        $return .= '<p>For emphasizing a snippet of text with a heavier font-weight.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint">&lt;strong&gt;rendered as bold text&lt;/strong&gt;</pre>';

        $return .= '<h3>Italics</h3>';
        $return .= '<p>For emphasizing a snippet of text with italics.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<p>The following snippet of text is <em>rendered as italicized text</em>.</p>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre>';

        $return .= '<p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>';
        $return .= '&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying';
        $return .= 'additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>';

        $return .= '<h3>Alignment classes</h3>';
        $return .= '<p>Easily realign text to components with text alignment classes.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<p class="text-left">Left aligned text.</p>';
        $return .= '<p class="text-center">Center aligned text.</p>';
        $return .= '<p class="text-right">Right aligned text.</p>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;p class="text-left"&gt;Left aligned text.&lt;/p&gt;'.PHP_EOL;
        $return .= '&lt;p class="text-center"&gt;Center aligned text.&lt;/p&gt;'.PHP_EOL;
        $return .= '&lt;p class="text-right"&gt;Right aligned text.&lt;/p&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Emphasis classes</h3>';
        $return .= '<p>Convey meaning through color with a handful of emphasis utility classes.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>';
        $return .= '<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>';
        $return .= '<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>';
        $return .= '<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>';
        $return .= '<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;p class="muted"&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.&lt;/p&gt;'.PHP_EOL;
        $return .= '&lt;p class="text-warning"&gt;Etiam porta sem malesuada magna mollis euismod.&lt;/p&gt;'.PHP_EOL;
        $return .= '&lt;p class="text-error"&gt;Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;'.PHP_EOL;
        $return .= '&lt;p class="text-info"&gt;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.&lt;';
        $return .= '/p&gt;'.PHP_EOL;
        $return .= '&lt;p class="text-success"&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;';
        $return .= '/p&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2 id="abbreviations">Abbreviations</h2>';
        $return .= '<p>Stylized implementation of HTML\'s <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to ';
        $return .= 'show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted ';
        $return .= 'bottom border and a help cursor on hover, providing additional context on hover.</p>';

        $return .= '<h3><code>&lt;abbr&gt;</code></h3>';
        $return .= '<p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint">&lt;abbr title="attribute"&gt;attr&lt;/abbr&gt;</pre>';

        $return .= '<h3><code>&lt;abbr class="initialism"&gt;</code></h3>';
        $return .= '<p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced ';
        $return .= 'bread.</p>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint">&lt;abbr title="HyperText Markup Language" class="initialism"&gt;HTML&lt;/abbr&gt;';
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2 id="addresses">Addresses</h2>';
        $return .= '<p>Present contact information for the nearest ancestor or the entire body of work.</p>';

        $return .= '<h3><code>&lt;address&gt;</code></h3>';
        $return .= '<p>Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<address>';
        $return .= '<strong>Twitter, Inc.</strong><br>';
        $return .= '795 Folsom Ave, Suite 600<br>';
        $return .= 'San Francisco, CA 94107<br>';
        $return .= '<abbr title="Phone">P:</abbr> (123) 456-7890';
        $return .= '</address>';
        $return .= '<address>';
        $return .= '<strong>Full Name</strong><br>';
        $return .= '<a href="mailto:#">first.last@example.com</a>';
        $return .= '</address>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;address&gt;'.PHP_EOL;
        $return .= '  &lt;strong&gt;Twitter, Inc.&lt;/strong&gt;&lt;br&gt;'.PHP_EOL;
        $return .= '  795 Folsom Ave, Suite 600&lt;br&gt;'.PHP_EOL;
        $return .= '  San Francisco, CA 94107&lt;br&gt;'.PHP_EOL;
        $return .= '  &lt;abbr title="Phone"&gt;P:&lt;/abbr&gt; (123) 456-7890'.PHP_EOL;
        $return .= '&lt;/address&gt;'.PHP_EOL.PHP_EOL;

        $return .= '&lt;address&gt;'.PHP_EOL;
        $return .= '  &lt;strong&gt;Full Name&lt;/strong&gt;&lt;br&gt;'.PHP_EOL;
        $return .= '  &lt;a href="mailto:#"&gt;first.last@example.com&lt;/a&gt;'.PHP_EOL;
        $return .= '&lt;/address&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2 id="blockquotes">Blockquotes</h2>';
        $return .= '<p>For quoting blocks of content from another source within your document.</p>';

        $return .= '<h3>Default blockquote</h3>';
        $return .= '<p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> ';
        $return .= 'as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<blockquote>';
        $return .= '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>';
        $return .= '</blockquote>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;blockquote&gt;'.PHP_EOL;
        $return .= '  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;';
        $return .= '/p&gt;'.PHP_EOL;
        $return .= '&lt;/blockquote&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Blockquote options</h3>';
        $return .= '<p>Style and content changes for simple variations on a standard blockquote.</p>';

        $return .= '<h4>Naming a source</h4>';
        $return .= '<p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>';
        $return .= '&lt;cite&gt;</code>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<blockquote>';
        $return .= '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>';
        $return .= '<small>Someone famous in <cite title="Source Title">Source Title</cite></small>';
        $return .= '</blockquote>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;blockquote&gt;'.PHP_EOL;
        $return .= '  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;';
        $return .= '/p&gt;'.PHP_EOL;
        $return .= '  &lt;small&gt;Someone famous &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/small';
        $return .= '&gt;'.PHP_EOL;
        $return .= '&lt;/blockquote&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h4>Alternate displays</h4>';
        $return .= '<p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>';
        $return .= '<div class="bs-docs-example" style="overflow: hidden;">';
        $return .= '<blockquote class="pull-right">';
        $return .= '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>';
        $return .= '<small>Someone famous in <cite title="Source Title">Source Title</cite></small>';
        $return .= '</blockquote>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;blockquote class="pull-right"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/blockquote&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<!-- Lists -->';
        $return .= '<h2 id="lists">Lists</h2>';

        $return .= '<h3>Unordered</h3>';
        $return .= '<p>A list of items in which the order does <em>not</em> explicitly matter.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul>';
        $return .= '<li>Lorem ipsum dolor sit amet</li>';
        $return .= '<li>Consectetur adipiscing elit</li>';
        $return .= '<li>Integer molestie lorem at massa</li>';
        $return .= '<li>Facilisis in pretium nisl aliquet</li>';
        $return .= '<li>Nulla volutpat aliquam velit';
        $return .= '<ul>';
        $return .= '<li>Phasellus iaculis neque</li>';
        $return .= '<li>Purus sodales ultricies</li>';
        $return .= '<li>Vestibulum laoreet porttitor sem</li>';
        $return .= '<li>Ac tristique libero volutpat at</li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '<li>Faucibus porta lacus fringilla vel</li>';
        $return .= '<li>Aenean sit amet erat nunc</li>';
        $return .= '<li>Eget porttitor lorem</li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;...&lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Ordered</h3>';
        $return .= '<p>A list of items in which the order <em>does</em> explicitly matter.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ol>';
        $return .= '<li>Lorem ipsum dolor sit amet</li>';
        $return .= '<li>Consectetur adipiscing elit</li>';
        $return .= '<li>Integer molestie lorem at massa</li>';
        $return .= '<li>Facilisis in pretium nisl aliquet</li>';
        $return .= '<li>Nulla volutpat aliquam velit</li>';
        $return .= '<li>Faucibus porta lacus fringilla vel</li>';
        $return .= '<li>Aenean sit amet erat nunc</li>';
        $return .= '<li>Eget porttitor lorem</li>';
        $return .= '</ol>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ol&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;...&lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ol&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Unstyled</h3>';
        $return .= '<p>Remove the default <code>list-style</code> and left padding on list items (immediate children only).</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul class="unstyled">';
        $return .= '<li>Lorem ipsum dolor sit amet</li>';
        $return .= '<li>Consectetur adipiscing elit</li>';
        $return .= '<li>Integer molestie lorem at massa</li>';
        $return .= '<li>Facilisis in pretium nisl aliquet</li>';
        $return .= '<li>Nulla volutpat aliquam velit';
        $return .= '<ul>';
        $return .= '<li>Phasellus iaculis neque</li>';
        $return .= '<li>Purus sodales ultricies</li>';
        $return .= '<li>Vestibulum laoreet porttitor sem</li>';
        $return .= '<li>Ac tristique libero volutpat at</li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '<li>Faucibus porta lacus fringilla vel</li>';
        $return .= '<li>Aenean sit amet erat nunc</li>';
        $return .= '<li>Eget porttitor lorem</li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="unstyled"&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;...&lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Inline</h3>';
        $return .= '<p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul class="inline">';
        $return .= '<li>Lorem ipsum</li>';
        $return .= '<li>Phasellus iaculis</li>';
        $return .= '<li>Nulla volutpat</li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="inline"&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;...&lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Description</h3>';
        $return .= '<p>A list of terms with their associated descriptions.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<dl>';
        $return .= '<dt>Description lists</dt>';
        $return .= '<dd>A description list is perfect for defining terms.</dd>';
        $return .= '<dt>Euismod</dt>';
        $return .= '<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>';
        $return .= '<dd>Donec id elit non mi porta gravida at eget metus.</dd>';
        $return .= '<dt>Malesuada porta</dt>';
        $return .= '<dd>Etiam porta sem malesuada magna mollis euismod.</dd>';
        $return .= '</dl>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;dl&gt;'.PHP_EOL;
        $return .= '  &lt;dt&gt;...&lt;/dt&gt;'.PHP_EOL;
        $return .= '  &lt;dd&gt;...&lt;/dd&gt;'.PHP_EOL;
        $return .= '&lt;/dl&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h4>Horizontal description</h4>';
        $return .= '<p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<dl class="dl-horizontal">';
        $return .= '<dt>Description lists</dt>';
        $return .= '<dd>A description list is perfect for defining terms.</dd>';
        $return .= '<dt>Euismod</dt>';
        $return .= '<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>';
        $return .= '<dd>Donec id elit non mi porta gravida at eget metus.</dd>';
        $return .= '<dt>Malesuada porta</dt>';
        $return .= '<dd>Etiam porta sem malesuada magna mollis euismod.</dd>';
        $return .= '<dt>Felis euismod semper eget lacinia</dt>';
        $return .= '<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit ';
        $return .= 'amet risus.</dd>';
        $return .= '</dl>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;dl class="dl-horizontal"&gt;'.PHP_EOL;
        $return .= '  &lt;dt&gt;...&lt;/dt&gt;'.PHP_EOL;
        $return .= '  &lt;dd&gt;...&lt;/dd&gt;'.PHP_EOL;
        $return .= '&lt;/dl&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p>';
        $return .= '<span class="label label-info">Heads up!</span>';
        $return .= 'Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>';
        $return .= 'text-overflow</code>. In narrower viewports, they will change to the default stacked layout.';
        $return .= '</p>';
        $return .= '</section>';

        $return .= '<!-- Code';
        $return .= '================================================== -->';
        $return .= '<section id="code">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Code</h1>';
        $return .= '</div>';

        $return .= '<h2>Inline</h2>';
        $return .= '<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '  For example, <code>&lt;section&gt;</code> should be wrapped as inline.';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= 'For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped as inline.';
        $return .= '</pre>';

        $return .= '<h2>Basic block</h2>';
        $return .= '<p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the ';
        $return .= 'code for proper rendering.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '  <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums" style="margin-bottom: 9px;">';
        $return .= '&lt;pre&gt;'.PHP_EOL;
        $return .= '  &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;'.PHP_EOL;
        $return .= '&lt;/pre&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p><span class="label label-info">Heads up!</span> Be sure to keep code within <code>&lt;pre&gt;</code> ';
        $return .= 'tags as close to the left as possible; it will render all tabs.</p>';
        $return .= '<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and ';
        $return .= 'provide a y-axis scrollbar.</p>';
        $return .= '</section>';

        $return .= '<!-- Tables';
        $return .= '================================================== -->';
        $return .= '<section id="tables">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Tables</h1>';
        $return .= '</div>';

        $return .= '<h2>Default styles</h2>';
        $return .= '<p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class ';
        $return .= '<code>.table</code> to any <code>&lt;table&gt;</code>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<table class="table">';
        $return .= $this->tableone();
        $return .= '&lt;table class="table"&gt;'.PHP_EOL;
        $return .= '  …'.PHP_EOL;
        $return .= '&lt;/table&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Optional classes</h2>';
        $return .= '<p>Add any of the following classes to the <code>.table</code> base class.</p>';

        $return .= '<h3><code>.table-striped</code></h3>';
        $return .= '<p>Adds zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child';
        $return .= '</code> CSS selector (not available in IE7-8).</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<table class="table table-striped">';
        $return .= $this->tableone();
        $return .= '&lt;table class="table table-striped"&gt;'.PHP_EOL;
        $return .= '  …'.PHP_EOL;
        $return .= '&lt;/table&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3><code>.table-bordered</code></h3>';
        $return .= '<p>Add borders and rounded corners to the table.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<table class="table table-bordered">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '  <th>#</th>';
        $return .= '  <th>First Name</th>';
        $return .= '  <th>Last Name</th>';
        $return .= '  <th>Username</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '  <td rowspan="2">1</td>';
        $return .= '  <td>Mark</td>';
        $return .= '  <td>Otto</td>';
        $return .= '  <td>@mdo</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '  <td>Mark</td>';
        $return .= '  <td>Otto</td>';
        $return .= '  <td>@TwBootstrap</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '  <td>2</td>';
        $return .= '  <td>Jacob</td>';
        $return .= '  <td>Thornton</td>';
        $return .= '  <td>@fat</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '  <td>3</td>';
        $return .= '  <td colspan="2">Larry the Bird</td>';
        $return .= '  <td>@twitter</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;table class="table table-bordered"&gt;'.PHP_EOL;
        $return .= '  …'.PHP_EOL;
        $return .= '&lt;/table&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3><code>.table-hover</code></h3>';
        $return .= '<p>Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<table class="table table-hover">';
        $return .= $this->tabletwo();
        $return .= '&lt;table class="table table-hover"&gt;'.PHP_EOL;
        $return .= '  …'.PHP_EOL;
        $return .= '&lt;/table&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3><code>.table-condensed</code></h3>';
        $return .= '<p>Makes tables more compact by cutting cell padding in half.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<table class="table table-condensed">';
        $return .= $this->tabletwo();
        $return .= '&lt;table class="table table-condensed"&gt;'.PHP_EOL;
        $return .= '  …'.PHP_EOL;
        $return .= '&lt;/table&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Optional row classes</h2>';
        $return .= '<p>Use contextual classes to color table rows.</p>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<colgroup>';
        $return .= '<col class="span1">';
        $return .= '<col class="span7">';
        $return .= '</colgroup>';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th>Class</th>';
        $return .= '<th>Description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '  <code>.success</code>';
        $return .= '</td>';
        $return .= '<td>Indicates a successful or positive action.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '  <code>.error</code>';
        $return .= '</td>';
        $return .= '<td>Indicates a dangerous or potentially negative action.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '  <code>.warning</code>';
        $return .= '</td>';
        $return .= '<td>Indicates a warning that might need attention.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '  <code>.info</code>';
        $return .= '</td>';
        $return .= '<td>Used as an alternative to the default styles.</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<table class="table">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '  <th>#</th>';
        $return .= '  <th>Product</th>';
        $return .= '  <th>Payment Taken</th>';
        $return .= '  <th>Status</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr class="success">';
        $return .= '  <td>1</td>';
        $return .= '  <td>TB - Monthly</td>';
        $return .= '  <td>01/04/2012</td>';
        $return .= '  <td>Approved</td>';
        $return .= '</tr>';
        $return .= '<tr class="error">';
        $return .= '  <td>2</td>';
        $return .= '  <td>TB - Monthly</td>';
        $return .= '  <td>02/04/2012</td>';
        $return .= '  <td>Declined</td>';
        $return .= '</tr>';
        $return .= '<tr class="warning">';
        $return .= '  <td>3</td>';
        $return .= '  <td>TB - Monthly</td>';
        $return .= '  <td>03/04/2012</td>';
        $return .= '  <td>Pending</td>';
        $return .= '</tr>';
        $return .= '<tr class="info">';
        $return .= '  <td>4</td>';
        $return .= '  <td>TB - Monthly</td>';
        $return .= '  <td>04/04/2012</td>';
        $return .= '  <td>Call in to confirm</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '...'.PHP_EOL;
        $return .= '  &lt;tr class="success"&gt;'.PHP_EOL;
        $return .= '    &lt;td&gt;1&lt;/td&gt;'.PHP_EOL;
        $return .= '    &lt;td&gt;TB - Monthly&lt;/td&gt;'.PHP_EOL;
        $return .= '    &lt;td&gt;01/04/2012&lt;/td&gt;'.PHP_EOL;
        $return .= '    &lt;td&gt;Approved&lt;/td&gt;'.PHP_EOL;
        $return .= '  &lt;/tr&gt;'.PHP_EOL;
        $return .= '...'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Supported table markup</h2>';
        $return .= '<p>List of supported table HTML elements and how they should be used.</p>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<colgroup>';
        $return .= '<col class="span1">';
        $return .= '<col class="span7">';
        $return .= '</colgroup>';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th>Tag</th>';
        $return .= '<th>Description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '  <code>&lt;table&gt;</code>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '  Wrapping element for displaying data in a tabular format';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '  <code>&lt;thead&gt;</code>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '  Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '  <code>&lt;tbody&gt;</code>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '  Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '  <code>&lt;tr&gt;</code>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '  Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) ';
        $return .= 'that appears on a single row';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '  <code>&lt;td&gt;</code>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '  Default table cell';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '  <code>&lt;th&gt;</code>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '  Special table cell for column (or row, depending on scope and placement) labels';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '  <code>&lt;caption&gt;</code>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '  Description or summary of what the table holds, especially useful for screen readers';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;table&gt;'.PHP_EOL;
        $return .= '  &lt;caption&gt;...&lt;/caption&gt;'.PHP_EOL;
        $return .= '  &lt;thead&gt;'.PHP_EOL;
        $return .= '    &lt;tr&gt;'.PHP_EOL;
        $return .= '      &lt;th&gt;...&lt;/th&gt;'.PHP_EOL;
        $return .= '      &lt;th&gt;...&lt;/th&gt;'.PHP_EOL;
        $return .= '    &lt;/tr&gt;'.PHP_EOL;
        $return .= '  &lt;/thead&gt;'.PHP_EOL;
        $return .= '  &lt;tbody&gt;'.PHP_EOL;
        $return .= '    &lt;tr&gt;'.PHP_EOL;
        $return .= '      &lt;td&gt;...&lt;/td&gt;'.PHP_EOL;
        $return .= '      &lt;td&gt;...&lt;/td&gt;'.PHP_EOL;
        $return .= '    &lt;/tr&gt;'.PHP_EOL;
        $return .= '  &lt;/tbody&gt;'.PHP_EOL;
        $return .= '&lt;/table&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '</section>';

        $return .= '<!-- Forms';
        $return .= '================================================== -->';
        $return .= '<section id="forms">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Forms</h1>';
        $return .= '</div>';

        $return .= '<h2>Default styles</h2>';
        $return .= '<p>Individual form controls receive styling, but without any required base class on the <code>';
        $return .= '&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top ';
        $return .= 'of form controls.</p>';
        $return .= '<form class="bs-docs-example">';
        $return .= '<fieldset>';
        $return .= '<legend>Legend</legend>';
        $return .= '<label>Label name</label>';
        $return .= '<input type="text" placeholder="Type something…">';
        $return .= '<span class="help-block">Example block-level help text here.</span>';
        $return .= '<label class="checkbox">';
        $return .= '<input type="checkbox"> Check me out';
        $return .= '</label>';
        $return .= '<button type="submit" class="btn">Submit</button>';
        $return .= '</fieldset>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;form&gt;'.PHP_EOL;
        $return .= '  &lt;fieldset&gt;'.PHP_EOL;
        $return .= '    &lt;legend&gt;Legend&lt;/legend&gt;'.PHP_EOL;
        $return .= '    &lt;label&gt;Label name&lt;/label&gt;'.PHP_EOL;
        $return .= '    &lt;input type="text" placeholder="Type something…"&gt;'.PHP_EOL;
        $return .= '    &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;'.PHP_EOL;
        $return .= '    &lt;label class="checkbox"&gt;'.PHP_EOL;
        $return .= '      &lt;input type="checkbox"&gt; Check me out'.PHP_EOL;
        $return .= '    &lt;/label&gt;'.PHP_EOL;
        $return .= '    &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;/fieldset&gt;'.PHP_EOL;
        $return .= '&lt;/form&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Optional layouts</h2>';
        $return .= '<p>Included with Bootstrap are three optional form layouts for common use cases.</p>';

        $return .= '<h3>Search form</h3>';
        $return .= '<p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>&lt;input&gt;';
        $return .= '</code> for an extra-rounded text input.</p>';
        $return .= '<form class="bs-docs-example form-search">';
        $return .= '<input type="text" class="input-medium search-query">';
        $return .= '<button type="submit" class="btn">Search</button>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;form class="form-search"&gt;'.PHP_EOL;
        $return .= '  &lt;input type="text" class="input-medium search-query"&gt;'.PHP_EOL;
        $return .= '  &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;'.PHP_EOL;
        $return .= '&lt;/form&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Inline form</h3>';
        $return .= '<p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>';
        $return .= '<form class="bs-docs-example form-inline">';
        $return .= '<input type="text" class="input-small" placeholder="Email">';
        $return .= '<input type="password" class="input-small" placeholder="Password">';
        $return .= '<label class="checkbox">';
        $return .= '<input type="checkbox"> Remember me';
        $return .= '</label>';
        $return .= '<button type="submit" class="btn">Sign in</button>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;form class="form-inline"&gt;'.PHP_EOL;
        $return .= '  &lt;input type="text" class="input-small" placeholder="Email"&gt;'.PHP_EOL;
        $return .= '  &lt;input type="password" class="input-small" placeholder="Password"&gt;'.PHP_EOL;
        $return .= '  &lt;label class="checkbox"&gt;'.PHP_EOL;
        $return .= '    &lt;input type="checkbox"&gt; Remember me'.PHP_EOL;
        $return .= '  &lt;/label&gt;'.PHP_EOL;
        $return .= '  &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;'.PHP_EOL;
        $return .= '&lt;/form&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Horizontal form</h3>';
        $return .= '<p>Right align labels and float them to the left to make them appear on the same line as controls. Requires ';
        $return .= 'the most markup changes from a default form:</p>';
        $return .= '<ul>';
        $return .= '<li>Add <code>.form-horizontal</code> to the form</li>';
        $return .= '<li>Wrap labels and controls in <code>.control-group</code></li>';
        $return .= '<li>Add <code>.control-label</code> to the label</li>';
        $return .= '<li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>';
        $return .= '</ul>';
        $return .= '<form class="bs-docs-example form-horizontal">';
        $return .= '<div class="control-group">';
        $return .= '<label class="control-label" for="inputEmail">Email</label>';
        $return .= '<div class="controls">';
        $return .= '<input type="text" id="inputEmail" placeholder="Email">';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<div class="control-group">';
        $return .= '<label class="control-label" for="inputPassword">Password</label>';
        $return .= '<div class="controls">';
        $return .= '<input type="password" id="inputPassword" placeholder="Password">';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<div class="control-group">';
        $return .= '<div class="controls">';
        $return .= '<label class="checkbox">';
        $return .= '  <input type="checkbox"> Remember me';
        $return .= '</label>';
        $return .= '<button type="submit" class="btn">Sign in</button>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;form class="form-horizontal"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="control-group"&gt;'.PHP_EOL;
        $return .= '    &lt;label class="control-label" for="inputEmail"&gt;Email&lt;/label&gt;'.PHP_EOL;
        $return .= '    &lt;div class="controls"&gt;'.PHP_EOL;
        $return .= '      &lt;input type="text" id="inputEmail" placeholder="Email"&gt;'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="control-group"&gt;'.PHP_EOL;
        $return .= '    &lt;label class="control-label" for="inputPassword"&gt;Password&lt;/label&gt;'.PHP_EOL;
        $return .= '    &lt;div class="controls"&gt;'.PHP_EOL;
        $return .= '      &lt;input type="password" id="inputPassword" placeholder="Password"&gt;'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="control-group"&gt;'.PHP_EOL;
        $return .= '    &lt;div class="controls"&gt;'.PHP_EOL;
        $return .= '      &lt;label class="checkbox"&gt;'.PHP_EOL;
        $return .= '        &lt;input type="checkbox"&gt; Remember me'.PHP_EOL;
        $return .= '      &lt;/label&gt;'.PHP_EOL;
        $return .= '      &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/form&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Supported form controls</h2>';
        $return .= '<p>Examples of standard form controls supported in an example form layout.</p>';

        $return .= '<h3>Inputs</h3>';
        $return .= '<p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, ';
        $return .= 'datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>';
        $return .= '<p>Requires the use of a specified <code>type</code> at all times.</p>';
        $return .= '<form class="bs-docs-example form-inline">';
        $return .= '<input type="text" placeholder="Text input">';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;input type="text" placeholder="Text input"&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Textarea</h3>';
        $return .= '<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>';
        $return .= '<form class="bs-docs-example form-inline">';
        $return .= '<textarea rows="3"></textarea>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;textarea rows="3"&gt;&lt;/textarea&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Checkboxes and radios</h3>';
        $return .= '<p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option ';
        $return .= 'from many.</p>';
        $return .= '<h4>Default (stacked)</h4>';
        $return .= '<form class="bs-docs-example">';
        $return .= '<label class="checkbox">';
        $return .= '<input type="checkbox" value="">';
        $return .= 'Option one is this and that&mdash;be sure to include why it\'s great';
        $return .= '</label>';
        $return .= '<br>';
        $return .= '<label class="radio">';
        $return .= '<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>';
        $return .= 'Option one is this and that&mdash;be sure to include why it\'s great';
        $return .= '</label>';
        $return .= '<label class="radio">';
        $return .= '<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">';
        $return .= 'Option two can be something else and selecting it will deselect option one';
        $return .= '</label>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;label class="checkbox"&gt;'.PHP_EOL;
        $return .= '  &lt;input type="checkbox" value=""&gt;'.PHP_EOL;
        $return .= '  Option one is this and that&mdash;be sure to include why it\'s great'.PHP_EOL;
        $return .= '&lt;/label&gt;'.PHP_EOL.PHP_EOL;

        $return .= '&lt;label class="radio"&gt;'.PHP_EOL;
        $return .= '  &lt;input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&gt;'.PHP_EOL;
        $return .= '  Option one is this and that&mdash;be sure to include why it\'s great'.PHP_EOL;
        $return .= '&lt;/label&gt;'.PHP_EOL;
        $return .= '&lt;label class="radio"&gt;'.PHP_EOL;
        $return .= '  &lt;input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&gt;'.PHP_EOL;
        $return .= '  Option two can be something else and selecting it will deselect option one'.PHP_EOL;
        $return .= '&lt;/label&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h4>Inline checkboxes</h4>';
        $return .= '<p>Add the <code>.inline</code> class to a series of checkboxes or radios for controls appear on the same ';
        $return .= 'line.</p>';
        $return .= '<form class="bs-docs-example">';
        $return .= '<label class="checkbox inline">';
        $return .= '<input type="checkbox" id="inlineCheckbox1" value="option1"> 1';
        $return .= '</label>';
        $return .= '<label class="checkbox inline">';
        $return .= '<input type="checkbox" id="inlineCheckbox2" value="option2"> 2';
        $return .= '</label>';
        $return .= '<label class="checkbox inline">';
        $return .= '<input type="checkbox" id="inlineCheckbox3" value="option3"> 3';
        $return .= '</label>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;label class="checkbox inline"&gt;'.PHP_EOL;
        $return .= '  &lt;input type="checkbox" id="inlineCheckbox1" value="option1"&gt; 1'.PHP_EOL;
        $return .= '&lt;/label&gt;'.PHP_EOL;
        $return .= '&lt;label class="checkbox inline"&gt;'.PHP_EOL;
        $return .= '  &lt;input type="checkbox" id="inlineCheckbox2" value="option2"&gt; 2'.PHP_EOL;
        $return .= '&lt;/label&gt;'.PHP_EOL;
        $return .= '&lt;label class="checkbox inline"&gt;'.PHP_EOL;
        $return .= '  &lt;input type="checkbox" id="inlineCheckbox3" value="option3"&gt; 3'.PHP_EOL;
        $return .= '&lt;/label&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Selects</h3>';
        $return .= '<p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>';
        $return .= '<form class="bs-docs-example">';
        $return .= '<select>';
        $return .= '<option>1</option>';
        $return .= '<option>2</option>';
        $return .= '<option>3</option>';
        $return .= '<option>4</option>';
        $return .= '<option>5</option>';
        $return .= '</select>';
        $return .= '<br>';
        $return .= '<select multiple="multiple">';
        $return .= '<option>1</option>';
        $return .= '<option>2</option>';
        $return .= '<option>3</option>';
        $return .= '<option>4</option>';
        $return .= '<option>5</option>';
        $return .= '</select>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;select&gt;'.PHP_EOL;
        $return .= '  &lt;option&gt;1&lt;/option&gt;'.PHP_EOL;
        $return .= '  &lt;option&gt;2&lt;/option&gt;'.PHP_EOL;
        $return .= '  &lt;option&gt;3&lt;/option&gt;'.PHP_EOL;
        $return .= '  &lt;option&gt;4&lt;/option&gt;'.PHP_EOL;
        $return .= '  &lt;option&gt;5&lt;/option&gt;'.PHP_EOL;
        $return .= '&lt;/select&gt;'.PHP_EOL.PHP_EOL;

        $return .= '&lt;select multiple="multiple"&gt;'.PHP_EOL;
        $return .= '  &lt;option&gt;1&lt;/option&gt;'.PHP_EOL;
        $return .= '  &lt;option&gt;2&lt;/option&gt;'.PHP_EOL;
        $return .= '  &lt;option&gt;3&lt;/option&gt;'.PHP_EOL;
        $return .= '  &lt;option&gt;4&lt;/option&gt;'.PHP_EOL;
        $return .= '  &lt;option&gt;5&lt;/option&gt;'.PHP_EOL;
        $return .= '&lt;/select&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Extending form controls</h2>';
        $return .= '<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>';

        $return .= '<h3>Prepended and appended inputs</h3>';
        $return .= '<p>Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are ';
        $return .= 'not supported here.</p>';

        $return .= '<h4>Default options</h4>';
        $return .= '<p>Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text ';
        $return .= 'to an input.</p>';
        $return .= '<form class="bs-docs-example">';
        $return .= '<div class="input-prepend">';
        $return .= '<span class="add-on">@</span>';
        $return .= '<input class="span2" id="prependedInput" type="text" placeholder="Username">';
        $return .= '</div>';
        $return .= '<br>';
        $return .= '<div class="input-append">';
        $return .= '<input class="span2" id="appendedInput" type="text">';
        $return .= '<span class="add-on">.00</span>';
        $return .= '</div>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="input-prepend"&gt;'.PHP_EOL;
        $return .= '  &lt;span class="add-on"&gt;@&lt;/span&gt;'.PHP_EOL;
        $return .= '  &lt;input class="span2" id="prependedInput" type="text" placeholder="Username"&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;div class="input-append"&gt;'.PHP_EOL;
        $return .= '  &lt;input class="span2" id="appendedInput" type="text"&gt;'.PHP_EOL;
        $return .= '  &lt;span class="add-on"&gt;.00&lt;/span&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h4>Combined</h4>';
        $return .= '<p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>';
        $return .= '<form class="bs-docs-example form-inline">';
        $return .= '<div class="input-prepend input-append">';
        $return .= '<span class="add-on">$</span>';
        $return .= '<input class="span2" id="appendedPrependedInput" type="text">';
        $return .= '<span class="add-on">.00</span>';
        $return .= '</div>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="input-prepend input-append"&gt;'.PHP_EOL;
        $return .= '  &lt;span class="add-on"&gt;$&lt;/span&gt;'.PHP_EOL;
        $return .= '  &lt;input class="span2" id="appendedPrependedInput" type="text"&gt;'.PHP_EOL;
        $return .= '  &lt;span class="add-on"&gt;.00&lt;/span&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h4>Buttons instead of text</h4>';
        $return .= '<p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) ';
        $return .= 'to an input.</p>';
        $return .= '<form class="bs-docs-example">';
        $return .= '<div class="input-append">';
        $return .= '<input class="span2" id="appendedInputButton" type="text">';
        $return .= '<button class="btn" type="button">Go!</button>';
        $return .= '</div>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="input-append"&gt;'.PHP_EOL;
        $return .= '  &lt;input class="span2" id="appendedInputButton" type="text"&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<form class="bs-docs-example">';
        $return .= '<div class="input-append">';
        $return .= '<input class="span2" id="appendedInputButtons" type="text">';
        $return .= '<button class="btn" type="button">Search</button>';
        $return .= '<button class="btn" type="button">Options</button>';
        $return .= '</div>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="input-append"&gt;'.PHP_EOL;
        $return .= '  &lt;input class="span2" id="appendedInputButtons" type="text"&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h4>Button dropdowns</h4>';
        $return .= '<p></p>';
        $return .= '<form class="bs-docs-example">';
        $return .= '<div class="input-append">';
        $return .= '<input class="span2" id="appendedDropdownButton" type="text">';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '  <li><a href="#">Action</a></li>';
        $return .= '  <li><a href="#">Another action</a></li>';
        $return .= '  <li><a href="#">Something else here</a></li>';
        $return .= '  <li class="divider"></li>';
        $return .= '  <li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '</div><!-- /input-append -->';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="input-append"&gt;'.PHP_EOL;
        $return .= '  &lt;input class="span2" id="appendedDropdownButton" type="text"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="btn-group"&gt;'.PHP_EOL;
        $return .= '    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;'.PHP_EOL;
        $return .= '      Action'.PHP_EOL;
        $return .= '      &lt;span class="caret"&gt;&lt;/span&gt;'.PHP_EOL;
        $return .= '    &lt;/button&gt;'.PHP_EOL;
        $return .= '    &lt;ul class="dropdown-menu"&gt;'.PHP_EOL;
        $return .= '      ...'.PHP_EOL;
        $return .= '    &lt;/ul&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<form class="bs-docs-example">';
        $return .= '<div class="input-prepend">';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '  <li><a href="#">Action</a></li>';
        $return .= '  <li><a href="#">Another action</a></li>';
        $return .= '  <li><a href="#">Something else here</a></li>';
        $return .= '  <li class="divider"></li>';
        $return .= '  <li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<input class="span2" id="prependedDropdownButton" type="text">';
        $return .= '</div><!-- /input-prepend -->';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="input-prepend"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="btn-group"&gt;'.PHP_EOL;
        $return .= '    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;'.PHP_EOL;
        $return .= '      Action'.PHP_EOL;
        $return .= '      &lt;span class="caret"&gt;&lt;/span&gt;'.PHP_EOL;
        $return .= '    &lt;/button&gt;'.PHP_EOL;
        $return .= '    &lt;ul class="dropdown-menu"&gt;'.PHP_EOL;
        $return .= '      ...'.PHP_EOL;
        $return .= '    &lt;/ul&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;input class="span2" id="prependedDropdownButton" type="text"&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<form class="bs-docs-example">';
        $return .= '<div class="input-prepend input-append">';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '  <li><a href="#">Action</a></li>';
        $return .= '  <li><a href="#">Another action</a></li>';
        $return .= '  <li><a href="#">Something else here</a></li>';
        $return .= '  <li class="divider"></li>';
        $return .= '  <li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<input class="span2" id="appendedPrependedDropdownButton" type="text">';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '  <li><a href="#">Action</a></li>';
        $return .= '  <li><a href="#">Another action</a></li>';
        $return .= '  <li><a href="#">Something else here</a></li>';
        $return .= '  <li class="divider"></li>';
        $return .= '  <li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '</div><!-- /input-prepend input-append -->';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="input-prepend input-append"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="btn-group"&gt;'.PHP_EOL;
        $return .= '    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;'.PHP_EOL;
        $return .= '      Action'.PHP_EOL;
        $return .= '      &lt;span class="caret"&gt;&lt;/span&gt;'.PHP_EOL;
        $return .= '    &lt;/button&gt;'.PHP_EOL;
        $return .= '    &lt;ul class="dropdown-menu"&gt;'.PHP_EOL;
        $return .= '      ...'.PHP_EOL;
        $return .= '    &lt;/ul&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;input class="span2" id="appendedPrependedDropdownButton" type="text"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="btn-group"&gt;'.PHP_EOL;
        $return .= '    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;'.PHP_EOL;
        $return .= '      Action'.PHP_EOL;
        $return .= '      &lt;span class="caret"&gt;&lt;/span&gt;'.PHP_EOL;
        $return .= '    &lt;/button&gt;'.PHP_EOL;
        $return .= '    &lt;ul class="dropdown-menu"&gt;'.PHP_EOL;
        $return .= '      ...'.PHP_EOL;
        $return .= '    &lt;/ul&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h4>Segmented dropdown groups</h4>';
        $return .= '<form class="bs-docs-example">';
        $return .= '<div class="input-prepend">';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn" tabindex="-1">Action</button>';
        $return .= '<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">';
        $return .= '  <span class="caret"></span>';
        $return .= '</button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '  <li><a href="#">Action</a></li>';
        $return .= '  <li><a href="#">Another action</a></li>';
        $return .= '  <li><a href="#">Something else here</a></li>';
        $return .= '  <li class="divider"></li>';
        $return .= '  <li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<input type="text">';
        $return .= '</div>';
        $return .= '<div class="input-append">';
        $return .= '<input type="text">';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn" tabindex="-1">Action</button>';
        $return .= '<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">';
        $return .= '  <span class="caret"></span>';
        $return .= '</button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '  <li><a href="#">Action</a></li>';
        $return .= '  <li><a href="#">Another action</a></li>';
        $return .= '  <li><a href="#">Something else here</a></li>';
        $return .= '  <li class="divider"></li>';
        $return .= '  <li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;form&gt;'.PHP_EOL;
        $return .= '  &lt;div class="input-prepend"&gt;'.PHP_EOL;
        $return .= '    &lt;div class="btn-group"&gt;...&lt;/div&gt;'.PHP_EOL;
        $return .= '    &lt;input type="text"&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="input-append"&gt;'.PHP_EOL;
        $return .= '    &lt;input type="text"&gt;'.PHP_EOL;
        $return .= '    &lt;div class="btn-group"&gt;...&lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/form&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h4>Search form</h4>';
        $return .= '<form class="bs-docs-example form-search">';
        $return .= '<div class="input-append">';
        $return .= '<input type="text" class="span10 search-query">';
        $return .= '<button type="submit" class="btn">Search</button>';
        $return .= '</div>';
        $return .= '<div class="input-prepend">';
        $return .= '<button type="submit" class="btn">Search</button>';
        $return .= '<input type="text" class="span10 search-query">';
        $return .= '</div>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;form class="form-search"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="input-append"&gt;'.PHP_EOL;
        $return .= '    &lt;input type="text" class="span2 search-query"&gt;'.PHP_EOL;
        $return .= '    &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="input-prepend"&gt;'.PHP_EOL;
        $return .= '    &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;'.PHP_EOL;
        $return .= '    &lt;input type="text" class="span2 search-query"&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/form&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Control sizing</h3>';
        $return .= '<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid ';
        $return .= 'column sizes using <code>.span*</code> classes.</p>';

        $return .= '<h4>Block level inputs</h4>';
        $return .= '<p>Make any <code>&lt;input&gt;</code> or <code>&lt;textarea&gt;</code> element behave like a ';
        $return .= 'block level element.</p>';
        $return .= '<form class="bs-docs-example" style="padding-bottom: 15px;">';
        $return .= '<div class="controls">';
        $return .= '<input class="input-block-level" type="text" placeholder=".input-block-level">';
        $return .= '</div>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;input class="input-block-level" type="text" placeholder=".input-block-level"&gt;';
        $return .= '</pre>';

        $return .= '<h4>Relative sizing</h4>';
        $return .= '<form class="bs-docs-example" style="padding-bottom: 15px;">';
        $return .= '<div class="controls docs-input-sizes">';
        $return .= '<input class="input-mini" type="text" placeholder=".input-mini">';
        $return .= '<input class="input-small" type="text" placeholder=".input-small">';
        $return .= '<input class="input-medium" type="text" placeholder=".input-medium">';
        $return .= '<input class="input-large" type="text" placeholder=".input-large">';
        $return .= '<input class="input-xlarge" type="text" placeholder=".input-xlarge">';
        $return .= '<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">';
        $return .= '</div>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;input class="input-mini" type="text" placeholder=".input-mini"&gt;'.PHP_EOL;
        $return .= '&lt;input class="input-small" type="text" placeholder=".input-small"&gt;'.PHP_EOL;
        $return .= '&lt;input class="input-medium" type="text" placeholder=".input-medium"&gt;'.PHP_EOL;
        $return .= '&lt;input class="input-large" type="text" placeholder=".input-large"&gt;'.PHP_EOL;
        $return .= '&lt;input class="input-xlarge" type="text" placeholder=".input-xlarge"&gt;'.PHP_EOL;
        $return .= '&lt;input class="input-xxlarge" type="text" placeholder=".input-xxlarge"&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p>';
        $return .= '<span class="label label-info">Heads up!</span> In future versions, we\'ll be altering the use of ';
        $return .= 'these relative input classes to match our button sizes. For example, <code>.input-large</code> will ';
        $return .= 'increase the padding and font-size of an input.';
        $return .= '</p>';

        $return .= '<h4>Grid sizing</h4>';
        $return .= '<p>Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid';
        $return .= 'columns.</p>';
        $return .= '<form class="bs-docs-example" style="padding-bottom: 15px;">';
        $return .= '<div class="controls docs-input-sizes">';
        $return .= '<input class="span1" type="text" placeholder=".span1">';
        $return .= '<input class="span2" type="text" placeholder=".span2">';
        $return .= '<input class="span3" type="text" placeholder=".span3">';
        $return .= '<select class="span1">';
        $return .= '<option>1</option>';
        $return .= '<option>2</option>';
        $return .= '<option>3</option>';
        $return .= '<option>4</option>';
        $return .= '<option>5</option>';
        $return .= '</select>';
        $return .= '<select class="span2">';
        $return .= '<option>1</option>';
        $return .= '<option>2</option>';
        $return .= '<option>3</option>';
        $return .= '<option>4</option>';
        $return .= '<option>5</option>';
        $return .= '</select>';
        $return .= '<select class="span3">';
        $return .= '<option>1</option>';
        $return .= '<option>2</option>';
        $return .= '<option>3</option>';
        $return .= '<option>4</option>';
        $return .= '<option>5</option>';
        $return .= '</select>';
        $return .= '</div>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;input class="span1" type="text" placeholder=".span1"&gt;'.PHP_EOL;
        $return .= '&lt;input class="span2" type="text" placeholder=".span2"&gt;'.PHP_EOL;
        $return .= '&lt;input class="span3" type="text" placeholder=".span3"&gt;'.PHP_EOL;
        $return .= '&lt;select class="span1"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/select&gt;'.PHP_EOL;
        $return .= '&lt;select class="span2"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/select&gt;'.PHP_EOL;
        $return .= '&lt;select class="span3"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/select&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for ';
        $return .= 'proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and ';
        $return .= 'clears the float.</p>';
        $return .= '<form class="bs-docs-example" style="padding-bottom: 15px;">';
        $return .= '<div class="controls">';
        $return .= '<input class="span5" type="text" placeholder=".span5">';
        $return .= '</div>';
        $return .= '<div class="controls controls-row">';
        $return .= '<input class="span4" type="text" placeholder=".span4">';
        $return .= '<input class="span1" type="text" placeholder=".span1">';
        $return .= '</div>';
        $return .= '<div class="controls controls-row">';
        $return .= '<input class="span3" type="text" placeholder=".span3">';
        $return .= '<input class="span2" type="text" placeholder=".span2">';
        $return .= '</div>';
        $return .= '<div class="controls controls-row">';
        $return .= '<input class="span2" type="text" placeholder=".span2">';
        $return .= '<input class="span3" type="text" placeholder=".span3">';
        $return .= '</div>';
        $return .= '<div class="controls controls-row">';
        $return .= '<input class="span1" type="text" placeholder=".span1">';
        $return .= '<input class="span4" type="text" placeholder=".span4">';
        $return .= '</div>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="controls"&gt;'.PHP_EOL;
        $return .= '  &lt;input class="span5" type="text" placeholder=".span5"&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;div class="controls controls-row"&gt;'.PHP_EOL;
        $return .= '  &lt;input class="span4" type="text" placeholder=".span4"&gt;'.PHP_EOL;
        $return .= '  &lt;input class="span1" type="text" placeholder=".span1"&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '...'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Uneditable inputs</h3>';
        $return .= '<p>Present data in a form that\'s not editable without using actual form markup.</p>';
        $return .= '<form class="bs-docs-example">';
        $return .= '<span class="input-xlarge uneditable-input">Some value here</span>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;span class="input-xlarge uneditable-input"&gt;Some value here&lt;/span&gt;';
        $return .= '</pre>';

        $return .= '<h3>Form actions</h3>';
        $return .= '<p>End a form with a group of actions (buttons). When placed within a <code>.form-actions</code>, the ';
        $return .= 'buttons will automatically indent to line up with the form controls.</p>';
        $return .= '<form class="bs-docs-example">';
        $return .= '<div class="form-actions">';
        $return .= '<button type="submit" class="btn btn-primary">Save changes</button>';
        $return .= '<button type="button" class="btn">Cancel</button>';
        $return .= '</div>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="form-actions"&gt;'.PHP_EOL;
        $return .= '  &lt;button type="submit" class="btn btn-primary"&gt;Save changes&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;button type="button" class="btn"&gt;Cancel&lt;/button&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Help text</h3>';
        $return .= '<p>Inline and block level support for help text that appears around form controls.</p>';
        $return .= '<h4>Inline help</h4>';
        $return .= '<form class="bs-docs-example form-inline">';
        $return .= '<input type="text"> <span class="help-inline">Inline help text</span>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;input type="text"&gt;&lt;span class="help-inline"&gt;Inline help text&lt;/span&gt;';
        $return .= '</pre>';

        $return .= '<h4>Block help</h4>';
        $return .= '<form class="bs-docs-example form-inline">';
        $return .= '<input type="text">';
        $return .= '<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one ';
        $return .= 'line.</span>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;input type="text"&gt;&lt;span class="help-block"&gt;A longer block of help text that breaks onto a new ';
        $return .= 'line and may extend beyond one line.&lt;/span&gt;';
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Form control states</h2>';
        $return .= '<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>';

        $return .= '<h3>Input focus</h3>';
        $return .= '<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow';
        $return .= '</code> in its place for <code>:focus</code>.</p>';
        $return .= '<form class="bs-docs-example form-inline">';
        $return .= '<input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused...">';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt;';
        $return .= '</pre>';

        $return .= '<h3>Invalid inputs</h3>';
        $return .= '<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>,';
        $return .= 'add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>';
        $return .= 'pattern</code>.</p>';
        $return .= '<p>This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo ';
        $return .= 'selectors.</p>';
        $return .= '<form class="bs-docs-example form-inline">';
        $return .= '<input class="span3" type="email" placeholder="test@example.com" required>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;input class="span3" type="email" required&gt;';
        $return .= '</pre>';

        $return .= '<h3>Disabled inputs</h3>';
        $return .= '<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly ';
        $return .= 'different look.</p>';
        $return .= '<form class="bs-docs-example form-inline">';
        $return .= '<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." ';
        $return .= 'disabled&gt;';
        $return .= '</pre>';

        $return .= '<h3>Validation states</h3>';
        $return .= '<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the ';
        $return .= 'appropriate class to the surrounding <code>.control-group</code>.</p>';

        $return .= '<form class="bs-docs-example form-horizontal">';
        $return .= '<div class="control-group warning">';
        $return .= '<label class="control-label" for="inputWarning">Input with warning</label>';
        $return .= '<div class="controls">';
        $return .= '<input type="text" id="inputWarning">';
        $return .= '<span class="help-inline">Something may have gone wrong</span>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<div class="control-group error">';
        $return .= '<label class="control-label" for="inputError">Input with error</label>';
        $return .= '<div class="controls">';
        $return .= '<input type="text" id="inputError">';
        $return .= '<span class="help-inline">Please correct the error</span>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<div class="control-group info">';
        $return .= '<label class="control-label" for="inputInfo">Input with info</label>';
        $return .= '<div class="controls">';
        $return .= '<input type="text" id="inputInfo">';
        $return .= '<span class="help-inline">Username is taken</span>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<div class="control-group success">';
        $return .= '<label class="control-label" for="inputSuccess">Input with success</label>';
        $return .= '<div class="controls">';
        $return .= '<input type="text" id="inputSuccess">';
        $return .= '<span class="help-inline">Woohoo!</span>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="control-group warning"&gt;'.PHP_EOL;
        $return .= '  &lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;'.PHP_EOL;
        $return .= '  &lt;div class="controls"&gt;'.PHP_EOL;
        $return .= '    &lt;input type="text" id="inputWarning"&gt;'.PHP_EOL;
        $return .= '    &lt;span class="help-inline"&gt;Something may have gone wrong&lt;/span&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL.PHP_EOL;

        $return .= '&lt;div class="control-group error"&gt;'.PHP_EOL;
        $return .= '  &lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;'.PHP_EOL;
        $return .= '  &lt;div class="controls"&gt;'.PHP_EOL;
        $return .= '    &lt;input type="text" id="inputError"&gt;'.PHP_EOL;
        $return .= '    &lt;span class="help-inline"&gt;Please correct the error&lt;/span&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL.PHP_EOL;

        $return .= '&lt;div class="control-group info"&gt;'.PHP_EOL;
        $return .= '  &lt;label class="control-label" for="inputInfo"&gt;Input with info&lt;/label&gt;'.PHP_EOL;
        $return .= '  &lt;div class="controls"&gt;'.PHP_EOL;
        $return .= '    &lt;input type="text" id="inputInfo"&gt;'.PHP_EOL;
        $return .= '    &lt;span class="help-inline"&gt;Username is already taken&lt;/span&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL.PHP_EOL;

        $return .= '&lt;div class="control-group success"&gt;'.PHP_EOL;
        $return .= '  &lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;'.PHP_EOL;
        $return .= '  &lt;div class="controls"&gt;'.PHP_EOL;
        $return .= '    &lt;input type="text" id="inputSuccess"&gt;'.PHP_EOL;
        $return .= '    &lt;span class="help-inline"&gt;Woohoo!&lt;/span&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '</section>';

        $return .= '<!-- Buttons';
        $return .= '================================================== -->';
        $return .= '<section id="buttons">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Buttons</h1>';
        $return .= '</div>';

        $return .= '<h2>Default buttons</h2>';
        $return .= '<p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically ';
        $return .= 'you\'ll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for ';
        $return .= 'the best rendering.</p>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th>Button</th>';
        $return .= '<th>class=""</th>';
        $return .= '<th>Description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td><button type="button" class="btn">Default</button></td>';
        $return .= '<td><code>btn</code></td>';
        $return .= '<td>Standard gray button with gradient</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td><button type="button" class="btn btn-primary">Primary</button></td>';
        $return .= '<td><code>btn btn-primary</code></td>';
        $return .= '<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td><button type="button" class="btn btn-info">Info</button></td>';
        $return .= '<td><code>btn btn-info</code></td>';
        $return .= '<td>Used as an alternative to the default styles</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td><button type="button" class="btn btn-success">Success</button></td>';
        $return .= '<td><code>btn btn-success</code></td>';
        $return .= '<td>Indicates a successful or positive action</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td><button type="button" class="btn btn-warning">Warning</button></td>';
        $return .= '<td><code>btn btn-warning</code></td>';
        $return .= '<td>Indicates caution should be taken with this action</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td><button type="button" class="btn btn-danger">Danger</button></td>';
        $return .= '<td><code>btn btn-danger</code></td>';
        $return .= '<td>Indicates a dangerous or potentially negative action</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td><button type="button" class="btn btn-inverse">Inverse</button></td>';
        $return .= '<td><code>btn btn-inverse</code></td>';
        $return .= '<td>Alternate dark gray button, not tied to a semantic action or use</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td><button type="button" class="btn btn-link">Link</button></td>';
        $return .= '<td><code>btn btn-link</code></td>';
        $return .= '<td>Deemphasize a button by making it look like a link while maintaining button behavior</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';

        $return .= '<h4>Cross browser compatibility</h4>';
        $return .= '<p>IE9 doesn\'t crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies ';
        $return .= 'disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>';

        $return .= '<h2>Button sizes</h2>';
        $return .= '<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini';
        $return .= '</code> for additional sizes.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<p>';
        $return .= '<button type="button" class="btn btn-large btn-primary">Large button</button>';
        $return .= '<button type="button" class="btn btn-large">Large button</button>';
        $return .= '</p>';
        $return .= '<p>';
        $return .= '<button type="button" class="btn btn-primary">Default button</button>';
        $return .= '<button type="button" class="btn">Default button</button>';
        $return .= '</p>';
        $return .= '<p>';
        $return .= '<button type="button" class="btn btn-small btn-primary">Small button</button>';
        $return .= '<button type="button" class="btn btn-small">Small button</button>';
        $return .= '</p>';
        $return .= '<p>';
        $return .= '<button type="button" class="btn btn-mini btn-primary">Mini button</button>';
        $return .= '<button type="button" class="btn btn-mini">Mini button</button>';
        $return .= '</p>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;p&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn btn-large btn-primary" type="button"&gt;Large button&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn btn-large" type="button"&gt;Large button&lt;/button&gt;'.PHP_EOL;
        $return .= '&lt;/p&gt;'.PHP_EOL;
        $return .= '&lt;p&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn btn-primary" type="button"&gt;Default button&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn" type="button"&gt;Default button&lt;/button&gt;'.PHP_EOL;
        $return .= '&lt;/p&gt;'.PHP_EOL;
        $return .= '&lt;p&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn btn-small btn-primary" type="button"&gt;Small button&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn btn-small" type="button"&gt;Small button&lt;/button&gt;'.PHP_EOL;
        $return .= '&lt;/p&gt;'.PHP_EOL;
        $return .= '&lt;p&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn btn-mini btn-primary" type="button"&gt;Mini button&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn btn-mini" type="button"&gt;Mini button&lt;/button&gt;'.PHP_EOL;
        $return .= '&lt;/p&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>';
        $return .= '.btn-block</code>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="well" style="max-width: 400px; margin: 0 auto 10px;">';
        $return .= '<button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>';
        $return .= '<button type="button" class="btn btn-large btn-block">Block level button</button>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;button class="btn btn-large btn-block btn-primary" type="button"&gt;Block level button&lt;';
        $return .= '/button&gt;'.PHP_EOL;
        $return .= '&lt;button class="btn btn-large btn-block" type="button"&gt;Block level button&lt;/button&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h2>Disabled state</h2>';
        $return .= '<p>Make buttons look unclickable by fading them back 50%.</p>';

        $return .= '<h3>Anchor element</h3>';
        $return .= '<p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>';
        $return .= '<p class="bs-docs-example">';
        $return .= '<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>';
        $return .= '<a href="#" class="btn btn-large disabled">Link</a>';
        $return .= '</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;a href="#" class="btn btn-large btn-primary disabled"&gt;Primary link&lt;/a&gt;'.PHP_EOL;
        $return .= '&lt;a href="#" class="btn btn-large disabled"&gt;Link&lt;/a&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p>';
        $return .= '<span class="label label-info">Heads up!</span>';
        $return .= 'We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so ';
        $return .= 'no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable ';
        $return .= 'links here.';
        $return .= '</p>';

        $return .= '<h3>Button element</h3>';
        $return .= '<p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>';
        $return .= '<p class="bs-docs-example">';
        $return .= '<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>';
        $return .= '<button type="button" class="btn btn-large" disabled>Button</button>';
        $return .= '</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;button type="button" class="btn btn-large btn-primary disabled" disabled="disabled"&gt;Primary ';
        $return .= 'button&lt;'.PHP_EOL;
        $return .= '/button&gt;'.PHP_EOL;
        $return .= '&lt;button type="button" class="btn btn-large" disabled&gt;Button&lt;/button&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h2>One class, multiple tags</h2>';
        $return .= '<p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;';
        $return .= 'input&gt;</code> element.</p>';
        $return .= '<form class="bs-docs-example">';
        $return .= '<a class="btn" href="">Link</a>';
        $return .= '<button class="btn" type="submit">Button</button>';
        $return .= '<input class="btn" type="button" value="Input">';
        $return .= '<input class="btn" type="submit" value="Submit">';
        $return .= '</form>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;a class="btn" href=""&gt;Link&lt;/a&gt;'.PHP_EOL;
        $return .= '&lt;button class="btn" type="submit"&gt;Button&lt;/button&gt;'.PHP_EOL;
        $return .= '&lt;input class="btn" type="button" value="Input"&gt;'.PHP_EOL;
        $return .= '&lt;input class="btn" type="submit" value="Submit"&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p>As a best practice, try to match the element for your context to ensure matching cross-browser ';
        $return .= 'rendering.  If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for ';
        $return .= 'your button.</p>';

        $return .= '</section>';

        $return .= '<!-- Images';
        $return .= '================================================== -->';
        $return .= '<section id="images">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Images</h1>';
        $return .= '</div>';

        $return .= '<p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>';
        $return .= '<div class="bs-docs-example bs-docs-example-images">';
        $return .= '<img class="img-rounded" alt="140x140" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22140%22%20hei';
        $return .= 'ght%3D%22140%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20140%20140%22%20pr';
        $return .= 'eserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_153197a2e10%20text%';
        $return .= '20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans';
        $return .= '-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_153197a2e10';
        $return .= '%22%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext';
        $return .= '%20x%3D%2245.5%22%20y%3D%2274.5%22%3E140x140%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-render';
        $return .= 'ed="true" style="width: 140px; height: 140px;">';
        $return .= '<img class="img-circle" alt="140x140" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22140%22%20heig';
        $return .= 'ht%3D%22140%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20140%20140%22%20pre';
        $return .= 'serveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_153197a2e19%20text%2';
        $return .= '0%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-';
        $return .= 'serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_153197a2e19%';
        $return .= '22%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%';
        $return .= '20x%3D%2245.5%22%20y%3D%2274.5%22%3E140x140%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendere';
        $return .= 'd="true" style="width: 140px; height: 140px;">';
        $return .= '<img class="img-polaroid" alt="140x140" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22140%22%20he';
        $return .= 'ight%3D%22140%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20140%20140%22%20p';
        $return .= 'reserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_153197a2e20%20text';
        $return .= '%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20san';
        $return .= 's-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_153197a2e2';
        $return .= '0%22%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctex';
        $return .= 't%20x%3D%2245.5%22%20y%3D%2274.5%22%3E140x140%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rende';
        $return .= 'red="true" style="width: 140px; height: 140px;">';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;img src="..." class="img-rounded"&gt;'.PHP_EOL;
        $return .= '&lt;img src="..." class="img-circle"&gt;'.PHP_EOL;
        $return .= '&lt;img src="..." class="img-polaroid"&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do';
        $return .= 'not work in IE7-8 due to lack of <code>border-radius</code> support.</p>';
        $return .= '</section>';

        $return .= '<!-- Dropdowns';
        $return .= '================================================== -->';
        $return .= '<section id="dropdowns">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Dropdown menus</h1>';
        $return .= '</div>';

        $return .= '<h2>Example</h2>';
        $return .= '<p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href=';
        $return .= '"./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="dropdown clearfix">';
        $return .= '<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; ';
        $return .= 'position: static; margin-bottom: 5px; *width: 180px;">';
        $return .= '<li><a tabindex="-1" href="#">Action</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Another action</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a tabindex="-1" href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li class="divider"&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h2>Markup</h2>';
        $return .= '<p>Looking at just the dropdown menu, here\'s the required HTML. You need to wrap the dropdown\'s ';
        $return .= 'trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>';
        $return .= 'position: relative;</code>. Then just create the menu.</p>';

        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="dropdown"&gt;'.PHP_EOL;
        $return .= '  &lt;!-- Link or button to toggle dropdown --&gt;'.PHP_EOL;
        $return .= '  &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;'.PHP_EOL;
        $return .= '    &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    &lt;li class="divider"&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h2>Options</h2>';
        $return .= '<p>Align menus to the right and add include additional levels of dropdowns.</p>';

        $return .= '<h3>Aligning the menus</h3>';
        $return .= '<p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Disabled menu options</h3>';
        $return .= '<p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="dropdown clearfix">';
        $return .= '<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: ';
        $return .= 'static; margin-bottom: 5px; *width: 180px;">';
        $return .= '<li><a tabindex="-1" href="#">Regular link</a></li>';
        $return .= '<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Another link</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li class="disabled"&gt;&lt;a tabindex="-1" href="#"&gt;Disabled link&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another link&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Sub menus on dropdowns</h3>';
        $return .= '<p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup ';
        $return .= 'additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for ';
        $return .= 'automatic styling.</p>';
        $return .= '<div class="bs-docs-example bs-docs-example-submenus">';

        $return .= '<div class="pull-left">';
        $return .= '<p class="muted">Default</p>';
        $return .= '<div class="dropdown clearfix">';
        $return .= '<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">';
        $return .= '<li><a tabindex="-1" href="#">Action</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Another action</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li class="dropdown-submenu">';
        $return .= '<a tabindex="-1" href="#">More options</a>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a tabindex="-1" href="#">Second level link</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Second level link</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Second level link</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Second level link</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Second level link</a></li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';

        $return .= '<div class="pull-left">';
        $return .= '<p class="muted">Dropup</p>';
        $return .= '<div class="dropup">';
        $return .= '<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">';
        $return .= '<li><a tabindex="-1" href="#">Action</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Another action</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li class="dropdown-submenu">';
        $return .= '<a tabindex="-1" href="#">More options</a>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a tabindex="-1" href="#">Second level link</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Second level link</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Second level link</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Second level link</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Second level link</a></li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';

        $return .= '<div class="pull-left">';
        $return .= '<p class="muted">Left submenu</p>';
        $return .= '<div class="dropdown">';
        $return .= '<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">';
        $return .= '<li><a tabindex="-1" href="#">Action</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Another action</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li class="dropdown-submenu pull-left">';
        $return .= '<a tabindex="-1" href="#">More options</a>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a tabindex="-1" href="#">Second level link</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Second level link</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Second level link</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Second level link</a></li>';
        $return .= '<li><a tabindex="-1" href="#">Second level link</a></li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';

        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '  &lt;li class="dropdown-submenu"&gt;'.PHP_EOL;
        $return .= '    &lt;a tabindex="-1" href="#"&gt;More options&lt;/a&gt;'.PHP_EOL;
        $return .= '    &lt;ul class="dropdown-menu"&gt;'.PHP_EOL;
        $return .= '      ...'.PHP_EOL;
        $return .= '    &lt;/ul&gt;'.PHP_EOL;
        $return .= '  &lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '</section>';

        $return .= '<!-- Button Groups';
        $return .= '================================================== -->';
        $return .= '<section id="buttonGroups">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Button groups</h1>';
        $return .= '</div>';

        $return .= '<h2>Examples</h2>';
        $return .= '<p>Two basic options, along with two more specific variations.</p>';

        $return .= '<h3>Single button group</h3>';
        $return .= '<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="btn-group" style="margin: 9px 0 5px;">';
        $return .= '<button class="btn">Left</button>';
        $return .= '<button class="btn">Middle</button>';
        $return .= '<button class="btn">Right</button>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="btn-group"&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn"&gt;Left&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn"&gt;Middle&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn"&gt;Right&lt;/button&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Multiple button groups</h3>';
        $return .= '<p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class=';
        $return .= '"btn-toolbar"&gt;</code> for more complex components.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="btn-toolbar" style="margin: 0;">';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn">1</button>';
        $return .= '<button class="btn">2</button>';
        $return .= '<button class="btn">3</button>';
        $return .= '<button class="btn">4</button>';
        $return .= '</div>';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn">5</button>';
        $return .= '<button class="btn">6</button>';
        $return .= '<button class="btn">7</button>';
        $return .= '</div>';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn">8</button>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="btn-toolbar"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="btn-group"&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Vertical button groups</h3>';
        $return .= '<p>Make a set of buttons appear vertically stacked rather than horizontally.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="btn-group btn-group-vertical">';
        $return .= '<button type="button" class="btn"><i class="icon-align-left"></i></button>';
        $return .= '<button type="button" class="btn"><i class="icon-align-center"></i></button>';
        $return .= '<button type="button" class="btn"><i class="icon-align-right"></i></button>';
        $return .= '<button type="button" class="btn"><i class="icon-align-justify"></i></button>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="btn-group btn-group-vertical"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h4>Checkbox and radio flavors</h4>';
        $return .= '<p>Button groups can also function as radios, where only one button may be active, or ';
        $return .= 'checkboxes, where any number of buttons may be active. View <a href="./javascript.html#';
        $return .= 'buttons">the JavaScript docs</a> for that.</p>';

        $return .= '<h4>Dropdowns in button groups</h4>';
        $return .= '<p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually ';
        $return .= 'wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>';
        $return .= '</section>';

        $return .= '<!-- Split button dropdowns';
        $return .= '================================================== -->';
        $return .= '<section id="buttonDropdowns">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Button dropdown menus</h1>';
        $return .= '</div>';

        $return .= '<h2>Overview and examples</h2>';
        $return .= '<p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and ';
        $return .= 'providing the proper menu markup.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="btn-toolbar" style="margin: 0;">';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret">';
        $return .= '</span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret">';
        $return .= '</span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret">';
        $return .= '</span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret">';
        $return .= '</span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret">';
        $return .= '</span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret">';
        $return .= '</span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '</div><!-- /btn-toolbar -->';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="btn-group"&gt;'.PHP_EOL;
        $return .= '  &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;'.PHP_EOL;
        $return .= '    Action'.PHP_EOL;
        $return .= '    &lt;span class="caret"&gt;&lt;/span&gt;'.PHP_EOL;
        $return .= '  &lt;/a&gt;'.PHP_EOL;
        $return .= '  &lt;ul class="dropdown-menu"&gt;'.PHP_EOL;
        $return .= '    &lt;!-- dropdown menu links --&gt;'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Works with all button sizes</h3>';
        $return .= '<p>Button dropdowns work at any size:  <code>.btn-large</code>, <code>.btn-small</code>, or <code>';
        $return .= '.btn-mini</code>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="btn-toolbar" style="margin: 0;">';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-large dropdown-toggle" data-toggle="dropdown">Large button <span class="caret">';
        $return .= '</span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-small dropdown-toggle" data-toggle="dropdown">Small button <span class="caret">';
        $return .= '</span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Mini button <span class="caret">';
        $return .= '</span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '</div><!-- /btn-toolbar -->';
        $return .= '</div>';

        $return .= '<h3>Requires JavaScript</h3>';
        $return .= '<p>Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to ';
        $return .= 'function.</p>';
        $return .= '<p>In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to ';
        $return .= 'resolve the alignment manually or with custom JavaScript.</p>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Split button dropdowns</h2>';
        $return .= '<p>Building on the button group styles and markup, we can easily create a split button. Split buttons ';
        $return .= 'feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="btn-toolbar" style="margin: 0;">';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn">Action</button>';
        $return .= '<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-primary">Action</button>';
        $return .= '<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-danger">Danger</button>';
        $return .= '<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-warning">Warning</button>';
        $return .= '<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-success">Success</button>';
        $return .= '<button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-info">Info</button>';
        $return .= '<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-inverse">Inverse</button>';
        $return .= '<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '</div><!-- /btn-toolbar -->';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="btn-group"&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn"&gt;Action&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;'.PHP_EOL;
        $return .= '    &lt;span class="caret"&gt;&lt;/span&gt;'.PHP_EOL;
        $return .= '  &lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;ul class="dropdown-menu"&gt;'.PHP_EOL;
        $return .= '    &lt;!-- dropdown menu links --&gt;'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Sizes</h3>';
        $return .= '<p>Utilize the extra button classes <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large';
        $return .= '</code> for sizing.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="btn-toolbar">';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-large">Large action</button>';
        $return .= '<button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '</div><!-- /btn-toolbar -->';
        $return .= '<div class="btn-toolbar">';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-small">Small action</button>';
        $return .= '<button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '</div><!-- /btn-toolbar -->';
        $return .= '<div class="btn-toolbar">';
        $return .= '<div class="btn-group">';
        $return .= '<button class="btn btn-mini">Mini action</button>';
        $return .= '<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '</div><!-- /btn-toolbar -->';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="btn-group"&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn btn-mini"&gt;Action&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"&gt;'.PHP_EOL;
        $return .= '    &lt;span class="caret"&gt;&lt;/span&gt;'.PHP_EOL;
        $return .= '  &lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;ul class="dropdown-menu"&gt;'.PHP_EOL;
        $return .= '    &lt;!-- dropdown menu links --&gt;'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Dropup menus</h3>';
        $return .= '<p>Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of ';
        $return .= '<code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu ';
        $return .= 'itself to move from the bottom up instead of top down.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="btn-toolbar" style="margin: 0;">';
        $return .= '<div class="btn-group dropup">';
        $return .= '<button class="btn">Dropup</button>';
        $return .= '<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '<div class="btn-group dropup">';
        $return .= '<button class="btn primary">Right dropup</button>';
        $return .= '<button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>';
        $return .= '<ul class="dropdown-menu pull-right">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</div><!-- /btn-group -->';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="btn-group dropup"&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn"&gt;Dropup&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;'.PHP_EOL;
        $return .= '    &lt;span class="caret"&gt;&lt;/span&gt;'.PHP_EOL;
        $return .= '  &lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;ul class="dropdown-menu"&gt;'.PHP_EOL;
        $return .= '    &lt;!-- dropdown menu links --&gt;'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '</section>';

        $return .= '<!-- Nav, Tabs, & Pills';
        $return .= '================================================== -->';
        $return .= '<section id="navs">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Nav: tabs, pills, and lists</small></h1>';
        $return .= '</div>';
        $return .= '';
        $return .= '<h2>Lightweight defaults <small>Same markup, different classes</small></h2>';
        $return .= '<p>All nav components here&mdash;tabs, pills, and lists&mdash;<strong>share the same base markup and ';
        $return .= 'styles</strong> through the <code>.nav</code> class.</p>';
        $return .= '';
        $return .= '<h3>Basic tabs</h3>';
        $return .= '<p>Take a regular <code>&lt;ul&gt;</code> of links and add <code>.nav-tabs</code>:</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul class="nav nav-tabs">';
        $return .= '<li class="active"><a href="#">Home</a></li>';
        $return .= '<li><a href="#">Profile</a></li>';
        $return .= '<li><a href="#">Messages</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="nav nav-tabs"&gt;'.PHP_EOL;
        $return .= '  &lt;li class="active"&gt;'.PHP_EOL;
        $return .= '    &lt;a href="#"&gt;Home&lt;/a&gt;'.PHP_EOL;
        $return .= '  &lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Basic pills</h3>';
        $return .= '<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul class="nav nav-pills">';
        $return .= '<li class="active"><a href="#">Home</a></li>';
        $return .= '<li><a href="#">Profile</a></li>';
        $return .= '<li><a href="#">Messages</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="nav nav-pills"&gt;'.PHP_EOL;
        $return .= '  &lt;li class="active"&gt;'.PHP_EOL;
        $return .= '    &lt;a href="#"&gt;Home&lt;/a&gt;'.PHP_EOL;
        $return .= '  &lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Disabled state</h3>';
        $return .= '<p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no ';
        $return .= 'hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> ';
        $return .= 'attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul class="nav nav-pills">';
        $return .= '<li><a href="#">Clickable link</a></li>';
        $return .= '<li><a href="#">Clickable link</a></li>';
        $return .= '<li class="disabled"><a href="#">Disabled link</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="nav nav-pills"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '  &lt;li class="disabled"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Component alignment</h3>';
        $return .= '<p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both ';
        $return .= 'classes will add a CSS float in the specified direction.</p>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Stackable</h2>';
        $return .= '<p>As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make ';
        $return .= 'them appear vertically stacked.</p>';

        $return .= '<h3>Stacked tabs</h3>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul class="nav nav-tabs nav-stacked">';
        $return .= '<li class="active"><a href="#">Home</a></li>';
        $return .= '<li><a href="#">Profile</a></li>';
        $return .= '<li><a href="#">Messages</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="nav nav-tabs nav-stacked"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Stacked pills</h3>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul class="nav nav-pills nav-stacked">';
        $return .= '<li class="active"><a href="#">Home</a></li>';
        $return .= '<li><a href="#">Profile</a></li>';
        $return .= '<li><a href="#">Messages</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="nav nav-pills nav-stacked"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Dropdowns</h2>';
        $return .= '<p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns ';
        $return .= 'JavaScript plugin</a>.</p>';

        $return .= '<h3>Tabs with dropdowns</h3>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul class="nav nav-tabs">';
        $return .= '<li class="active"><a href="#">Home</a></li>';
        $return .= '<li><a href="#">Help</a></li>';
        $return .= '<li class="dropdown">';
        $return .= '<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="nav nav-tabs"&gt;'.PHP_EOL;
        $return .= '  &lt;li class="dropdown"&gt;'.PHP_EOL;
        $return .= '    &lt;a class="dropdown-toggle"'.PHP_EOL;
        $return .= '       data-toggle="dropdown"'.PHP_EOL;
        $return .= '       href="#"&gt;'.PHP_EOL;
        $return .= '        Dropdown'.PHP_EOL;
        $return .= '        &lt;b class="caret"&gt;&lt;/b&gt;'.PHP_EOL;
        $return .= '      &lt;/a&gt;'.PHP_EOL;
        $return .= '    &lt;ul class="dropdown-menu"&gt;'.PHP_EOL;
        $return .= '      &lt;!-- links --&gt;'.PHP_EOL;
        $return .= '    &lt;/ul&gt;'.PHP_EOL;
        $return .= '  &lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Pills with dropdowns</h3>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul class="nav nav-pills">';
        $return .= '<li class="active"><a href="#">Home</a></li>';
        $return .= '<li><a href="#">Help</a></li>';
        $return .= '<li class="dropdown">';
        $return .= '<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="nav nav-pills"&gt;'.PHP_EOL;
        $return .= '  &lt;li class="dropdown"&gt;'.PHP_EOL;
        $return .= '    &lt;a class="dropdown-toggle"'.PHP_EOL;
        $return .= '       data-toggle="dropdown"'.PHP_EOL;
        $return .= '       href="#"&gt;'.PHP_EOL;
        $return .= '        Dropdown'.PHP_EOL;
        $return .= '        &lt;b class="caret"&gt;&lt;/b&gt;'.PHP_EOL;
        $return .= '      &lt;/a&gt;'.PHP_EOL;
        $return .= '    &lt;ul class="dropdown-menu"&gt;'.PHP_EOL;
        $return .= '      &lt;!-- links --&gt;'.PHP_EOL;
        $return .= '    &lt;/ul&gt;'.PHP_EOL;
        $return .= '  &lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Nav lists</h2>';
        $return .= '<p>A simple and easy way to build groups of nav links with optional headers. They\'re best used in ';
        $return .= 'sidebars like the Finder in OS X.</p>';

        $return .= '<h3>Example nav list</h3>';
        $return .= '<p>Take a list of links and add <code>class="nav nav-list"</code>:</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="well" style="max-width: 340px; padding: 8px 0;">';
        $return .= '<ul class="nav nav-list">';
        $return .= '<li class="nav-header">List header</li>';
        $return .= '<li class="active"><a href="#">Home</a></li>';
        $return .= '<li><a href="#">Library</a></li>';
        $return .= '<li><a href="#">Applications</a></li>';
        $return .= '<li class="nav-header">Another list header</li>';
        $return .= '<li><a href="#">Profile</a></li>';
        $return .= '<li><a href="#">Settings</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Help</a></li>';
        $return .= '</ul>';
        $return .= '</div> <!-- /well -->';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="nav nav-list"&gt;'.PHP_EOL;
        $return .= '  &lt;li class="nav-header"&gt;List header&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p>';
        $return .= '<span class="label label-info">Note</span>';
        $return .= 'For nesting within a nav list, include <code>class="nav nav-list"</code> on any nested <code>&lt;ul&gt;';
        $return .= '</code>.';
        $return .= '</p>';

        $return .= '<h3>Horizontal dividers</h3>';
        $return .= '<p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="nav nav-list"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '  &lt;li class="divider"&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Tabbable nav</h2>';
        $return .= '<p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates ';
        $return .= 'tabbable tabs in four styles: top (default), right, bottom, and left.</p>';

        $return .= '<h3>Tabbable example</h3>';
        $return .= '<p>To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in ';
        $return .= '<code>.tab-content</code>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="tabbable" style="margin-bottom: 18px;">';
        $return .= '<ul class="nav nav-tabs">';
        $return .= '<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>';
        $return .= '<li><a href="#tab2" data-toggle="tab">Section 2</a></li>';
        $return .= '<li><a href="#tab3" data-toggle="tab">Section 3</a></li>';
        $return .= '</ul>';
        $return .= '<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">';
        $return .= '<div class="tab-pane active" id="tab1">';
        $return .= '<p>I\'m in Section 1.</p>';
        $return .= '</div>';
        $return .= '<div class="tab-pane" id="tab2">';
        $return .= '<p>Howdy, I\'m in Section 2.</p>';
        $return .= '</div>';
        $return .= '<div class="tab-pane" id="tab3">';
        $return .= '<p>What up girl, this is Section 3.</p>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div> <!-- /tabbable -->';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="tabbable"&gt; &lt;!-- Only required for left/right tabs --&gt;'.PHP_EOL;
        $return .= '  &lt;ul class="nav nav-tabs"&gt;'.PHP_EOL;
        $return .= '    &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;Section 1&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;Section 2&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '  &lt;div class="tab-content"&gt;'.PHP_EOL;
        $return .= '    &lt;div class="tab-pane active" id="tab1"&gt;'.PHP_EOL;
        $return .= '      &lt;p&gt;I\'m in Section 1.&lt;/p&gt;'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '    &lt;div class="tab-pane" id="tab2"&gt;'.PHP_EOL;
        $return .= '      &lt;p&gt;Howdy, I\'m in Section 2.&lt;/p&gt;'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h4>Fade in tabs</h4>';
        $return .= '<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>';

        $return .= '<h4>Requires jQuery plugin</h4>';
        $return .= '<p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable ';
        $return .= 'tabs to life <a href="./javascript.html#tabs">on the JavaScript docs page</a>.</p>';

        $return .= '<h3>Tabbable in any direction</h3>';

        $return .= '<h4>Tabs on the bottom</h4>';
        $return .= '<p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="tabbable tabs-below">';
        $return .= '<div class="tab-content">';
        $return .= '<div class="tab-pane active" id="A">';
        $return .= '<p>I\'m in Section A.</p>';
        $return .= '</div>';
        $return .= '<div class="tab-pane" id="B">';
        $return .= '<p>Howdy, I\'m in Section B.</p>';
        $return .= '</div>';
        $return .= '<div class="tab-pane" id="C">';
        $return .= '<p>What up girl, this is Section C.</p>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<ul class="nav nav-tabs">';
        $return .= '<li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>';
        $return .= '<li><a href="#B" data-toggle="tab">Section 2</a></li>';
        $return .= '<li><a href="#C" data-toggle="tab">Section 3</a></li>';
        $return .= '</ul>';
        $return .= '</div> <!-- /tabbable -->';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="tabbable tabs-below"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="tab-content"&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;ul class="nav nav-tabs"&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h4>Tabs on the left</h4>';
        $return .= '<p>Swap the class to put tabs on the left.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="tabbable tabs-left">';
        $return .= '<ul class="nav nav-tabs">';
        $return .= '<li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>';
        $return .= '<li><a href="#lB" data-toggle="tab">Section 2</a></li>';
        $return .= '<li><a href="#lC" data-toggle="tab">Section 3</a></li>';
        $return .= '</ul>';
        $return .= '<div class="tab-content">';
        $return .= '<div class="tab-pane active" id="lA">';
        $return .= '<p>I\'m in Section A.</p>';
        $return .= '</div>';
        $return .= '<div class="tab-pane" id="lB">';
        $return .= '<p>Howdy, I\'m in Section B.</p>';
        $return .= '</div>';
        $return .= '<div class="tab-pane" id="lC">';
        $return .= '<p>What up girl, this is Section C.</p>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div> <!-- /tabbable -->';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="tabbable tabs-left"&gt;'.PHP_EOL;
        $return .= '  &lt;ul class="nav nav-tabs"&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '  &lt;div class="tab-content"&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h4>Tabs on the right</h4>';
        $return .= '<p>Swap the class to put tabs on the right.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="tabbable tabs-right">';
        $return .= '<ul class="nav nav-tabs">';
        $return .= '<li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>';
        $return .= '<li><a href="#rB" data-toggle="tab">Section 2</a></li>';
        $return .= '<li><a href="#rC" data-toggle="tab">Section 3</a></li>';
        $return .= '</ul>';
        $return .= '<div class="tab-content">';
        $return .= '<div class="tab-pane active" id="rA">';
        $return .= '<p>I\'m in Section A.</p>';
        $return .= '</div>';
        $return .= '<div class="tab-pane" id="rB">';
        $return .= '<p>Howdy, I\'m in Section B.</p>';
        $return .= '</div>';
        $return .= '<div class="tab-pane" id="rC">';
        $return .= '<p>What up girl, this is Section C.</p>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div> <!-- /tabbable -->';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="tabbable tabs-right"&gt;'.PHP_EOL;
        $return .= '  &lt;ul class="nav nav-tabs"&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '  &lt;div class="tab-content"&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '</section>';

        $return .= '<!-- Navbar';
        $return .= '================================================== -->';
        $return .= '<section id="navbar">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Navbar</h1>';
        $return .= '</div>';
        $return .= '';
        $return .= '';
        $return .= '<h2>Basic navbar</h2>';
        $return .= '<p>To start, navbars are static (not fixed to the top) and include support for a project name and basic ';
        $return .= 'navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and ';
        $return .= 'content.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="navbar">';
        $return .= '<div class="navbar-inner">';
        $return .= '<a class="brand" href="#">Title</a>';
        $return .= '<ul class="nav">';
        $return .= '<li class="active"><a href="#">Home</a></li>';
        $return .= '<li><a href="#">Link</a></li>';
        $return .= '<li><a href="#">Link</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="navbar"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="navbar-inner"&gt;'.PHP_EOL;
        $return .= '    &lt;a class="brand" href="#"&gt;Title&lt;/a&gt;'.PHP_EOL;
        $return .= '    &lt;ul class="nav"&gt;'.PHP_EOL;
        $return .= '      &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    &lt;/ul&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Navbar components</h2>';

        $return .= '<h3>Brand</h3>';
        $return .= '<p>A simple link to show your brand or project name only requires an anchor tag.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="navbar">';
        $return .= '<div class="navbar-inner">';
        $return .= '<a class="brand" href="#">Title</a>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Nav links</h3>';
        $return .= '<p>Nav items are simple to add via unordered lists.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="navbar">';
        $return .= '<div class="navbar-inner">';
        $return .= '<ul class="nav">';
        $return .= '<li class="active"><a href="#">Home</a></li>';
        $return .= '<li><a href="#">Link</a></li>';
        $return .= '<li><a href="#">Link</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="nav"&gt;'.PHP_EOL;
        $return .= '  &lt;li class="active"&gt;'.PHP_EOL;
        $return .= '    &lt;a href="#">Home&lt;/a&gt;'.PHP_EOL;
        $return .= '  &lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p>You can easily add dividers to your nav links with an empty list item and a simple class.  Just add this ';
        $return .= 'between links:</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="navbar">';
        $return .= '<div class="navbar-inner">';
        $return .= '<ul class="nav">';
        $return .= '<li class="active"><a href="#">Home</a></li>';
        $return .= '<li class="divider-vertical"></li>';
        $return .= '<li><a href="#">Link</a></li>';
        $return .= '<li class="divider-vertical"></li>';
        $return .= '<li><a href="#">Link</a></li>';
        $return .= '<li class="divider-vertical"></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="nav"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '  &lt;li class="divider-vertical"&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Forms</h3>';
        $return .= '<p>To properly style and position a form within the navbar, add the appropriate classes as shown below.  For';
        $return .= 'a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right';
        $return .= '</code> to properly align it.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="navbar">';
        $return .= '<div class="navbar-inner">';
        $return .= '<form class="navbar-form pull-left">';
        $return .= '<input type="text" class="span2">';
        $return .= '<button type="submit" class="btn">Submit</button>';
        $return .= '</form>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;form class="navbar-form pull-left"&gt;'.PHP_EOL;
        $return .= '  &lt;input type="text" class="span2"&gt;'.PHP_EOL;
        $return .= '  &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;'.PHP_EOL;
        $return .= '&lt;/form&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Search form</h3>';
        $return .= '<p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>';
        $return .= '.search-query</code> to the input for specialized styles in the navbar.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="navbar">';
        $return .= '<div class="navbar-inner">';
        $return .= '<form class="navbar-search pull-left">';
        $return .= '<input type="text" class="search-query" placeholder="Search">';
        $return .= '</form>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;form class="navbar-search pull-left"&gt;'.PHP_EOL;
        $return .= '  &lt;input type="text" class="search-query" placeholder="Search"&gt;'.PHP_EOL;
        $return .= '&lt;/form&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Component alignment</h3>';
        $return .= '<p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> ';
        $return .= 'utility classes. Both classes will add a CSS float in the specified direction.</p>';

        $return .= '<h3>Using dropdowns</h3>';
        $return .= '<p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">';
        $return .= 'dropdowns JavaScript plugin</a>.</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="nav"&gt;'.PHP_EOL;
        $return .= '  &lt;li class="dropdown"&gt;'.PHP_EOL;
        $return .= '    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown">'.PHP_EOL;
        $return .= '      Account'.PHP_EOL;
        $return .= '      &lt;b class="caret"&gt;&lt;/b&gt;'.PHP_EOL;
        $return .= '    &lt;/a&gt;'.PHP_EOL;
        $return .= '    &lt;ul class="dropdown-menu"&gt;'.PHP_EOL;
        $return .= '      ...'.PHP_EOL;
        $return .= '    &lt;/ul&gt;'.PHP_EOL;
        $return .= '  &lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p>Visit the <a href="./javascript.html#dropdowns">JavaScript dropdowns documentation</a> for more markup ';
        $return .= 'and information on calling dropdowns.</p>';

        $return .= '<h3>Text</h3>';
        $return .= '<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag ';
        $return .= 'for proper leading and color.</p>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Optional display variations</h2>';
        $return .= '<p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, ';
        $return .= '<code>.navbar</code>.</p>';

        $return .= '<h3>Fixed to top</h3>';
        $return .= '<p>Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding ';
        $return .= 'at least 40px <code>padding</code> to the <code>&lt;body&gt;</code>. Be sure to add this after the core ';
        $return .= 'Bootstrap CSS and before the optional responsive CSS.</p>';
        $return .= '<div class="bs-docs-example bs-navbar-top-example">';
        $return .= '<div class="navbar navbar-fixed-top" style="position: absolute;">';
        $return .= '<div class="navbar-inner">';
        $return .= '<div class="container" style="width: auto; padding: 0 20px;">';
        $return .= '<a class="brand" href="#">Title</a>';
        $return .= '<ul class="nav">';
        $return .= '<li class="active"><a href="#">Home</a></li>';
        $return .= '<li><a href="#">Link</a></li>';
        $return .= '<li><a href="#">Link</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="navbar navbar-fixed-top"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Fixed to bottom</h3>';
        $return .= '<p>Add <code>.navbar-fixed-bottom</code> instead.</p>';
        $return .= '<div class="bs-docs-example bs-navbar-bottom-example">';
        $return .= '<div class="navbar navbar-fixed-bottom" style="position: absolute;">';
        $return .= '<div class="navbar-inner">';
        $return .= '<div class="container" style="width: auto; padding: 0 20px;">';
        $return .= '<a class="brand" href="#">Title</a>';
        $return .= '<ul class="nav">';
        $return .= '<li class="active"><a href="#">Home</a></li>';
        $return .= '<li><a href="#">Link</a></li>';
        $return .= '<li><a href="#">Link</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="navbar navbar-fixed-bottom"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Static top navbar</h3>';
        $return .= '<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>';
        $return .= '.  Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>';
        $return .= 'body</code>.</p>';
        $return .= '<div class="bs-docs-example bs-navbar-top-example">';
        $return .= '<div class="navbar navbar-static-top" style="margin: -1px -1px 0;">';
        $return .= '<div class="navbar-inner">';
        $return .= '<div class="container" style="width: auto; padding: 0 20px;">';
        $return .= '<a class="brand" href="#">Title</a>';
        $return .= '<ul class="nav">';
        $return .= '<li class="active"><a href="#">Home</a></li>';
        $return .= '<li><a href="#">Link</a></li>';
        $return .= '<li><a href="#">Link</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">'.PHP_EOL;
        $return .= '&lt;div class="navbar navbar-static-top"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Responsive navbar</h2>';
        $return .= '<p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>';
        $return .= '.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="navbar">';
        $return .= '<div class="navbar-inner">';
        $return .= '<div class="container">';
        $return .= '<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">';
        $return .= '<span class="icon-bar"></span>';
        $return .= '<span class="icon-bar"></span>';
        $return .= '<span class="icon-bar"></span>';
        $return .= '</a>';
        $return .= '<a class="brand" href="#">Title</a>';
        $return .= '<div class="nav-collapse collapse navbar-responsive-collapse">';
        $return .= $this->nav();
        $return .= '&lt;div class="navbar"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="navbar-inner"&gt;'.PHP_EOL;
        $return .= '    &lt;div class="container"&gt;'.PHP_EOL.PHP_EOL;

        $return .= '      &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;'.PHP_EOL;
        $return .= '      &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;'.PHP_EOL;
        $return .= '        &lt;span class="icon-bar"&gt;&lt;/span&gt;'.PHP_EOL;
        $return .= '        &lt;span class="icon-bar"&gt;&lt;/span&gt;'.PHP_EOL;
        $return .= '        &lt;span class="icon-bar"&gt;&lt;/span&gt;'.PHP_EOL;
        $return .= '      &lt;/a&gt;'.PHP_EOL.PHP_EOL;

        $return .= '      &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;'.PHP_EOL;
        $return .= '      &lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;'.PHP_EOL.PHP_EOL;

        $return .= '      &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;'.PHP_EOL;
        $return .= '      &lt;div class="nav-collapse collapse"&gt;'.PHP_EOL;
        $return .= '        &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;'.PHP_EOL.PHP_EOL;
        $return .= '      &lt;/div&gt;'.PHP_EOL;

        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<div class="alert alert-info">';
        $return .= '<strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">';
        $return .= 'collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.';
        $return .= '</div>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Inverted variation</h2>';
        $return .= '<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="navbar navbar-inverse" style="position: static;">';
        $return .= '<div class="navbar-inner">';
        $return .= '<div class="container">';
        $return .= '<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">';
        $return .= '<span class="icon-bar"></span>';
        $return .= '<span class="icon-bar"></span>';
        $return .= '<span class="icon-bar"></span>';
        $return .= '</a>';
        $return .= '<a class="brand" href="#">Title</a>';
        $return .= '<div class="nav-collapse collapse navbar-inverse-collapse">';
        $return .= $this->nav();
        $return .= '&lt;div class="navbar navbar-inverse"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '</section>';

        $return .= '<!-- Breadcrumbs';
        $return .= '================================================== -->';
        $return .= '<section id="breadcrumbs">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Breadcrumbs <small></small></h1>';
        $return .= '</div>';

        $return .= '<h2>Examples</h2>';
        $return .= '<p>A single example shown as it might be displayed across multiple pages.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul class="breadcrumb">';
        $return .= '<li class="active">Home</li>';
        $return .= '</ul>';
        $return .= '<ul class="breadcrumb">';
        $return .= '<li><a href="#">Home</a> <span class="divider">/</span></li>';
        $return .= '<li class="active">Library</li>';
        $return .= '</ul>';
        $return .= '<ul class="breadcrumb" style="margin-bottom: 5px;">';
        $return .= '<li><a href="#">Home</a> <span class="divider">/</span></li>';
        $return .= '<li><a href="#">Library</a> <span class="divider">/</span></li>';
        $return .= '<li class="active">Data</li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="breadcrumb"&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#"&gt;Library&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li class="active"&gt;Data&lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '</section>';

        $return .= '<!-- Pagination';
        $return .= '================================================== -->';
        $return .= '<section id="pagination">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Pagination <small>Two options for paging through content</small></h1>';
        $return .= '</div>';

        $return .= '<h2>Standard pagination</h2>';
        $return .= '<p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, ';
        $return .= 'easily scalable, and provides large click areas.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="pagination">';
        $return .= '<ul>';
        $return .= '<li><a href="#">&laquo;</a></li>';
        $return .= '<li><a href="#">1</a></li>';
        $return .= '<li><a href="#">2</a></li>';
        $return .= '<li><a href="#">3</a></li>';
        $return .= '<li><a href="#">4</a></li>';
        $return .= '<li><a href="#">5</a></li>';
        $return .= '<li><a href="#">&raquo;</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="pagination"&gt;'.PHP_EOL;
        $return .= '  &lt;ul&gt;'.PHP_EOL;
        $return .= '    &lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    &lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Options</h2>';

        $return .= '<h3>Disabled and active states</h3>';
        $return .= '<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links ';
        $return .= 'and <code>.active</code> to indicate the current page.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="pagination pagination-centered">';
        $return .= '<ul>';
        $return .= '<li class="disabled"><a href="#">&laquo;</a></li>';
        $return .= '<li class="active"><a href="#">1</a></li>';
        $return .= '<li><a href="#">2</a></li>';
        $return .= '<li><a href="#">3</a></li>';
        $return .= '<li><a href="#">4</a></li>';
        $return .= '<li><a href="#">5</a></li>';
        $return .= '<li><a href="#">&raquo;</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="pagination"&gt;'.PHP_EOL;
        $return .= '  &lt;ul&gt;'.PHP_EOL;
        $return .= '    &lt;li class="disabled"&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p>You can optionally swap out active or disabled anchors for spans to remove click functionality ';
        $return .= 'while retaining intended styles.</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="pagination"&gt;'.PHP_EOL;
        $return .= '  &lt;ul&gt;'.PHP_EOL;
        $return .= '    &lt;li class="disabled"&gt;&lt;span&gt;&amp;laquo;&lt;/span&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    &lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Sizes</h3>';
        $return .= '<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small';
        $return .= '</code>, or <code>.pagination-mini</code> for additional sizes.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="pagination pagination-large">';
        $return .= '<ul>';
        $return .= '<li><a href="#">&laquo;</a></li>';
        $return .= '<li><a href="#">1</a></li>';
        $return .= '<li><a href="#">2</a></li>';
        $return .= '<li><a href="#">3</a></li>';
        $return .= '<li><a href="#">4</a></li>';
        $return .= '<li><a href="#">5</a></li>';
        $return .= '<li><a href="#">&raquo;</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<div class="pagination">';
        $return .= '<ul>';
        $return .= '<li><a href="#">&laquo;</a></li>';
        $return .= '<li><a href="#">1</a></li>';
        $return .= '<li><a href="#">2</a></li>';
        $return .= '<li><a href="#">3</a></li>';
        $return .= '<li><a href="#">4</a></li>';
        $return .= '<li><a href="#">5</a></li>';
        $return .= '<li><a href="#">&raquo;</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<div class="pagination pagination-small">';
        $return .= '<ul>';
        $return .= '<li><a href="#">&laquo;</a></li>';
        $return .= '<li><a href="#">1</a></li>';
        $return .= '<li><a href="#">2</a></li>';
        $return .= '<li><a href="#">3</a></li>';
        $return .= '<li><a href="#">4</a></li>';
        $return .= '<li><a href="#">5</a></li>';
        $return .= '<li><a href="#">&raquo;</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<div class="pagination pagination-mini">';
        $return .= '<ul>';
        $return .= '<li><a href="#">&laquo;</a></li>';
        $return .= '<li><a href="#">1</a></li>';
        $return .= '<li><a href="#">2</a></li>';
        $return .= '<li><a href="#">3</a></li>';
        $return .= '<li><a href="#">4</a></li>';
        $return .= '<li><a href="#">5</a></li>';
        $return .= '<li><a href="#">&raquo;</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="pagination pagination-large"&gt;'.PHP_EOL;
        $return .= '  &lt;ul&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;div class="pagination"&gt;'.PHP_EOL;
        $return .= '  &lt;ul&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;div class="pagination pagination-small"&gt;'.PHP_EOL;
        $return .= '  &lt;ul&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;div class="pagination pagination-mini"&gt;'.PHP_EOL;
        $return .= '  &lt;ul&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Alignment</h3>';
        $return .= '<p>Add one of two optional classes to change the alignment of pagination links: <code>';
        $return .= '.pagination-centered</code> and <code>.pagination-right</code>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="pagination pagination-centered">';
        $return .= '<ul>';
        $return .= '<li><a href="#">&laquo;</a></li>';
        $return .= '<li><a href="#">1</a></li>';
        $return .= '<li><a href="#">2</a></li>';
        $return .= '<li><a href="#">3</a></li>';
        $return .= '<li><a href="#">4</a></li>';
        $return .= '<li><a href="#">5</a></li>';
        $return .= '<li><a href="#">&raquo;</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="pagination pagination-centered"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="pagination pagination-right">';
        $return .= '<ul>';
        $return .= '<li><a href="#">&laquo;</a></li>';
        $return .= '<li><a href="#">1</a></li>';
        $return .= '<li><a href="#">2</a></li>';
        $return .= '<li><a href="#">3</a></li>';
        $return .= '<li><a href="#">4</a></li>';
        $return .= '<li><a href="#">5</a></li>';
        $return .= '<li><a href="#">&raquo;</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="pagination pagination-right"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Pager</h2>';
        $return .= '<p>Quick previous and next links for simple pagination implementations with light markup and styles';
        $return .= '.  It\'s great for simple sites like blogs or magazines.</p>';

        $return .= '<h3>Default example</h3>';
        $return .= '<p>By default, the pager centers links.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul class="pager">';
        $return .= '<li><a href="#">Previous</a></li>';
        $return .= '<li><a href="#">Next</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="pager"&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#"&gt;Previous&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Aligned links</h3>';
        $return .= '<p>Alternatively, you can align each link to the sides:</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul class="pager">';
        $return .= '<li class="previous"><a href="#">&larr; Older</a></li>';
        $return .= '<li class="next"><a href="#">Newer &rarr;</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="pager"&gt;'.PHP_EOL;
        $return .= '  &lt;li class="previous"&gt;'.PHP_EOL;
        $return .= '    &lt;a href="#"&gt;&amp;larr; Older&lt;/a&gt;'.PHP_EOL;
        $return .= '  &lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li class="next"&gt;'.PHP_EOL;
        $return .= '    &lt;a href="#"&gt;Newer &amp;rarr;&lt;/a&gt;'.PHP_EOL;
        $return .= '  &lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Optional disabled state</h3>';
        $return .= '<p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul class="pager">';
        $return .= '<li class="previous disabled"><a href="#">&larr; Older</a></li>';
        $return .= '<li class="next"><a href="#">Newer &rarr;</a></li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="pager"&gt;'.PHP_EOL;
        $return .= '  &lt;li class="previous disabled"&gt;'.PHP_EOL;
        $return .= '    &lt;a href="#"&gt;&amp;larr; Older&lt;/a&gt;'.PHP_EOL;
        $return .= '  &lt;/li&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '</section>';

        $return .= '<!-- Labels and badges';
        $return .= '================================================== -->';
        $return .= '<section id="labels-badges">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Labels and badges</h1>';
        $return .= '</div>';
        $return .= '<h3>Labels</h3>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th>Labels</th>';
        $return .= '<th>Markup</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '<span class="label">Default</span>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '<span class="label label-success">Success</span>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '<span class="label label-warning">Warning</span>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '<span class="label label-important">Important</span>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '<span class="label label-info">Info</span>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= '<span class="label label-inverse">Inverse</span>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';

        $return .= '<h3>Badges</h3>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th>Name</th>';
        $return .= '<th>Example</th>';
        $return .= '<th>Markup</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= 'Default';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<span class="badge">1</span>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= 'Success';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<span class="badge badge-success">2</span>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= 'Warning';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<span class="badge badge-warning">4</span>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= 'Important';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<span class="badge badge-important">6</span>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= 'Info';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<span class="badge badge-info">8</span>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>';
        $return .= 'Inverse';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<span class="badge badge-inverse">10</span>';
        $return .= '</td>';
        $return .= '<td>';
        $return .= '<code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';

        $return .= '<h3>Easily collapsible</h3>';
        $return .= '<p>For easy implementation, labels and badges will simply collapse (via CSS\'s <code>:empty</code> selector';
        $return .= ') when no content exists within.</p>';

        $return .= '</section>';

        $return .= '<!-- Typographic components';
        $return .= '================================================== -->';
        $return .= '<section id="typography">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Typographic components</h1>';
        $return .= '</div>';
        $return .= '';
        $return .= '<h2>Hero unit</h2>';
        $return .= '<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and ';
        $return .= 'content-heavy sites.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="hero-unit">';
        $return .= '<h1>Hello, world!</h1>';
        $return .= '<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured ';
        $return .= 'content or information.</p>';
        $return .= '<p><a class="btn btn-primary btn-large">Learn more</a></p>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="hero-unit"&gt;'.PHP_EOL;
        $return .= '  &lt;h1&gt;Heading&lt;/h1&gt;'.PHP_EOL;
        $return .= '  &lt;p&gt;Tagline&lt;/p&gt;'.PHP_EOL;
        $return .= '  &lt;p&gt;'.PHP_EOL;
        $return .= '    &lt;a class="btn btn-primary btn-large"&gt;'.PHP_EOL;
        $return .= '      Learn more'.PHP_EOL;
        $return .= '    &lt;/a&gt;'.PHP_EOL;
        $return .= '  &lt;/p&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h2>Page header</h2>';
        $return .= '<p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page';
        $return .= '.  It can utilize the <code>h1</code>\'s default <code>small</code>, element as well most other components ';
        $return .= '(with additional styles).</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Example page header <small>Subtext for header</small></h1>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="page-header"&gt;'.PHP_EOL;
        $return .= '  &lt;h1&gt;Example page header &lt;small&gt;Subtext for header&lt;/small&gt;&lt;/h1&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '</section>';

        $return .= '<!-- Thumbnails';
        $return .= '================================================== -->';
        $return .= '<section id="thumbnails">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1>';
        $return .= '</div>';

        $return .= '<h2>Default thumbnails</h2>';
        $return .= '<p>By default, Bootstrap\'s thumbnails are designed to showcase linked images with minimal required ';
        $return .= 'markup.</p>';
        $return .= '<div class="row-fluid">';
        $return .= '<ul class="thumbnails">';
        $return .= $this->fourthumbnails();
        $return .= '</ul>';
        $return .= '</div>';

        $return .= '<h2>Highly customizable</h2>';
        $return .= '<p>With a bit of extra markup, it\'s possible to add any kind of HTML content like headings, paragraphs, or ';
        $return .= 'buttons into thumbnails.</p>';
        $return .= '<div class="row-fluid">';
        $return .= '<ul class="thumbnails">';
        $return .= $this->threethumbnails();
        $return .= '</ul>';
        $return .= '</div>';

        $return .= '<h3>Why use thumbnails</h3>';
        $return .= '<p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or ';
        $return .= 'videos, image search results, retail products, portfolios, and much more. They can be links or static ';
        $return .= 'content.</p>';

        $return .= '<h3>Simple, flexible markup</h3>';
        $return .= '<p>Thumbnail markup is simple&mdash;a <code>ul</code> with any number of <code>li</code> elements is ';
        $return .= 'all that is required.  It\'s also super flexible, allowing for any type of content with just a bit ';
        $return .= 'more markup to wrap your contents.</p>';

        $return .= '<h3>Uses grid column sizes</h3>';
        $return .= '<p>Lastly, the thumbnails component uses existing grid system classes&mdash;like <code>.span2</code> ';
        $return .= 'or <code>.span3</code>&mdash;for control of thumbnail dimensions.</p>';

        $return .= '<h2>Markup</h2>';
        $return .= '<p>As mentioned previously, the required markup for thumbnails is light and straightforward.  Here\'s ';
        $return .= 'a look at the default setup <strong>for linked images</strong>:</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="thumbnails"&gt;'.PHP_EOL;
        $return .= '  &lt;li class="span4"&gt;'.PHP_EOL;
        $return .= '    &lt;a href="#" class="thumbnail"&gt;'.PHP_EOL;
        $return .= '      &lt;img data-src="holder.js/300x200" alt=""&gt;'.PHP_EOL;
        $return .= '    &lt;/a&gt;'.PHP_EOL;
        $return .= '  &lt;/li&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content ';
        $return .= 'anywhere, we swap the <code>&lt;a&gt;</code> for a <code>&lt;div&gt;</code> like so:</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="thumbnails"&gt;'.PHP_EOL;
        $return .= '  &lt;li class="span4"&gt;'.PHP_EOL;
        $return .= '    &lt;div class="thumbnail"&gt;'.PHP_EOL;
        $return .= '      &lt;img data-src="holder.js/300x200" alt=""&gt;'.PHP_EOL;
        $return .= '      &lt;h3&gt;Thumbnail label&lt;/h3&gt;'.PHP_EOL;
        $return .= '      &lt;p&gt;Thumbnail caption...&lt;/p&gt;'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;/li&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h2>More examples</h2>';
        $return .= '<p>Explore all your options with the various grid classes available to you. You can also mix and match ';
        $return .= 'different sizes.</p>';
        $return .= '<ul class="thumbnails row-fluid">';
        $return .= '<li class="span5">';
        $return .= '<a href="#" class="thumbnail">';
        $return .= '<div class="thumbnail-container">';
        $return .= $this->threesixtytwoseventy();
        $return .= '</div>';
        $return .= '</a>';
        $return .= '</li>';
        $return .= '<li class="span4">';
        $return .= '<a href="#" class="thumbnail">';
        $return .= '<div class="thumbnail-container">';
        $return .= $this->twosixtyonetwenty();
        $return .= '</div>';
        $return .= '</a>';
        $return .= '</li>';
        $return .= '<li class="span3">';
        $return .= '<a href="#" class="thumbnail">';
        $return .= '<div class="thumbnail-container">';
        $return .= $this->onesixtyonetwenty();
        $return .= '</div>';
        $return .= '</a>';
        $return .= '</li>';
        $return .= '<li class="span4">';
        $return .= '<a href="#" class="thumbnail">';
        $return .= '<div class="thumbnail-container">';
        $return .= $this->twosixtyonetwenty();
        $return .= '</div>';
        $return .= '</a>';
        $return .= '</li>';
        $return .= '<li class="span3">';
        $return .= '<a href="#" class="thumbnail">';
        $return .= '<div class="thumbnail-container">';
        $return .= $this->onesixtyonetwenty();
        $return .= '</div>';
        $return .= '</a>';
        $return .= '</li>';
        $return .= '</ul>';

        $return .= '</section>';

        $return .= '<!-- Alerts';
        $return .= '================================================== -->';
        $return .= '<section id="alerts">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Alerts <small>Styles for success, warning, and error messages</small></h1>';
        $return .= '</div>';
        $return .= '';
        $return .= '<h2>Default alert</h2>';
        $return .= '<p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="alert">';
        $return .= '<button type="button" class="close" data-dismiss="alert">&times;</button>';
        $return .= '<strong>Warning!</strong> Best check yo self, you\'re not looking too good.';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="alert"&gt;'.PHP_EOL;
        $return .= '  &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;strong&gt;Warning!&lt;/strong&gt; Best check yo self, you\'re not looking too good.'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Dismiss buttons</h3>';
        $return .= '<p>Mobile Safari and Mobile Opera browsers, in addition to the <code>data-dismiss="alert"</code> attribute, ';
        $return .= 'require an <code>href="#"</code> for the dismissal of alerts when using an <code>&lt;a&gt;</code> tag.</p>';
        $return .= '<pre class="prettyprint linenums">&lt;a href="#" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/a&gt;';
        $return .= '</pre>';
        $return .= '<p>Alternatively, you may use a <code>&lt;button&gt;</code> element with the data attribute, which we have ';
        $return .= 'opted to do for our docs. When using <code>&lt;button&gt;</code>, you must include <code>type="button"';
        $return .= '</code> or your forms may not submit.</p>';
        $return .= '<pre class="prettyprint linenums">&lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;';
        $return .= '&lt;/button&gt;</pre>';

        $return .= '<h3>Dismiss alerts via JavaScript</h3>';
        $return .= '<p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of ';
        $return .= 'alerts.</p>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Options</h2>';
        $return .= '<p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>';
        $return .= '.alert-block</code>.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="alert alert-block">';
        $return .= '<button type="button" class="close" data-dismiss="alert">&times;</button>';
        $return .= '<h4>Warning!</h4>';
        $return .= '<p>Best check yo self, you\'re not looking too good. Nulla vitae elit libero, a pharetra augue.  Praesent ';
        $return .= 'commodo cursus magna, vel scelerisque nisl consectetur et.</p>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="alert alert-block"&gt;'.PHP_EOL;
        $return .= '  &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;h4&gt;Warning!&lt;/h4&gt;'.PHP_EOL;
        $return .= '  Best check yo self, you\'re not...'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Contextual alternatives</h2>';
        $return .= '<p>Add optional classes to change an alert\'s connotation.</p>';

        $return .= '<h3>Error or danger</h3>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="alert alert-error">';
        $return .= '<button type="button" class="close" data-dismiss="alert">&times;</button>';
        $return .= '<strong>Oh snap!</strong> Change a few things up and try submitting again.';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="alert alert-error"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Success</h3>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="alert alert-success">';
        $return .= '<button type="button" class="close" data-dismiss="alert">&times;</button>';
        $return .= '<strong>Well done!</strong> You successfully read this important alert message.';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="alert alert-success"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>'.PHP_EOL;

        $return .= '<h3>Information</h3>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="alert alert-info">';
        $return .= '<button type="button" class="close" data-dismiss="alert">&times;</button>';
        $return .= '<strong>Heads up!</strong> This alert needs your attention, but it\'s not super important.';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="alert alert-info"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '</section>';

        $return .= '<!-- Progress bars';
        $return .= '================================================== -->';
        $return .= '<section id="progress">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Progress bars <small>For loading, redirecting, or action status</small></h1>';
        $return .= '</div>';
        $return .= '';
        $return .= '<h2>Examples and markup</h2>';
        $return .= '';
        $return .= '<h3>Basic</h3>';
        $return .= '<p>Default progress bar with a vertical gradient.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="progress">';
        $return .= '<div class="bar" style="width: 60%;"></div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="progress"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="bar" style="width: 60%;"&gt;&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Striped</h3>';
        $return .= '<p>Uses a gradient to create a striped effect. Not available in IE7-8.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="progress progress-striped">';
        $return .= '<div class="bar" style="width: 20%;"></div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="progress progress-striped"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="bar" style="width: 20%;"&gt;&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Animated</h3>';
        $return .= '<p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right ';
        $return .= 'to left. Not available in all versions of IE.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="progress progress-striped active">';
        $return .= '<div class="bar" style="width: 45%"></div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="progress progress-striped active"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="bar" style="width: 40%;"&gt;&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Stacked</h3>';
        $return .= '<p>Place multiple bars into the same <code>.progress</code> to stack them.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="progress">';
        $return .= '<div class="bar bar-success" style="width: 35%"></div>';
        $return .= '<div class="bar bar-warning" style="width: 20%"></div>';
        $return .= '<div class="bar bar-danger" style="width: 10%"></div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="progress"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="bar bar-success" style="width: 35%;"&gt;&lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="bar bar-warning" style="width: 20%;"&gt;&lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="bar bar-danger" style="width: 10%;"&gt;&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>'.PHP_EOL;

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Options</h2>';

        $return .= '<h3>Additional colors</h3>';
        $return .= '<p>Progress bars use some of the same button and alert classes for consistent styles.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="progress progress-info" style="margin-bottom: 9px;">';
        $return .= '<div class="bar" style="width: 20%"></div>';
        $return .= '</div>';
        $return .= '<div class="progress progress-success" style="margin-bottom: 9px;">';
        $return .= '<div class="bar" style="width: 40%"></div>';
        $return .= '</div>';
        $return .= '<div class="progress progress-warning" style="margin-bottom: 9px;">';
        $return .= '<div class="bar" style="width: 60%"></div>';
        $return .= '</div>';
        $return .= '<div class="progress progress-danger">';
        $return .= '<div class="bar" style="width: 80%"></div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="progress progress-info"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="bar" style="width: 20%"&gt;&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;div class="progress progress-success"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="bar" style="width: 40%"&gt;&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;div class="progress progress-warning"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="bar" style="width: 60%"&gt;&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;div class="progress progress-danger"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="bar" style="width: 80%"&gt;&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Striped bars</h3>';
        $return .= '<p>Similar to the solid colors, we have varied striped progress bars.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="progress progress-info progress-striped" style="margin-bottom: 9px;">';
        $return .= '<div class="bar" style="width: 20%"></div>';
        $return .= '</div>';
        $return .= '<div class="progress progress-success progress-striped" style="margin-bottom: 9px;">';
        $return .= '<div class="bar" style="width: 40%"></div>';
        $return .= '</div>';
        $return .= '<div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">';
        $return .= '<div class="bar" style="width: 60%"></div>';
        $return .= '</div>';
        $return .= '<div class="progress progress-danger progress-striped">';
        $return .= '<div class="bar" style="width: 80%"></div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="progress progress-info progress-striped"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="bar" style="width: 20%"&gt;&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;div class="progress progress-success progress-striped"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="bar" style="width: 40%"&gt;&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;div class="progress progress-warning progress-striped"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="bar" style="width: 60%"&gt;&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;div class="progress progress-danger progress-striped"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="bar" style="width: 80%"&gt;&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Browser support</h2>';
        $return .= '<p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects.  These ';
        $return .= 'features are not supported in IE7-9 or older versions of Firefox.</p>';
        $return .= '<p>Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.</p>';

        $return .= '</section>';

        $return .= '<!-- Media object';
        $return .= '================================================== -->';
        $return .= '<section id="media">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Media object</h1>';
        $return .= '</div>';
        $return .= '<p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets,';
        $return .= 'etc) that feature a left- or right-aligned image alongside textual content.</p>';
        $return .= '';
        $return .= '<h2>Default example</h2>';
        $return .= '<p>The default media allow to float a media object (images, video, audio) to the left or right of a content ';
        $return .= 'block.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="media">';
        $return .= '<a class="pull-left" href="#">';
        $return .= $this->sixtyfoursixtyfour();
        $return .= '</a>';
        $return .= '<div class="media-body">';
        $return .= '<h4 class="media-heading">Media heading</h4>';
        $return .= 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras ';
        $return .= 'purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ';
        $return .= 'fringilla. Donec lacinia congue felis in faucibus.';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<div class="media">';
        $return .= '<a class="pull-left" href="#">';
        $return .= $this->sixtyfoursixtyfour();
        $return .= '</a>';
        $return .= '<div class="media-body">';
        $return .= '<h4 class="media-heading">Media heading</h4>';
        $return .= 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras ';
        $return .= 'purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ';
        $return .= 'fringilla. Donec lacinia congue felis in faucibus.';
        $return .= '<div class="media">';
        $return .= '<a class="pull-left" href="#">';
        $return .= $this->sixtyfoursixtyfour();
        $return .= '</a>';
        $return .= '<div class="media-body">';
        $return .= '<h4 class="media-heading">Media heading</h4>';
        $return .= 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras ';
        $return .= 'purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ';
        $return .= 'fringilla. Donec lacinia congue felis in faucibus.';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="media"&gt;'.PHP_EOL;
        $return .= '  &lt;a class="pull-left" href="#"&gt;'.PHP_EOL;
        $return .= '    &lt;img class="media-object" data-src="holder.js/64x64"&gt;'.PHP_EOL;
        $return .= '  &lt;/a&gt;'.PHP_EOL;
        $return .= '  &lt;div class="media-body"&gt;'.PHP_EOL;
        $return .= '    &lt;h4 class="media-heading"&gt;Media heading&lt;/h4&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;

        $return .= '    &lt;!-- Nested media object --&gt;'.PHP_EOL;
        $return .= '    &lt;div class="media"&gt;'.PHP_EOL;
        $return .= '      ...'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Media list</h2>';
        $return .= '<p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists)';
        $return .= '.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul class="media-list">';
        $return .= '<li class="media">';
        $return .= '<a class="pull-left" href="#">';
        $return .= $this->sixtyfoursixtyfour();
        $return .= '</a>';
        $return .= '<div class="media-body">';
        $return .= '<h4 class="media-heading">Media heading</h4>';
        $return .= '<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras ';
        $return .= 'purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>';
        $return .= '<!-- Nested media object -->';
        $return .= '<div class="media">';
        $return .= '<a class="pull-left" href="#">';
        $return .= $this->sixtyfoursixtyfour();
        $return .= '</a>';
        $return .= '<div class="media-body">';
        $return .= '<h4 class="media-heading">Nested media heading</h4>';
        $return .= 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras ';
        $return .= 'purus odio, vestibulum in vulputate at, tempus viverra turpis.';
        $return .= '<!-- Nested media object -->';
        $return .= '<div class="media">';
        $return .= '<a class="pull-left" href="#">';
        $return .= $this->sixtyfoursixtyfour();
        $return .= '</a>';
        $return .= '<div class="media-body">';
        $return .= '<h4 class="media-heading">Nested media heading</h4>';
        $return .= 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras ';
        $return .= 'purus odio, vestibulum in vulputate at, tempus viverra turpis.';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<!-- Nested media object -->';
        $return .= '<div class="media">';
        $return .= '<a class="pull-left" href="#">';
        $return .= $this->sixtyfoursixtyfour();
        $return .= '</a>';
        $return .= '<div class="media-body">';
        $return .= '<h4 class="media-heading">Nested media heading</h4>';
        $return .= 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras ';
        $return .= 'purus odio, vestibulum in vulputate at, tempus viverra turpis.';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</li>';
        $return .= '<li class="media">';
        $return .= '<a class="pull-right" href="#">';
        $return .= $this->sixtyfoursixtyfour();
        $return .= '</a>';
        $return .= '<div class="media-body">';
        $return .= '<h4 class="media-heading">Media heading</h4>';
        $return .= 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras ';
        $return .= 'purus odio, vestibulum in vulputate at, tempus viverra turpis.';
        $return .= '</div>';
        $return .= '</li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="media-list"&gt;'.PHP_EOL;
        $return .= '  &lt;li class="media"&gt;'.PHP_EOL;
        $return .= '    &lt;a class="pull-left" href="#"&gt;'.PHP_EOL;
        $return .= '      &lt;img class="media-object" data-src="holder.js/64x64"&gt;'.PHP_EOL;
        $return .= '    &lt;/a&gt;'.PHP_EOL;
        $return .= '    &lt;div class="media-body"&gt;'.PHP_EOL;
        $return .= '      &lt;h4 class="media-heading"&gt;Media heading&lt;/h4&gt;'.PHP_EOL;
        $return .= '      ...'.PHP_EOL;
        $return .= ''.PHP_EOL;
        $return .= '      &lt;!-- Nested media object --&gt;'.PHP_EOL;
        $return .= '      &lt;div class="media"&gt;'.PHP_EOL;
        $return .= '        ...'.PHP_EOL;
        $return .= '     &lt;/div&gt;'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '</section>';

        $return .= '<!-- Miscellaneous';
        $return .= '================================================== -->';
        $return .= '<section id="misc">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Miscellaneous <small>Lightweight utility components</small></h1>';
        $return .= '</div>';
        $return .= '';
        $return .= '<h2>Wells</h2>';
        $return .= '<p>Use the well as a simple effect on an element to give it an inset effect.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="well">';
        $return .= 'Look, I\'m in a well!';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="well"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<h3>Optional classes</h3>';
        $return .= '<p>Control padding and rounded corners with two optional modifier classes.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="well well-large">';
        $return .= 'Look, I\'m in a well!';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="well well-large"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="well well-small">';
        $return .= 'Look, I\'m in a well!';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="well well-small"&gt;'.PHP_EOL;
        $return .= '  ...'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h2>Close icon</h2>';
        $return .= '<p>Use the generic close icon for dismissing content like modals and alerts.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<p><button class="close" style="float: none;">&times;</button></p>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">&lt;button class="close"&gt;&amp;times;&lt;/button&gt;</pre>';
        $return .= '<p>iOS devices require an <code>href="#"</code> for click events if you would rather use an anchor.</p>';
        $return .= '<pre class="prettyprint linenums">&lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;</pre>';
        $return .= '';
        $return .= '<h2>Helper classes</h2>';
        $return .= '<p>Simple, focused classes for small display or behavior tweaks.</p>';
        $return .= '';
        $return .= '<h4>.pull-left</h4>';
        $return .= '<p>Float an element left</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= 'class="pull-left"'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '.pull-left {'.PHP_EOL;
        $return .= '  float: left;'.PHP_EOL;
        $return .= '}'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h4>.pull-right</h4>';
        $return .= '<p>Float an element right</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= 'class="pull-right"'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '.pull-right {'.PHP_EOL;
        $return .= '  float: right;'.PHP_EOL;
        $return .= '}'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h4>.muted</h4>';
        $return .= '<p>Change an element\'s color to <code>#999</code></p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= 'class="muted"'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '.muted {'.PHP_EOL;
        $return .= '  color: #999;'.PHP_EOL;
        $return .= '}'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h4>.clearfix</h4>';
        $return .= '<p>Clear the <code>float</code> on any element</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= 'class="clearfix"'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '.clearfix {'.PHP_EOL;
        $return .= '  *zoom: 1;'.PHP_EOL;
        $return .= '  &:before,'.PHP_EOL;
        $return .= '  &:after {'.PHP_EOL;
        $return .= '    display: table;'.PHP_EOL;
        $return .= '    content: "";'.PHP_EOL;
        $return .= '  }'.PHP_EOL;
        $return .= '  &:after {'.PHP_EOL;
        $return .= '    clear: both;'.PHP_EOL;
        $return .= '  }'.PHP_EOL;
        $return .= '}'.PHP_EOL;
        $return .= '</pre>';

        $return .= '</section>';

        $return .= '<!-- JavaScript overview';
        $return .= '================================================== -->';
        $return .= '<section id="overview">';
        $return .= '<div class="page-header">';
        $return .= '<h1>JavaScript in Bootstrap</h1>';
        $return .= '</div>';

        $return .= '<h3>Individual or compiled</h3>';
        $return .= '<p>Plugins can be included individually (though some have required dependencies), or all at once. Both ';
        $return .= '<strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p>';

        $return .= '<h3>Data attributes</h3>';
        $return .= '<p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript';
        $return .= '.  This is Bootstrap\'s first class API and should be your first consideration when using a plugin.</p>';

        $return .= '<p>That said, in some situations it may be desirable to turn this functionality off.  Therefore, we also ';
        $return .= 'provide the ability to disable the data attribute API by unbinding all events on the body namespaced with ';
        $return .= '\'data-api\'. This looks like this:';
        $return .= '<pre class="prettyprint linenums">$(\'body\').off(\'.data-api\')</pre>';

        $return .= '<p>Alternatively, to target a specific plugin, just include the plugin\'s name as a namespace along with the ';
        $return .= 'data-api namespace like this:</p>';
        $return .= '<pre class="prettyprint linenums">$(\'body\').off(\'.alert.data-api\')</pre>';

        $return .= '<h3>Programmatic API</h3>';
        $return .= '<p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API.  All ';
        $return .= 'public APIs are single, chainable methods, and return the collection acted upon.</p>';
        $return .= '<pre class="prettyprint linenums">$(".btn.danger").button("toggle").addClass("fat")</pre>';
        $return .= '<p>All methods should accept an optional options object, a string which targets a particular method, or ';
        $return .= 'nothing (which initiates a plugin with default behavior):</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '$("#myModal").modal()                       // initialized with defaults'.PHP_EOL;
        $return .= '$("#myModal").modal({ keyboard: false })   // initialized with no keyboard'.PHP_EOL;
        $return .= '$("#myModal").modal(\'show\')                // initializes and invokes show immediately</p>'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p>Each plugin also exposes its raw constructor on a \'Constructor\' property: <code>$.fn.popover.Constructor';
        $return .= '</code>. If you\'d like to get a particular plugin instance, retrieve it directly from an element: <code>';
        $return .= '$(\'[rel=popover]\').data(\'popover\')</code>.</p>';

        $return .= '<h3>No Conflict</h3>';
        $return .= '<p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, ';
        $return .= 'namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on ';
        $return .= 'the plugin you wish to revert the value of.</p>';

        $return .= '<pre class="prettyprint linenums">';
        $return .= 'var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value'.PHP_EOL;
        $return .= '$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the bootstrap functionality'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Events</h3>';
        $return .= '<p>Bootstrap provides custom events for most plugin\'s unique actions. Generally, these come in an ';
        $return .= 'infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at ';
        $return .= 'the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the ';
        $return .= 'completion of an action.</p>';
        $return .= '<p>All infinitive events provide preventDefault functionality. This provides the ability to stop the ';
        $return .= 'execution of an action before it starts.</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '$(\'#myModal\').on(\'show\', function (e) {'.PHP_EOL;
        $return .= '    if (!data) return e.preventDefault() // stops modal from being shown'.PHP_EOL;
        $return .= '})'.PHP_EOL;
        $return .= '</pre>';
        $return .= '</section>';

        $return .= '<!-- Transitions';
        $return .= '================================================== -->';
        $return .= '<section id="transitions">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Transitions <small>bootstrap-transition.js</small></h1>';
        $return .= '</div>';
        $return .= '<h3>About transitions</h3>';
        $return .= '<p>For simple transition effects, include <strong>bootstrap-transition.js</strong> once alongside the ';
        $return .= 'other JS files. If you\'re using the compiled (or minified) <strong>bootstrap.js</strong>, there is no ';
        $return .= 'need to include this&mdash;it\'s already there.</p>';
        $return .= '<h3>Use cases</h3>';
        $return .= '<p>A few examples of the transition plugin:</p>';
        $return .= '<ul>';
        $return .= '<li>Sliding or fading in modals</li>';
        $return .= '<li>Fading out tabs</li>';
        $return .= '<li>Fading out alerts</li>';
        $return .= '<li>Sliding carousel panes</li>';
        $return .= '</ul>';

        $return .= '</section>';

        $return .= '<!-- Modal';
        $return .= '================================================== -->';
        $return .= '<section id="modals">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Modals <small>bootstrap-modal.js</small></h1>';
        $return .= '</div>';

        $return .= '<h2>Examples</h2>';
        $return .= '<p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart ';
        $return .= 'defaults.</p>';

        $return .= '<h3>Static example</h3>';
        $return .= '<p>A rendered modal with header, body, and set of actions in the footer.</p>';
        $return .= '<div class="bs-docs-example" style="background-color: #f5f5f5;">';
        $return .= '<div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; ';
        $return .= 'z-index: 1; max-width: 100%;">';
        $return .= '<div class="modal-header">';
        $return .= '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
        $return .= '<h3>Modal header</h3>';
        $return .= '</div>';
        $return .= '<div class="modal-body">';
        $return .= '<p>One fine body&hellip;</p>';
        $return .= '</div>';
        $return .= '<div class="modal-footer">';
        $return .= '<a href="#" class="btn">Close</a>';
        $return .= '<a href="#" class="btn btn-primary">Save changes</a>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="modal hide fade"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="modal-header"&gt;'.PHP_EOL;
        $return .= '    &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;';
        $return .= '&lt;/button&gt;'.PHP_EOL;
        $return .= '    &lt;h3&gt;Modal header&lt;/h3&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="modal-body"&gt;'.PHP_EOL;
        $return .= '    &lt;p&gt;One fine body&hellip;&lt;/p&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="modal-footer"&gt;'.PHP_EOL;
        $return .= '    &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;'.PHP_EOL;
        $return .= '    &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Live demo</h3>';
        $return .= '<p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top ';
        $return .= 'of the page.</p>';
        $return .= '<!-- sample modal content -->';
        $return .= '<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ';
        $return .= 'aria-hidden="true">';
        $return .= '<div class="modal-header">';
        $return .= '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
        $return .= '<h3 id="myModalLabel">Modal Heading</h3>';
        $return .= '</div>';
        $return .= '<div class="modal-body">';
        $return .= '<h4>Text in a modal</h4>';
        $return .= '<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>';

        $return .= '<h4>Popover in a modal</h4>';
        $return .= '<p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here\'s ';
        $return .= 'some amazing content. It\'s very engaging. right?">button</a> should trigger a popover on click.</p>';

        $return .= '<h4>Tooltips in a modal</h4>';
        $return .= '<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" ';
        $return .= 'title="Tooltip">that link</a> should have tooltips on hover.</p>';

        $return .= '<hr>';

        $return .= '<h4>Overflowing text to show optional scrollbar</h4>';
        $return .= '<p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this ';
        $return .= 'extra lorem ipsum text we\'ve included.</p>';
        $return .= '<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget ';
        $return .= 'quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>';
        $return .= '<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue ';
        $return .= 'laoreet rutrum faucibus dolor auctor.</p>';
        $return .= '<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl ';
        $return .= 'consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>';
        $return .= '<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas ';
        $return .= 'eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>';
        $return .= '<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue ';
        $return .= 'laoreet rutrum faucibus dolor auctor.</p>';
        $return .= '<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl ';
        $return .= 'consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>';
        $return .= '</div>';
        $return .= '<div class="modal-footer">';
        $return .= '<button class="btn" data-dismiss="modal">Close</button>';
        $return .= '<button class="btn btn-primary">Save changes</button>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<div class="bs-docs-example" style="padding-bottom: 24px;">';
        $return .= '<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt!-- Button to trigger modal --&gt;'.PHP_EOL;
        $return .= '&lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt;'.PHP_EOL;
        $return .= ''.PHP_EOL;
        $return .= '&lt!-- Modal --&gt;'.PHP_EOL;
        $return .= '&lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ';
        $return .= 'aria-hidden="true"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="modal-header"&gt;'.PHP_EOL;
        $return .= '    &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&times;&lt;/button';
        $return .= '&gt;'.PHP_EOL;
        $return .= '    &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="modal-body"&gt;'.PHP_EOL;
        $return .= '    &lt;p&gt;One fine body&hellip;&lt;/p&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="modal-footer"&gt;'.PHP_EOL;
        $return .= '    &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;'.PHP_EOL;
        $return .= '    &lt;button class="btn btn-primary"&gt;Save changes&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Usage</h2>';

        $return .= '<h3>Via data attributes</h3>';
        $return .= '<p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element';
        $return .= ', like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specifi';
        $return .= 'c modal to toggle.</p>';
        $return .= '<pre class="prettyprint linenums">&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;';
        $return .= 'Launch modal&lt;/button&gt;</pre>';

        $return .= '<h3>Via JavaScript</h3>';
        $return .= '<p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#myModal\').modal(options)</pre>';

        $return .= '<h3>Options</h3>';
        $return .= '<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to ';
        $return .= '<code>data-</code>, as in <code>data-backdrop=""</code>.</p>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th style="width: 100px;">Name</th>';
        $return .= '<th style="width: 50px;">type</th>';
        $return .= '<th style="width: 50px;">default</th>';
        $return .= '<th>description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>backdrop</td>';
        $return .= '<td>boolean</td>';
        $return .= '<td>true</td>';
        $return .= '<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which ';
        $return .= 'doesn\'t close the modal on click.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>keyboard</td>';
        $return .= '<td>boolean</td>';
        $return .= '<td>true</td>';
        $return .= '<td>Closes the modal when escape key is pressed</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>show</td>';
        $return .= '<td>boolean</td>';
        $return .= '<td>true</td>';
        $return .= '<td>Shows the modal when initialized.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>remote</td>';
        $return .= '<td>path</td>';
        $return .= '<td>false</td>';
        $return .= '<td><p>If a remote url is provided, content will be loaded via jQuery\'s <code>load</code> method and ';
        $return .= 'injected into the <code>.modal-body</code>. If you\'re using the data api, you may alternatively use ';
        $return .= 'the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>';
        $return .= '<pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal';
        $return .= '"&gt;click me&lt;/a&gt;</code></pre></td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';

        $return .= '<h3>Methods</h3>';
        $return .= '<h4>.modal(options)</h4>';
        $return .= '<p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '$(\'#myModal\').modal({'.PHP_EOL;
        $return .= '  keyboard: false'.PHP_EOL;
        $return .= '})'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<h4>.modal(\'toggle\')</h4>';
        $return .= '<p>Manually toggles a modal.</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#myModal\').modal(\'toggle\')</pre>';
        $return .= '<h4>.modal(\'show\')</h4>';
        $return .= '<p>Manually opens a modal.</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#myModal\').modal(\'show\')</pre>';
        $return .= '<h4>.modal(\'hide\')</h4>';
        $return .= '<p>Manually hides a modal.</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#myModal\').modal(\'hide\')</pre>';
        $return .= '<h3>Events</h3>';
        $return .= '<p>Bootstrap\'s modal class exposes a few events for hooking into modal functionality.</p>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th style="width: 150px;">Event</th>';
        $return .= '<th>Description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>show</td>';
        $return .= '<td>This event fires immediately when the <code>show</code> instance method is called.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>shown</td>';
        $return .= '<td>This event is fired when the modal has been made visible to the user (will wait for css ';
        $return .= 'transitions to complete).</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>hide</td>';
        $return .= '<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>hidden</td>';
        $return .= '<td>This event is fired when the modal has finished being hidden from the user (will wait for css ';
        $return .= 'transitions to complete).</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '$(\'#myModal\').on(\'hidden\', function () {'.PHP_EOL;
        $return .= '  // do something…'.PHP_EOL;
        $return .= '})'.PHP_EOL;
        $return .= '</pre>';
        $return .= '</section>';

        $return .= '<!-- Dropdowns';
        $return .= '================================================== -->';
        $return .= '<section id="dropdowns">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Dropdowns <small>bootstrap-dropdown.js</small></h1>';
        $return .= '</div>';

        $return .= '<h2>Examples</h2>';
        $return .= '<p>Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.</p>';

        $return .= '<h3>Within a navbar</h3>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div id="navbar-example" class="navbar navbar-static">';
        $return .= '<div class="navbar-inner">';
        $return .= '<div class="container" style="width: auto;">';
        $return .= '<a class="brand" href="#">Project Name</a>';
        $return .= '<ul class="nav" role="navigation">';
        $return .= '<li class="dropdown">';
        $return .= '<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="';
        $return .= 'caret"></b></a>';
        $return .= '<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>';
        $return .= '<li role="presentation" class="divider"></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '<li class="dropdown">';
        $return .= '<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="';
        $return .= 'caret"></b></a>';
        $return .= '<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>';
        $return .= '<li role="presentation" class="divider"></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '</ul>';
        $return .= '<ul class="nav pull-right">';
        $return .= '<li id="fat-menu" class="dropdown">';
        $return .= '<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="';
        $return .= 'caret"></b></a>';
        $return .= '<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>';
        $return .= '<li role="presentation" class="divider"></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div> <!-- /navbar-example -->';
        $return .= '</div>';

        $return .= '<h3>Within tabs</h3>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul class="nav nav-pills">';
        $return .= '<li class="active"><a href="#">Regular link</a></li>';
        $return .= '<li class="dropdown">';
        $return .= '<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="';
        $return .= 'caret"></b></a>';
        $return .= '<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>';
        $return .= '<li role="presentation" class="divider"></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '<li class="dropdown">';
        $return .= '<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="';
        $return .= 'caret"></b></a>';
        $return .= '<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>';
        $return .= '<li role="presentation" class="divider"></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '<li class="dropdown">';
        $return .= '<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="';
        $return .= 'caret"></b></a>';
        $return .= '<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>';
        $return .= '<li role="presentation" class="divider"></li>';
        $return .= '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '</ul> <!-- /tabs -->';
        $return .= '</div>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Usage</h2>';

        $return .= '<h3>Via data attributes</h3>';
        $return .= '<p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="dropdown"&gt;'.PHP_EOL;
        $return .= '  &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Dropdown trigger&lt;/a&gt;'.PHP_EOL;
        $return .= '  &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="dropdown"&gt;'.PHP_EOL;
        $return .= '  &lt;a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="';
        $return .= '/page.html"&gt;'.PHP_EOL;
        $return .= '    Dropdown'.PHP_EOL;
        $return .= '    &lt;b class="caret"&gt;&lt;/b&gt;'.PHP_EOL;
        $return .= '  &lt;/a&gt;'.PHP_EOL;
        $return .= '  &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;'.PHP_EOL;
        $return .= '    ...'.PHP_EOL;
        $return .= '  &lt;/ul&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Via JavaScript</h3>';
        $return .= '<p>Call the dropdowns via JavaScript:</p>';
        $return .= '<pre class="prettyprint linenums">$(\'.dropdown-toggle\').dropdown()</pre>';
        $return .= '';
        $return .= '<h3>Options</h3>';
        $return .= '<p><em>None</em></p>';
        $return .= '';
        $return .= '<h3>Methods</h3>';
        $return .= '<h4>$().dropdown(\'toggle\')</h4>';
        $return .= '<p>A programmatic api for toggling menus for a given navbar or tabbed navigation.</p>';
        $return .= '</section>';

        $return .= '<!-- ScrollSpy';
        $return .= '================================================== -->';
        $return .= '<section id="scrollspy">';
        $return .= '<div class="page-header">';
        $return .= '<h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>';
        $return .= '</div>';

        $return .= '<h2>Example in navbar</h2>';
        $return .= '<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area ';
        $return .= 'below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div id="navbarExample" class="navbar navbar-static">';
        $return .= '<div class="navbar-inner">';
        $return .= '<div class="container" style="width: auto;">';
        $return .= '<a class="brand" href="#">Project Name</a>';
        $return .= '<ul class="nav">';
        $return .= '<li><a href="#fat">@fat</a></li>';
        $return .= '<li><a href="#mdo">@mdo</a></li>';
        $return .= '<li class="dropdown">';
        $return .= '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#one">one</a></li>';
        $return .= '<li><a href="#two">two</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#three">three</a></li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '</ul>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example">';
        $return .= '<h4 id="fat">@fat</h4>';
        $return .= '<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.  ';
        $return .= 'Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney\'s photo ';
        $return .= 'booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven\'t ';
        $return .= 'heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred ';
        $return .= 'irony biodiesel keffiyeh artisan ullamco consequat.</p>';
        $return .= '<h4 id="mdo">@mdo</h4>';
        $return .= '<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua ';
        $return .= 'cupidatat mcsweeney\'s vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater ';
        $return .= 'food truck, mcsweeney\'s quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic ';
        $return .= 'exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>';
        $return .= '<h4 id="one">one</h4>';
        $return .= '<p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing ';
        $return .= 'banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo ';
        $return .= 'park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim ';
        $return .= 'messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>';
        $return .= '<h4 id="two">two</h4>';
        $return .= '<p>In incididunt echo park, officia deserunt mcsweeney\'s proident master cleanse thundercats sapiente ';
        $return .= 'veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee ';
        $return .= 'wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven\'t ';
        $return .= 'heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial ';
        $return .= 'keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four ';
        $return .= 'loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>';
        $return .= '<h4 id="three">three</h4>';
        $return .= '<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out ';
        $return .= 'qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan ';
        $return .= 'mcsweeney\'s photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim ';
        $return .= 'qui you probably haven\'t heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. ';
        $return .= 'Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>';
        $return .= '<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. ';
        $return .= 'Locavore sed helvetica cliche irony, thundercats you probably haven\'t heard of them consequat hoodie ';
        $return .= 'gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident ';
        $return .= 'brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan ';
        $return .= 'readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.';
        $return .= '</p>';
        $return .= '</div>';
        $return .= '</div>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Usage</h2>';

        $return .= '<h3>Via data attributes</h3>';
        $return .= '<p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> ';
        $return .= 'to the element you want to spy on (most typically this would be the body) and <code>data-target=".navbar"';
        $return .= '</code> to select which nav to use. You\'ll want to use scrollspy with a <code>.nav</code> component.</p>';
        $return .= '<pre class="prettyprint linenums">&lt;body data-spy="scroll" data-target=".navbar"&gt;...&lt;/body&gt;</pre>';
        $return .= '';
        $return .= '<h3>Via JavaScript</h3>';
        $return .= '<p>Call the scrollspy via JavaScript:</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#navbar\').scrollspy()</pre>';

        $return .= '<div class="alert alert-info">';
        $return .= '<strong>Heads up!</strong>';
        $return .= 'Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;';
        $return .= '</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.';
        $return .= '</div>';

        $return .= '<h3>Methods</h3>';
        $return .= '<h4>.scrollspy(\'refresh\')</h4>';
        $return .= '<p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you\'ll ';
        $return .= 'need to call the refresh method like so:</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '$(\'[data-spy="scroll"]\').each(function () {'.PHP_EOL;
        $return .= '  var $spy = $(this).scrollspy(\'refresh\')'.PHP_EOL;
        $return .= '});'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Options</h3>';
        $return .= '<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option ';
        $return .= 'name to <code>data-</code>, as in <code>data-offset=""</code>.</p>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th style="width: 100px;">Name</th>';
        $return .= '<th style="width: 100px;">type</th>';
        $return .= '<th style="width: 50px;">default</th>';
        $return .= '<th>description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>offset</td>';
        $return .= '<td>number</td>';
        $return .= '<td>10</td>';
        $return .= '<td>Pixels to offset from top when calculating position of scroll.</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';

        $return .= '<h3>Events</h3>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th style="width: 150px;">Event</th>';
        $return .= '<th>Description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>activate</td>';
        $return .= '<td>This event fires whenever a new item becomes activated by the scrollspy.</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '</section>';

        $return .= '<!-- Tabs';
        $return .= '================================================== -->';
        $return .= '<section id="tabs">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Togglable tabs <small>bootstrap-tab.js</small></h1>';
        $return .= '</div>';

        $return .= '<h2>Example tabs</h2>';
        $return .= '<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown ';
        $return .= 'menus.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<ul id="myTab" class="nav nav-tabs">';
        $return .= '<li class="active"><a href="#home" data-toggle="tab">Home</a></li>';
        $return .= '<li><a href="#profile" data-toggle="tab">Profile</a></li>';
        $return .= '<li class="dropdown">';
        $return .= '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#dropdown1" data-toggle="tab">@fat</a></li>';
        $return .= '<li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '</ul>';
        $return .= '<div id="myTabContent" class="tab-content">';
        $return .= '<div class="tab-pane fade in active" id="home">';
        $return .= '<p>Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, ';
        $return .= 'retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit ';
        $return .= 'butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. ';
        $return .= 'Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate ';
        $return .= 'nisi qui.</p>';
        $return .= '</div>';
        $return .= '<div class="tab-pane fade" id="profile">';
        $return .= '<p>Food truck fixie locavore, accusamus mcsweeney\'s marfa nulla single-origin coffee squid. Exercitation ';
        $return .= '+1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft ';
        $return .= 'beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl ';
        $return .= 'cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS ';
        $return .= 'salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, ';
        $return .= 'sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester ';
        $return .= 'stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>';
        $return .= '</div>';
        $return .= '<div class="tab-pane fade" id="dropdown1">';
        $return .= '<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney\'s organic lomo retro ';
        $return .= 'fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone ';
        $return .= 'skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings ';
        $return .= 'gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel ';
        $return .= 'fixie etsy retro mlkshk vice blog. Scenester cred you probably haven\'t heard of them, vinyl craft beer ';
        $return .= 'blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>';
        $return .= '</div>';
        $return .= '<div class="tab-pane fade" id="dropdown2">';
        $return .= '<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master ';
        $return .= 'cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party ';
        $return .= 'locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before ';
        $return .= 'they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade ';
        $return .= 'thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Usage</h2>';
        $return .= '<p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '$(\'#myTab a\').click(function (e) {'.PHP_EOL;
        $return .= '  e.preventDefault();'.PHP_EOL;
        $return .= '  $(this).tab(\'show\');'.PHP_EOL;
        $return .= '})</pre>';
        $return .= '<p>You can activate individual tabs in several ways:</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '$(\'#myTab a[href="#profile"]\').tab(\'show\'); // Select tab by name'.PHP_EOL;
        $return .= '$(\'#myTab a:first\').tab(\'show\'); // Select first tab'.PHP_EOL;
        $return .= '$(\'#myTab a:last\').tab(\'show\'); // Select last tab'.PHP_EOL;
        $return .= '$(\'#myTab li:eq(2) a\').tab(\'show\'); // Select third tab (0-indexed)'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Markup</h3>';
        $return .= '<p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>';
        $return .= 'data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> ';
        $return .= 'and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap tab styling.</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="nav nav-tabs"&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#settings" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;</pre>';

        $return .= '<h3>Methods</h3>';
        $return .= '<h4>$().tab</h4>';
        $return .= '<p>';
        $return .= 'Activates a tab element and content container. Tab should have either a <code>data-target</code> or an ';
        $return .= '<code>href</code> targeting a container node in the DOM.';
        $return .= '</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;ul class="nav nav-tabs" id="myTab"&gt;'.PHP_EOL;
        $return .= '  &lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#profile"&gt;Profile&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#messages"&gt;Messages&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '  &lt;li&gt;&lt;a href="#settings"&gt;Settings&lt;/a&gt;&lt;/li&gt;'.PHP_EOL;
        $return .= '&lt;/ul&gt;'.PHP_EOL.PHP_EOL;

        $return .= '&lt;div class="tab-content"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="tab-pane active" id="home"&gt;...&lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="tab-pane" id="profile"&gt;...&lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="tab-pane" id="messages"&gt;...&lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="tab-pane" id="settings"&gt;...&lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL.PHP_EOL;

        $return .= '&lt;script&gt;'.PHP_EOL;
        $return .= '  $(function () {'.PHP_EOL;
        $return .= '    $(\'#myTab a:last\').tab(\'show\');'.PHP_EOL;
        $return .= '  })'.PHP_EOL;
        $return .= '&lt;/script&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h3>Events</h3>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th style="width: 150px;">Event</th>';
        $return .= '<th>Description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>show</td>';
        $return .= '<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> ';
        $return .= 'and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) ';
        $return .= 'respectively.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>shown</td>';
        $return .= '<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>';
        $return .= 'event.relatedTarget</code> to target the active tab and the previous active tab (if available) ';
        $return .= 'respectively.</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '$(\'a[data-toggle="tab"]\').on(\'shown\', function (e) {'.PHP_EOL;
        $return .= '  e.target // activated tab'.PHP_EOL;
        $return .= '  e.relatedTarget // previous tab'.PHP_EOL;
        $return .= '})'.PHP_EOL;
        $return .= '</pre>';
        $return .= '</section>';

        $return .= '<!-- Tooltips';
        $return .= '================================================== -->';
        $return .= '<section id="tooltips">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Tooltips <small>bootstrap-tooltip.js</small></h1>';
        $return .= '</div>';

        $return .= '<h2>Examples</h2>';
        $return .= '<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, ';
        $return .= 'which don\'t rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>';
        $return .= '<p>For performance reasons, the tooltip and popover data-apis are opt in, meaning <strong>you must ';
        $return .= 'initialize them yourself</strong>.</p>';
        $return .= '<p>Hover over the links below to see tooltips:</p>';
        $return .= '<div class="bs-docs-example tooltip-demo">';
        $return .= '<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle=';
        $return .= '"tooltip" title="Default tooltip">you probably</a> haven\'t heard of them. Photo booth beard raw denim ';
        $return .= 'letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney\'s fixie sustainable quinoa ';
        $return .= '8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry ';
        $return .= 'richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel ';
        $return .= 'williamsburg marfa, four loko mcsweeney\'s cleanse vegan chambray. A really ironic artisan <a href="#" ';
        $return .= 'data-toggle="tooltip" title="A much longer tooltip belongs right here to demonstrate the max-width we apply.';
        $return .= '">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The ';
        $return .= 'last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.';
        $return .= '</p>';
        $return .= '</div>';

        $return .= '<h3>Four directions</h3>';
        $return .= '<div class="bs-docs-example tooltip-demo">';
        $return .= '<ul class="bs-docs-tooltip-examples">';
        $return .= '<li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>';
        $return .= '<li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a>';
        $return .= '</li>';
        $return .= '<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom';
        $return .= '</a></li>';
        $return .= '<li><a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>';
        $return .= '</ul>';
        $return .= '</div>';

        $return .= '<h3>Tooltips in input groups</h3>';
        $return .= '<p>When using tooltips and popovers with the Bootstrap input groups, you\'ll have to set the <code>container';
        $return .= '</code> (documented below) option to avoid unwanted side effects.</p>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Usage</h2>';
        $return .= '<p>Trigger the tooltip via JavaScript:</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#example\').tooltip(options)</pre>';

        $return .= $this->options();
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>placement</td>';
        $return .= '<td>string | function</td>';
        $return .= '<td>\'top\'</td>';
        $return .= '<td>how to position the tooltip - top | bottom | left | right</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>selector</td>';
        $return .= '<td>string</td>';
        $return .= '<td>false</td>';
        $return .= '<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>title</td>';
        $return .= '<td>string | function</td>';
        $return .= '<td>\'\'</td>';
        $return .= '<td>default title value if \'title\' tag isn\'t present</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>trigger</td>';
        $return .= '<td>string</td>';
        $return .= '<td>\'hover focus\'</td>';
        $return .= '<td>how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger mutliple, ';
        $return .= 'space seperated, trigger types.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>delay</td>';
        $return .= '<td>number | object</td>';
        $return .= '<td>0</td>';
        $return .= '<td>';
        $return .= '<p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>';
        $return .= '<p>If a number is supplied, delay is applied to both hide/show</p>';
        $return .= '<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>container</td>';
        $return .= '<td>string | false</td>';
        $return .= '<td>false</td>';
        $return .= '<td>';
        $return .= '<p>Appends the tooltip to a specific element <code>container: \'body\'</code></p>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '<div class="alert alert-info">';
        $return .= '<strong>Heads up!</strong>';
        $return .= 'Options for individual tooltips can alternatively be specified through the use of data attributes.';
        $return .= '</div>';

        $return .= '<h3>Markup</h3>';
        $return .= '<pre class="prettyprint linenums">&lt;a href="#" data-toggle="tooltip" title="first tooltip"&gt;hover ';
        $return .= 'over me&lt;/a&gt;</pre>';

        $return .= '<h3>Methods</h3>';
        $return .= '<h4>$().tooltip(options)</h4>';
        $return .= '<p>Attaches a tooltip handler to an element collection.</p>';
        $return .= '<h4>.tooltip(\'show\')</h4>';
        $return .= '<p>Reveals an element\'s tooltip.</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#element\').tooltip(\'show\')</pre>';
        $return .= '<h4>.tooltip(\'hide\')</h4>';
        $return .= '<p>Hides an element\'s tooltip.</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#element\').tooltip(\'hide\')</pre>';
        $return .= '<h4>.tooltip(\'toggle\')</h4>';
        $return .= '<p>Toggles an element\'s tooltip.</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#element\').tooltip(\'toggle\')</pre>';
        $return .= '<h4>.tooltip(\'destroy\')</h4>';
        $return .= '<p>Hides and destroys an element\'s tooltip.</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#element\').tooltip(\'destroy\')</pre>';
        $return .= '</section>';

        $return .= '<!-- Popovers';
        $return .= '================================================== -->';
        $return .= '<section id="popovers">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Popovers <small>bootstrap-popover.js</small></h1>';
        $return .= '</div>';

        $return .= '<h2>Examples</h2>';
        $return .= '<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. ';
        $return .= 'Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be ';
        $return .= 'included.</strong></p>';

        $return .= '<h3>Static popover</h3>';
        $return .= '<p>Four options are available: top, right, bottom, and left aligned.</p>';
        $return .= '<div class="bs-docs-example bs-docs-example-popover">';
        $return .= '<div class="popover top">';
        $return .= '<div class="arrow"></div>';
        $return .= '<h3 class="popover-title">Popover top</h3>';
        $return .= '<div class="popover-content">';
        $return .= '<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam ';
        $return .= 'venenatis vestibulum.</p>';
        $return .= '</div>';
        $return .= '</div>';

        $return .= '<div class="popover right">';
        $return .= '<div class="arrow"></div>';
        $return .= '<h3 class="popover-title">Popover right</h3>';
        $return .= '<div class="popover-content">';
        $return .= '<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam ';
        $return .= 'venenatis vestibulum.</p>';
        $return .= '</div>';
        $return .= '</div>';

        $return .= '<div class="popover bottom">';
        $return .= '<div class="arrow"></div>';
        $return .= '<h3 class="popover-title">Popover bottom</h3>';
        $return .= '<div class="popover-content">';
        $return .= '<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam ';
        $return .= 'venenatis vestibulum.</p>';
        $return .= '</div>';
        $return .= '</div>';

        $return .= '<div class="popover left">';
        $return .= '<div class="arrow"></div>';
        $return .= '<h3 class="popover-title">Popover left</h3>';
        $return .= '<div class="popover-content">';
        $return .= '<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam ';
        $return .= 'venenatis vestibulum.</p>';
        $return .= '</div>';
        $return .= '</div>';

        $return .= '<div class="clearfix"></div>';
        $return .= '</div>';
        $return .= '<p>No markup shown as popovers are generated from JavaScript and content within a <code>data</code> ';
        $return .= 'attribute.</p>';

        $return .= '<h3>Live demo</h3>';
        $return .= '<div class="bs-docs-example" style="padding-bottom: 24px;">';
        $return .= '<a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And ';
        $return .= 'here\'s some amazing content. It\'s very engaging. right?">Click to toggle popover</a>';
        $return .= '</div>';

        $return .= '<h4>Four directions</h4>';
        $return .= '<div class="bs-docs-example tooltip-demo">';
        $return .= '<ul class="bs-docs-tooltip-examples">';
        $return .= '<li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis ';
        $return .= 'lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>';
        $return .= '<li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis ';
        $return .= 'lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>';
        $return .= '<li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis ';
        $return .= 'lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>';
        $return .= '<li><a href="#" class="btn" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis ';
        $return .= 'lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>';
        $return .= '</ul>';
        $return .= '</div>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Usage</h2>';
        $return .= '<p>Enable popovers via JavaScript:</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#example\').popover(options)</pre>';

        $return .= $this->options();
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>placement</td>';
        $return .= '<td>string | function</td>';
        $return .= '<td>\'right\'</td>';
        $return .= '<td>how to position the popover - top | bottom | left | right</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>selector</td>';
        $return .= '<td>string</td>';
        $return .= '<td>false</td>';
        $return .= '<td>if a selector is provided, tooltip objects will be delegated to the specified targets</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>trigger</td>';
        $return .= '<td>string</td>';
        $return .= '<td>\'click\'</td>';
        $return .= '<td>how popover is triggered - click | hover | focus | manual</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>title</td>';
        $return .= '<td>string | function</td>';
        $return .= '<td>\'\'</td>';
        $return .= '<td>default title value if \'title\' attribute isn\'t present</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>content</td>';
        $return .= '<td>string | function</td>';
        $return .= '<td>\'\'</td>';
        $return .= '<td>default content value if \'data-content\' attribute isn\'t present</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>delay</td>';
        $return .= '<td>number | object</td>';
        $return .= '<td>0</td>';
        $return .= '<td>';
        $return .= '<p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>';
        $return .= '<p>If a number is supplied, delay is applied to both hide/show</p>';
        $return .= '<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>container</td>';
        $return .= '<td>string | false</td>';
        $return .= '<td>false</td>';
        $return .= '<td>';
        $return .= '<p>Appends the popover to a specific element <code>container: \'body\'</code></p>';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '<div class="alert alert-info">';
        $return .= '<strong>Heads up!</strong>';
        $return .= 'Options for individual popovers can alternatively be specified through the use of data attributes.';
        $return .= '</div>';

        $return .= '<h3>Markup</h3>';
        $return .= '<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use ';
        $return .= 'them just specify a selector option.</p>';

        $return .= '<h3>Methods</h3>';
        $return .= '<h4>$().popover(options)</h4>';
        $return .= '<p>Initializes popovers for an element collection.</p>';
        $return .= '<h4>.popover(\'show\')</h4>';
        $return .= '<p>Reveals an elements popover.</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#element\').popover(\'show\')</pre>';
        $return .= '<h4>.popover(\'hide\')</h4>';
        $return .= '<p>Hides an elements popover.</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#element\').popover(\'hide\')</pre>';
        $return .= '<h4>.popover(\'toggle\')</h4>';
        $return .= '<p>Toggles an elements popover.</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#element\').popover(\'toggle\')</pre>';
        $return .= '<h4>.popover(\'destroy\')</h4>';
        $return .= '<p>Hides and destroys an element\'s popover.</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#element\').popover(\'destroy\')</pre>';
        $return .= '</section>';

        $return .= '<!-- Alert';
        $return .= '================================================== -->';
        $return .= '<section id="alerts">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Alert messages <small>bootstrap-alert.js</small></h1>';
        $return .= '</div>';

        $return .= '<h2>Example alerts</h2>';
        $return .= '<p>Add dismiss functionality to all alert messages with this plugin.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="alert fade in">';
        $return .= '<button type="button" class="close" data-dismiss="alert">&times;</button>';
        $return .= '<strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.';
        $return .= '</div>';
        $return .= '</div>';

        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="alert alert-block alert-error fade in">';
        $return .= '<button type="button" class="close" data-dismiss="alert">&times;</button>';
        $return .= '<h4 class="alert-heading">Oh snap! You got an error!</h4>';
        $return .= '<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat ';
        $return .= 'porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>';
        $return .= '<p>';
        $return .= '<a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>';
        $return .= '</p>';
        $return .= '</div>';
        $return .= '</div>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Usage</h2>';
        $return .= '<p>Enable dismissal of an alert via JavaScript:</p>';
        $return .= '<pre class="prettyprint linenums">$(".alert").alert()</pre>';

        $return .= '<h3>Markup</h3>';
        $return .= '<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert ';
        $return .= 'close functionality.</p>';
        $return .= '<pre class="prettyprint linenums">&lt;a class="close" data-dismiss="alert" href="#"&gt;&amp;times;';
        $return .= '&lt;/a&gt;</pre>';

        $return .= '<h3>Methods</h3>';
        $return .= '<h4>$().alert()</h4>';
        $return .= '<p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure ';
        $return .= 'they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>';
        $return .= '<h4>.alert(\'close\')</h4>';
        $return .= '<p>Closes an alert.</p>';
        $return .= '<pre class="prettyprint linenums">$(".alert").alert(\'close\')</pre>';

        $return .= '<h3>Events</h3>';
        $return .= '<p>Bootstrap\'s alert class exposes a few events for hooking into alert functionality.</p>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th style="width: 150px;">Event</th>';
        $return .= '<th>Description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>close</td>';
        $return .= '<td>This event fires immediately when the <code>close</code> instance method is called.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>closed</td>';
        $return .= '<td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '$(\'#my-alert\').bind(\'closed\', function () {'.PHP_EOL;
        $return .= '  // do something…'.PHP_EOL;
        $return .= '})'.PHP_EOL;
        $return .= '</pre>';
        $return .= '</section>';

        $return .= '<!-- Buttons';
        $return .= '================================================== -->';
        $return .= '<section id="buttons">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Buttons <small>bootstrap-button.js</small></h1>';
        $return .= '</div>';
        $return .= '';
        $return .= '<h2>Example uses</h2>';
        $return .= '<p>Do more with buttons. Control button states or create groups of buttons for more components like ';
        $return .= 'toolbars.</p>';
        $return .= '';
        $return .= '<h4>Stateful</h4>';
        $return .= '<p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>';
        $return .= '<div class="bs-docs-example" style="padding-bottom: 24px;">';
        $return .= '<button type="button" id="fat-btn" data-loading-text="loading..." class="btn btn-primary">';
        $return .= 'Loading state';
        $return .= '</button>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">&lt;button type="button" class="btn btn-primary" ';
        $return .= 'data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;</pre>';
        $return .= '';
        $return .= '<h4>Single toggle</h4>';
        $return .= '<p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>';
        $return .= '<div class="bs-docs-example" style="padding-bottom: 24px;">';
        $return .= '<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">&lt;button type="button" class="btn btn-primary" ';
        $return .= 'data-toggle="button"&gt;Single Toggle&lt;/button&gt;</pre>';
        $return .= '';
        $return .= '<h4>Checkbox</h4>';
        $return .= '<p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p>';
        $return .= '<div class="bs-docs-example" style="padding-bottom: 24px;">';
        $return .= '<div class="btn-group" data-toggle="buttons-checkbox">';
        $return .= '<button type="button" class="btn btn-primary">Left</button>';
        $return .= '<button type="button" class="btn btn-primary">Middle</button>';
        $return .= '<button type="button" class="btn btn-primary">Right</button>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="btn-group" data-toggle="buttons-checkbox"&gt;'.PHP_EOL;
        $return .= '  &lt;button type="button" class="btn btn-primary"&gt;Left&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;button type="button" class="btn btn-primary"&gt;Middle&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;button type="button" class="btn btn-primary"&gt;Right&lt;/button&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<h4>Radio</h4>';
        $return .= '<p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p>';
        $return .= '<div class="bs-docs-example" style="padding-bottom: 24px;">';
        $return .= '<div class="btn-group" data-toggle="buttons-radio">';
        $return .= '<button type="button" class="btn btn-primary">Left</button>';
        $return .= '<button type="button" class="btn btn-primary">Middle</button>';
        $return .= '<button type="button" class="btn btn-primary">Right</button>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="btn-group" data-toggle="buttons-radio"&gt;'.PHP_EOL;
        $return .= '  &lt;button type="button" class="btn btn-primary"&gt;Left&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;button type="button" class="btn btn-primary"&gt;Middle&lt;/button&gt;'.PHP_EOL;
        $return .= '  &lt;button type="button" class="btn btn-primary"&gt;Right&lt;/button&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Usage</h2>';
        $return .= '<p>Enable buttons via JavaScript:</p>';
        $return .= '<pre class="prettyprint linenums">$(\'.nav-tabs\').button()</pre>';

        $return .= '<h3>Markup</h3>';
        $return .= '<p>Data attributes are integral to the button plugin. Check out the example code below for the ';
        $return .= 'various markup types.</p>';

        $return .= '<h3>Options</h3>';
        $return .= '<p><em>None</em></p>';

        $return .= '<h3>Methods</h3>';
        $return .= '<h4>$().button(\'toggle\')</h4>';
        $return .= '<p>Toggles push state. Gives the button the appearance that it has been activated.</p>';
        $return .= '<div class="alert alert-info">';
        $return .= '<strong>Heads up!</strong>';
        $return .= 'You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">&lt;button type="button" class="btn" data-toggle="button" ';
        $return .= '&gt;…&lt;/button&gt;</pre>';
        $return .= '<h4>$().button(\'loading\')</h4>';
        $return .= '<p>Sets button state to loading - disables button and swaps text to loading text. Loading text ';
        $return .= 'should be defined on the button element using the data attribute <code>data-loading-text</code>.';
        $return .= '</p>';
        $return .= '<pre class="prettyprint linenums">&lt;button type="button" class="btn" data-loading-text="loading stuff..." ';
        $return .= '&gt;...&lt;/button&gt;</pre>';
        $return .= '<div class="alert alert-info">';
        $return .= '<strong>Heads up!</strong>';
        $return .= '<a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists the disabled state across page loads';
        $return .= '</a>. A workaround for this is to use <code>autocomplete="off"</code>.';
        $return .= '</div>';
        $return .= '<h4>$().button(\'reset\')</h4>';
        $return .= '<p>Resets button state - swaps text to original text.</p>';
        $return .= '<h4>$().button(string)</h4>';
        $return .= '<p>Resets button state - swaps text to any data defined text state.</p>';
        $return .= '<pre class="prettyprint linenums">&lt;button type="button" class="btn" data-complete-text="finished!" ';
        $return .= '&gt;...&lt;/button&gt;';
        $return .= '&lt;script&gt;'.PHP_EOL;
        $return .= '  $(\'.btn\').button(\'complete\')'.PHP_EOL;
        $return .= '&lt;/script&gt;'.PHP_EOL;
        $return .= '</pre>';
        $return .= '</section>';

        $return .= '<!-- Collapse';
        $return .= '================================================== -->';
        $return .= '<section id="collapse">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Collapse <small>bootstrap-collapse.js</small></h1>';
        $return .= '</div>';

        $return .= '<h3>About</h3>';
        $return .= '<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>';
        $return .= '<p class="muted"><strong>*</strong> Requires the Transitions plugin to be included.</p>';

        $return .= '<h2>Example accordion</h2>';
        $return .= '<p>Using the collapse plugin, we built a simple accordion style widget:</p>';

        $return .= '<div class="bs-docs-example">';
        $return .= '<div class="accordion" id="accordion2">';
        $return .= '<div class="accordion-group">';
        $return .= '<div class="accordion-heading">';
        $return .= '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">';
        $return .= 'Collapsible Group Item #1';
        $return .= '</a>';
        $return .= '</div>';
        $return .= '<div id="collapseOne" class="accordion-body collapse in">';
        $return .= '<div class="accordion-inner">';
        $return .= 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon ';
        $return .= 'officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 ';
        $return .= 'wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. ';
        $return .= 'Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan ';
        $return .= 'excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt ';
        $return .= 'you probably haven\'t heard of them accusamus labore sustainable VHS.';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<div class="accordion-group">';
        $return .= '<div class="accordion-heading">';
        $return .= '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">';
        $return .= 'Collapsible Group Item #2';
        $return .= '</a>';
        $return .= '</div>';
        $return .= '<div id="collapseTwo" class="accordion-body collapse">';
        $return .= '<div class="accordion-inner">';
        $return .= 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon ';
        $return .= 'officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 ';
        $return .= 'wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. ';
        $return .= 'Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan ';
        $return .= 'excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt ';
        $return .= 'you probably haven\'t heard of them accusamus labore sustainable VHS.';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<div class="accordion-group">';
        $return .= '<div class="accordion-heading">';
        $return .= '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">';
        $return .= 'Collapsible Group Item #3';
        $return .= '</a>';
        $return .= '</div>';
        $return .= '<div id="collapseThree" class="accordion-body collapse">';
        $return .= '<div class="accordion-inner">';
        $return .= 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon ';
        $return .= 'officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 ';
        $return .= 'wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. ';
        $return .= 'Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan ';
        $return .= 'excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt ';
        $return .= 'you probably haven\'t heard of them accusamus labore sustainable VHS.';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div class="accordion" id="accordion2"&gt;'.PHP_EOL;
        $return .= '  &lt;div class="accordion-group"&gt;'.PHP_EOL;
        $return .= '    &lt;div class="accordion-heading"&gt;'.PHP_EOL;
        $return .= '      &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"';
        $return .= '&gt;'.PHP_EOL;
        $return .= '        Collapsible Group Item #1'.PHP_EOL;
        $return .= '      &lt;/a&gt;'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '    &lt;div id="collapseOne" class="accordion-body collapse in"&gt;'.PHP_EOL;
        $return .= '      &lt;div class="accordion-inner"&gt;'.PHP_EOL;
        $return .= '        Anim pariatur cliche...'.PHP_EOL;
        $return .= '      &lt;/div&gt;'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;div class="accordion-group"&gt;'.PHP_EOL;
        $return .= '    &lt;div class="accordion-heading"&gt;'.PHP_EOL;
        $return .= '      &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"';
        $return .= '&gt;'.PHP_EOL;
        $return .= '        Collapsible Group Item #2'.PHP_EOL;
        $return .= '      &lt;/a&gt;'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '    &lt;div id="collapseTwo" class="accordion-body collapse"&gt;'.PHP_EOL;
        $return .= '      &lt;div class="accordion-inner"&gt;'.PHP_EOL;
        $return .= '        Anim pariatur cliche...'.PHP_EOL;
        $return .= '      &lt;/div&gt;'.PHP_EOL;
        $return .= '    &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '...'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<p>You can also use the plugin without the accordion markup. Make a button toggle the expanding and ';
        $return .= 'collapsing of another element.</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"&gt;'.PHP_EOL;
        $return .= '  simple collapsible'.PHP_EOL;
        $return .= '&lt;/button&gt;'.PHP_EOL.PHP_EOL;

        $return .= '&lt;div id="demo" class="collapse in"&gt; … &lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Usage</h2>';

        $return .= '<h3>Via data attributes</h3>';
        $return .= '<p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically ';
        $return .= 'assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to ';
        $return .= 'apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If ';
        $return .= 'you\'d like it to default open, add the additional class <code>in</code>.</p>';
        $return .= '<p>To add accordion-like group management to a collapsible control, add the data attribute <code>';
        $return .= 'data-parent="#selector"</code>. Refer to the demo to see this in action.</p>';

        $return .= '<h3>Via JavaScript</h3>';
        $return .= '<p>Enable manually with:</p>';
        $return .= '<pre class="prettyprint linenums">$(".collapse").collapse()</pre>';

        $return .= '<h3>Options</h3>';
        $return .= '<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option ';
        $return .= 'name to <code>data-</code>, as in <code>data-parent=""</code>.</p>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th style="width: 100px;">Name</th>';
        $return .= '<th style="width: 50px;">type</th>';
        $return .= '<th style="width: 50px;">default</th>';
        $return .= '<th>description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>parent</td>';
        $return .= '<td>selector</td>';
        $return .= '<td>false</td>';
        $return .= '<td>If selector then all collapsible elements under the specified parent will be closed when this ';
        $return .= 'collapsible item is shown. (similar to traditional accordion behavior)</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>toggle</td>';
        $return .= '<td>boolean</td>';
        $return .= '<td>true</td>';
        $return .= '<td>Toggles the collapsible element on invocation</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';

        $return .= '<h3>Methods</h3>';
        $return .= '<h4>.collapse(options)</h4>';
        $return .= '<p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '$(\'#myCollapsible\').collapse({'.PHP_EOL;
        $return .= '  toggle: false'.PHP_EOL;
        $return .= '})'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<h4>.collapse(\'toggle\')</h4>';
        $return .= '<p>Toggles a collapsible element to shown or hidden.</p>';
        $return .= '<h4>.collapse(\'show\')</h4>';
        $return .= '<p>Shows a collapsible element.</p>';
        $return .= '<h4>.collapse(\'hide\')</h4>';
        $return .= '<p>Hides a collapsible element.</p>';

        $return .= '<h3>Events</h3>';
        $return .= '<p>Bootstrap\'s collapse class exposes a few events for hooking into collapse functionality.</p>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th style="width: 150px;">Event</th>';
        $return .= '<th>Description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>show</td>';
        $return .= '<td>This event fires immediately when the <code>show</code> instance method is called.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>shown</td>';
        $return .= '<td>This event is fired when a collapse element has been made visible to the user (will wait for css ';
        $return .= 'transitions to complete).</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>hide</td>';
        $return .= '<td>';
        $return .= 'This event is fired immediately when the <code>hide</code> method has been called.';
        $return .= '</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>hidden</td>';
        $return .= '<td>This event is fired when a collapse element has been hidden from the user (will wait for css ';
        $return .= 'transitions to complete).</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '$(\'#myCollapsible\').on(\'hidden\', function () {'.PHP_EOL;
        $return .= '  // do something…'.PHP_EOL;
        $return .= '})</pre>';
        $return .= '</section>';

        $return .= '<!-- Carousel';
        $return .= '================================================== -->';
        $return .= '<section id="carousel">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Carousel <small>bootstrap-carousel.js</small></h1>';
        $return .= '</div>';

        $return .= '<h2>Example carousel</h2>';
        $return .= '<p>The slideshow below shows a generic plugin and component for cycling through elements like ';
        $return .= 'a carousel.</p>';
        $return .= '<div class="bs-docs-example">';
        $return .= '<div id="myCarousel" class="carousel slide">';
        $return .= '<ol class="carousel-indicators">';
        $return .= '<li data-target="#myCarousel" data-slide-to="0" class="active"></li>';
        $return .= '<li data-target="#myCarousel" data-slide-to="1"></li>';
        $return .= '<li data-target="#myCarousel" data-slide-to="2"></li>';
        $return .= '</ol>';
        $return .= '<div class="carousel-inner">';
        $return .= '<div class="item active">';
        $return .= '<img src="'.$OUTPUT->pix_url('screenshot', 'theme').'" alt="">';
        $return .= '<div class="carousel-caption">';
        $return .= '<h4>First Thumbnail label</h4>';
        $return .= '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida ';
        $return .= 'at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<div class="item">';
        $return .= '<img src="'.$OUTPUT->pix_url('screenshot', 'theme').'" alt="">';
        $return .= '<div class="carousel-caption">';
        $return .= '<h4>Second Thumbnail label</h4>';
        $return .= '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida ';
        $return .= 'at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<div class="item">';
        $return .= '<img src="'.$OUTPUT->pix_url('screenshot', 'theme').'" alt="">';
        $return .= '<div class="carousel-caption">';
        $return .= '<h4>Third Thumbnail label</h4>';
        $return .= '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida ';
        $return .= 'at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '</div>';
        $left = true;
        if (right_to_left()) {
            $left = false;
        }
        $faleft = 'left';
        $faright = 'right';
        if (!$left) {
            $temp = $faleft;
            $faleft = $faright;
            $faright = $temp;
        }
        $return .= '<a class="left carousel-control" href="#myCarousel" data-slide="prev">';
        $return .= '<i class="fa fa-chevron-circle-'.$faleft.'"></i></a>';
        $return .= '<a class="right carousel-control" href="#myCarousel" data-slide="next">';
        $return .= '<i class="fa fa-chevron-circle-'.$faright.'"></i></a>';
        $return .= '</div>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '&lt;div id="myCarousel" class="carousel slide"&gt;'.PHP_EOL;
        $return .= '  &lt;ol class="carousel-indicators"&gt'.PHP_EOL;
        $return .= '    &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt&lt;/li&gt'.PHP_EOL;
        $return .= '    &lt;li data-target="#myCarousel" data-slide-to="1"&gt&lt;/li&gt'.PHP_EOL;
        $return .= '    &lt;li data-target="#myCarousel" data-slide-to="2"&gt&lt;/li&gt'.PHP_EOL;
        $return .= '  &lt;/ol&gt'.PHP_EOL;
        $return .= '  &lt;!-- Carousel items --&gt;'.PHP_EOL;
        $return .= '  &lt;div class="carousel-inner"&gt;'.PHP_EOL;
        $return .= '    &lt;div class="active item"&gt;…&lt;/div&gt;'.PHP_EOL;
        $return .= '    &lt;div class="item"&gt;…&lt;/div&gt;'.PHP_EOL;
        $return .= '    &lt;div class="item"&gt;…&lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;/div&gt;'.PHP_EOL;
        $return .= '  &lt;!-- Carousel nav --&gt;'.PHP_EOL;
        $return .= '  &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;'.PHP_EOL;
        $return .= '  &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;'.PHP_EOL;
        $return .= '&lt;/div&gt;'.PHP_EOL;
        $return .= '</pre>';

        $return .= '<div class="alert alert-warning">';
        $return .= '<strong>Heads up!</strong>';
        $return .= 'When implementing this carousel, remove the images we have provided and replace them with your own.';
        $return .= '</div>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Usage</h2>';

        $return .= '<h3>Via data attributes</h3>';
        $return .= '<p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the ';
        $return .= 'keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to it\'s current ';
        $return .= 'position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>';
        $return .= 'data-slide-to="2"</code>, which jump\'s the slide position to a particular index beginning with <code>0';
        $return .= '</code>.</p>';

        $return .= '<h3>Via JavaScript</h3>';
        $return .= '<p>Call carousel manually with:</p>';
        $return .= '<pre class="prettyprint linenums">$(\'.carousel\').carousel()</pre>';

        $return .= '<h3>Options</h3>';
        $return .= '<p>Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to ';
        $return .= '<code>data-</code>, as in <code>data-interval=""</code>.</p>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th style="width: 100px;">Name</th>';
        $return .= '<th style="width: 50px;">type</th>';
        $return .= '<th style="width: 50px;">default</th>';
        $return .= '<th>description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>interval</td>';
        $return .= '<td>number</td>';
        $return .= '<td>5000</td>';
        $return .= '<td>The amount of time to delay between automatically cycling an item. If false, carousel will not ';
        $return .= 'automatically cycle.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>pause</td>';
        $return .= '<td>string</td>';
        $return .= '<td>"hover"</td>';
        $return .= '<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel ';
        $return .= 'on mouseleave.</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';

        $return .= '<h3>Methods</h3>';
        $return .= '<h4>.carousel(options)</h4>';
        $return .= '<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through ';
        $return .= 'items.</p>';
        $return .= '<pre class="prettyprint linenums">';
        $return .= '$(\'.carousel\').carousel({'.PHP_EOL;
        $return .= '  interval: 2000'.PHP_EOL;
        $return .= '})'.PHP_EOL;
        $return .= '</pre>';
        $return .= '<h4>.carousel(\'cycle\')</h4>';
        $return .= '<p>Cycles through the carousel items from left to right.</p>';
        $return .= '<h4>.carousel(\'pause\')</h4>';
        $return .= '<p>Stops the carousel from cycling through items.</p>';
        $return .= '<h4>.carousel(number)</h4>';
        $return .= '<p>Cycles the carousel to a particular frame (0 based, similar to an array).</p>';
        $return .= '<h4>.carousel(\'prev\')</h4>';
        $return .= '<p>Cycles to the previous item.</p>';
        $return .= '<h4>.carousel(\'next\')</h4>';
        $return .= '<p>Cycles to the next item.</p>';

        $return .= '<h3>Events</h3>';
        $return .= '<p>Bootstrap\'s carousel class exposes two events for hooking into carousel functionality.</p>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th style="width: 150px;">Event</th>';
        $return .= '<th>Description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>slide</td>';
        $return .= '<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>slid</td>';
        $return .= '<td>This event is fired when the carousel has completed its slide transition.</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '</section>';

        $return .= '<!-- Typeahead';
        $return .= '================================================== -->';
        $return .= '<section id="typeahead">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Typeahead <small>bootstrap-typeahead.js</small></h1>';
        $return .= '</div>';

        $return .= '<h2>Example</h2>';
        $return .= '<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>';
        $return .= '<div class="bs-docs-example" style="background-color: #f5f5f5;">';
        $return .= '<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" ';
        $return .= 'data-source=\'["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware",';
        $return .= '"Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine",';
        $return .= '"Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada",';
        $return .= '"New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma",';
        $return .= '"Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah",';
        $return .= '"Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]\'>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">&lt;input type="text" data-provide="typeahead"&gt;</pre>';
        $return .= '<p>You\'ll want to set <code>autocomplete="off"</code> to prevent default browser menus from appearing ';
        $return .= 'over the Bootstrap typeahead dropdown.</p>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Usage</h2>';

        $return .= '<h3>Via data attributes</h3>';
        $return .= '<p>Add data attributes to register an element with typeahead functionality as shown in the example above.</p>';

        $return .= '<h3>Via JavaScript</h3>';
        $return .= '<p>Call the typeahead manually with:</p>';
        $return .= '<pre class="prettyprint linenums">$(\'.typeahead\').typeahead()</pre>';

        $return .= '<h3>Options</h3>';
        $return .= '<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to ';
        $return .= '<code>data-</code>, as in <code>data-source=""</code>.</p>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th style="width: 100px;">Name</th>';
        $return .= '<th style="width: 50px;">type</th>';
        $return .= '<th style="width: 100px;">default</th>';
        $return .= '<th>description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>source</td>';
        $return .= '<td>array, function</td>';
        $return .= '<td>[ ]</td>';
        $return .= '<td>The data source to query against. May be an array of strings or a function. The function is passed two ';
        $return .= 'arguments, the <code>query</code> value in the input field and the <code>process</code> callback. The ';
        $return .= 'function may be used synchronously by returning the data source directly or asynchronously via the ';
        $return .= '<code>process</code> callback\'s single argument.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>items</td>';
        $return .= '<td>number</td>';
        $return .= '<td>8</td>';
        $return .= '<td>The max number of items to display in the dropdown.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>minLength</td>';
        $return .= '<td>number</td>';
        $return .= '<td>1</td>';
        $return .= '<td>The minimum character length needed before triggering autocomplete suggestions</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>matcher</td>';
        $return .= '<td>function</td>';
        $return .= '<td>case insensitive</td>';
        $return .= '<td>The method used to determine if a query matches an item. Accepts a single argument, the <code>item';
        $return .= '</code> against which to test the query. Access the current query with <code>this.query</code>. Return ';
        $return .= 'a boolean <code>true</code> if query is a match.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>sorter</td>';
        $return .= '<td>function</td>';
        $return .= '<td>exact match,<br> case sensitive,<br> case insensitive</td>';
        $return .= '<td>Method used to sort autocomplete results. Accepts a single argument <code>items</code> and has the ';
        $return .= 'scope of the typeahead instance. Reference the current query with <code>this.query</code>.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>updater</td>';
        $return .= '<td>function</td>';
        $return .= '<td>returns selected item</td>';
        $return .= '<td>The method used to return selected item. Accepts a single argument, the <code>item</code> and has ';
        $return .= 'the scope of the typeahead instance.</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>highlighter</td>';
        $return .= '<td>function</td>';
        $return .= '<td>highlights all default matches</td>';
        $return .= '<td>Method used to highlight autocomplete results. Accepts a single argument <code>item</code> and has ';
        $return .= 'the scope of the typeahead instance. Should return html.</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '';
        $return .= '<h3>Methods</h3>';
        $return .= '<h4>.typeahead(options)</h4>';
        $return .= '<p>Initializes an input with a typeahead.</p>';
        $return .= '</section>';

        $return .= '<!-- Affix';
        $return .= '================================================== -->';
        $return .= '<section id="affix">';
        $return .= '<div class="page-header">';
        $return .= '<h1>Affix <small>bootstrap-affix.js</small></h1>';
        $return .= '</div>';

        $return .= '<h2>Example</h2>';
        $return .= '<p>The subnavigation on the left is a live demo of the affix plugin.</p>';

        $return .= '<hr class="bs-docs-separator">';

        $return .= '<h2>Usage</h2>';

        $return .= '<h3>Via data attributes</h3>';
        $return .= '<p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element ';
        $return .= 'you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.</p>';

        $return .= '<pre class="prettyprint linenums">&lt;div data-spy="affix" data-offset-top="200"&gt;...&lt;/div&gt;</pre>';

        $return .= '<div class="alert alert-info">';
        $return .= '<strong>Heads up!</strong>';
        $return .= 'You must manage the position of a pinned element and the behavior of its immediate parent. Position is ';
        $return .= 'controlled by <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. Remember to check ';
        $return .= 'for a potentially collapsed parent when the affix kicks in as it\'s removing content from the normal flow ';
        $return .= 'of the page.';
        $return .= '</div>';

        $return .= '<h3>Via JavaScript</h3>';
        $return .= '<p>Call the affix plugin via JavaScript:</p>';
        $return .= '<pre class="prettyprint linenums">$(\'#navbar\').affix()</pre>';

        $return .= '<h3>Options</h3>';
        $return .= '<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to ';
        $return .= '<code>data-</code>, as in <code>data-offset-top="200"</code>.</p>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th style="width: 100px;">Name</th>';
        $return .= '<th style="width: 100px;">type</th>';
        $return .= '<th style="width: 50px;">default</th>';
        $return .= '<th>description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>offset</td>';
        $return .= '<td>number | function | object</td>';
        $return .= '<td>10</td>';
        $return .= '<td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the ';
        $return .= 'offset will be applied in both top and left directions. To listen for a single direction, or multiple ';
        $return .= 'unique offsets, just provide an object <code>offset: { x: 10 }</code>. Use a function when you need to ';
        $return .= 'dynamically provide an offset (useful for some responsive designs).</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '</section>';

        $return .= '</div>';

        return $return;
    }

    private function tableone() {
        $return = '<thead>';
        $return .= '<tr>';
        $return .= '<th>#</th>';
        $return .= '<th>First Name</th>';
        $return .= '<th>Last Name</th>';
        $return .= '<th>Username</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>1</td>';
        $return .= '<td>Mark</td>';
        $return .= '<td>Otto</td>';
        $return .= '<td>@mdo</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>2</td>';
        $return .= '<td>Jacob</td>';
        $return .= '<td>Thornton</td>';
        $return .= '<td>@fat</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>3</td>';
        $return .= '<td>Larry</td>';
        $return .= '<td>the Bird</td>';
        $return .= '<td>@twitter</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';

        return $return;
    }

    private function tabletwo() {
        $return = '<thead>';
        $return .= '<tr>';
        $return .= '  <th>#</th>';
        $return .= '  <th>First Name</th>';
        $return .= '  <th>Last Name</th>';
        $return .= '  <th>Username</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '  <td>1</td>';
        $return .= '  <td>Mark</td>';
        $return .= '  <td>Otto</td>';
        $return .= '  <td>@mdo</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '  <td>2</td>';
        $return .= '  <td>Jacob</td>';
        $return .= '  <td>Thornton</td>';
        $return .= '  <td>@fat</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '  <td>3</td>';
        $return .= '  <td colspan="2">Larry the Bird</td>';
        $return .= '  <td>@twitter</td>';
        $return .= '</tr>';
        $return .= '</tbody>';
        $return .= '</table>';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums" style="margin-bottom: 18px;">';

        return $return;
    }

    private function nav() {
        $return = '<ul class="nav">';
        $return .= '<li class="active"><a href="#">Home</a></li>';
        $return .= '<li><a href="#">Link</a></li>';
        $return .= '<li><a href="#">Link</a></li>';
        $return .= '<li class="dropdown">';
        $return .= '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li class="nav-header">Nav header</li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '<li><a href="#">One more separated link</a></li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '</ul>';
        $return .= '<form class="navbar-search pull-left" action="">';
        $return .= '<input type="text" class="search-query span10" placeholder="Search">';
        $return .= '</form>';
        $return .= '<ul class="nav pull-right">';
        $return .= '<li><a href="#">Link</a></li>';
        $return .= '<li class="divider-vertical"></li>';
        $return .= '<li class="dropdown">';
        $return .= '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>';
        $return .= '<ul class="dropdown-menu">';
        $return .= '<li><a href="#">Action</a></li>';
        $return .= '<li><a href="#">Another action</a></li>';
        $return .= '<li><a href="#">Something else here</a></li>';
        $return .= '<li class="divider"></li>';
        $return .= '<li><a href="#">Separated link</a></li>';
        $return .= '</ul>';
        $return .= '</li>';
        $return .= '</ul>';
        $return .= '</div><!-- /.nav-collapse -->';
        $return .= '</div>';
        $return .= '</div><!-- /navbar-inner -->';
        $return .= '</div><!-- /navbar -->';
        $return .= '</div>';
        $return .= '<pre class="prettyprint linenums">';

        return $return;
    }

    private function options() {
        $return = '<h3>Options</h3>';
        $return .= '<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to ';
        $return .= '<code>data-</code>, as in <code>data-animation=""</code>.</p>';
        $return .= '<table class="table table-bordered table-striped">';
        $return .= '<thead>';
        $return .= '<tr>';
        $return .= '<th style="width: 100px;">Name</th>';
        $return .= '<th style="width: 100px;">type</th>';
        $return .= '<th style="width: 50px;">default</th>';
        $return .= '<th>description</th>';
        $return .= '</tr>';
        $return .= '</thead>';
        $return .= '<tbody>';
        $return .= '<tr>';
        $return .= '<td>animation</td>';
        $return .= '<td>boolean</td>';
        $return .= '<td>true</td>';
        $return .= '<td>apply a css fade transition to the tooltip</td>';
        $return .= '</tr>';
        $return .= '<tr>';
        $return .= '<td>html</td>';
        $return .= '<td>boolean</td>';
        $return .= '<td>false</td>';
        $return .= '<td>Insert html into the tooltip. If false, jquery\'s <code>text</code> method will be used to insert ';
        $return .= 'content into the dom. Use text if you\'re worried about XSS attacks.</td>';

        return $return;
    }

    private function sixtyfoursixtyfour() {
        $return = '<img class="media-object" alt="64x64" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height';
        $return .= '%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserve';
        $return .= 'AspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15319846969%20text%20%7B%';
        $return .= '20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif';
        $return .= '%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15319846969%22%3E';
        $return .= '%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%';
        $return .= '2214.5%22%20y%3D%2236.5%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" ';
        $return .= 'style="width: 64px; height: 64px;">';
        return $return;
    }

    private function onesixtyonetwenty() {
        $return = '<img alt="160x120" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22160%22%20height%3D%22120%22%20xml';
        $return .= 'ns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20120%22%20preserveAspectRatio%3D%';
        $return .= '22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1531984695a%20text%20%7B%20fill%3A%23AAA';
        $return .= 'AAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace';
        $return .= '%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1531984695a%22%3E%3Crect%20width';
        $return .= '%3D%22160%22%20height%3D%22120%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2255.5%22%20y';
        $return .= '%3D%2264.5%22%3E160x120%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" ';
        $return .= 'style="width: 160px; height: 120px;">';
        return $return;
    }

    private function twosixtyonetwenty() {
        $return = '<img alt="260x120" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22260%22%20height%3D%22120%22%20xml';
        $return .= 'ns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20260%20120%22%20preserveAspectRatio%3D%';
        $return .= '22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15319846957%20text%20%7B%20fill%3A%23AAA';
        $return .= 'AAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace';
        $return .= '%3Bfont-size%3A13pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15319846957%22%3E%3Crect%20width';
        $return .= '%3D%22260%22%20height%3D%22120%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.2734375%';
        $return .= '22%20y%3D%2266%22%3E260x120%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" ';
        $return .= 'style="width: 260px; height: 120px;">';
        return $return;
    }

    private function twosixtyoneeighty() {
        $return = '<img alt="260x180" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22260%22%20height%3D%22180%22%20xml';
        $return .= 'ns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20260%20180%22%20preserveAspectRatio%3D%';
        $return .= '22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15319846937%20text%20%7B%20fill%3A%23AAA';
        $return .= 'AAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace';
        $return .= '%3Bfont-size%3A13pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15319846937%22%3E%3Crect%20width';
        $return .= '%3D%22260%22%20height%3D%22180%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.2734375%';
        $return .= '22%20y%3D%2296%22%3E260x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" ';
        $return .= 'style="width: 260px; height: 180px;">';
        return $return;
    }

    private function threehundredtwohundred() {
        $return = '<img alt="300x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22300%22%20height%3D%22200%22%20xml';
        $return .= 'ns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20200%22%20preserveAspectRatio%3D%';
        $return .= '22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1531984694b%20text%20%7B%20fill%3A%23AAA';
        $return .= 'AAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace';
        $return .= '%3Bfont-size%3A15pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1531984694b%22%3E%3Crect%20width';
        $return .= '%3D%22300%22%20height%3D%22200%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22111.0703125';
        $return .= '%22%20y%3D%22106.6%22%3E300x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" ';
        $return .= 'style="width: 300px; height: 200px;">';
        return $return;
    }

    private function threesixtytwoseventy() {
        $return = '<img alt="360x270" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22360%22%20height%3D%22270%22%20xml';
        $return .= 'ns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20360%20270%22%20preserveAspectRatio%3D%';
        $return .= '22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15319846955%20text%20%7B%20fill%3A%23AAA';
        $return .= 'AAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace';
        $return .= '%3Bfont-size%3A18pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15319846955%22%3E%3Crect%20width';
        $return .= '%3D%22360%22%20height%3D%22270%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22133.2890625';
        $return .= '%22%20y%3D%22143.1%22%3E360x270%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" ';
        $return .= 'style="width: 360px; height: 270px;">';
        return $return;
    }

    private function threethumbnails() {
        $return = '';
        for ($i = 0; $i < 3; $i++) {
            $return .= '<li class="span4">';
            $return .= '<div class="thumbnail">';
            $return .= '<div class="thumbnail-container">';
            $return .= $this->threehundredtwohundred();
            $return .= '</div>';
            $return .= '<div class="caption">';
            $return .= '<h3>Thumbnail label</h3>';
            $return .= '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at ';
            $return .= 'eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>';
            $return .= '<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>';
            $return .= '</div>';
            $return .= '</div>';
            $return .= '</li>';
        }
        return $return;
    }

    private function fourthumbnails() {
        $return = '';
        for ($i = 0; $i < 4; $i++) {
            $return .= '<li class="span3">';
            $return .= '<a href="#" class="thumbnail">';
            $return .= '<div class="thumbnail-container">';
            $return .= $this->twosixtyoneeighty();
            $return .= '</div>';
            $return .= '</a>';
            $return .= '</li>';
        }
        return $return;
    }
}