<div class="navbar-fixed-bottom bg-info tbar">
    <div class="container">
        <a class="btn btn-default" data-action="add" data-target="Elements" data-variant="Chapter"><span class="hidden-xs">Chapter</span></a>
        <span class="btn-group">
            <a class="btn btn-default" data-action="add" data-target="Elements" data-glyphicon="align-justify" data-variant="Text"><span class="hidden-xs">Text</span></a>
            <a class="btn btn-default" data-action="add" data-target="Elements" data-glyphicon="expand" data-variant="Code"><span class="hidden-xs">Code example</span></a>
            <a class="btn btn-default" data-action="add" data-target="Elements" data-glyphicon="list-alt" data-variant="Table"><span class="hidden-xs">Table</span></a>
            <a class="btn btn-default" data-action="add" data-target="Elements" data-glyphicon="list" data-variant="List"><span class="hidden-xs">List</span></a>
        </span>
        <span class="btn-group">
            <a class="btn btn-default" data-action="add" data-target="Elements" data-glyphicon="picture" data-variant="Image"><span class="hidden-xs">Image</span></a>
            <a class="btn btn-default" data-action="add" data-target="Elements" data-glyphicon="th-large" data-variant="Gallery"><span class="hidden-xs">Image row</span></a>
        </span>
        <a class="btn btn-default" data-action="add" data-target="Elements" data-glyphicon="pause" data-variant="ColumnRow"><span class="hidden-xs">Columns</span></a>
    </div>
</div>


<div class="well">
    <div class="pull-right">
        <label>Publish theme</label>
        <select name="Theme">
            <option value="https://netdna.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css">Cerulean</option>
            <option value="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">Standard</option>
            <option value="https://netdna.bootstrapcdn.com/bootswatch/3.2.0/simplex/bootstrap.min.css">Simplex</option>
            <option value="https://netdna.bootstrapcdn.com/bootswatch/3.2.0/readable/bootstrap.min.css">Readable</option>
            <option value="https://netdna.bootstrapcdn.com/bootswatch/3.2.0/journal/bootstrap.min.css">Journal</option>
            <option value="https://netdna.bootstrapcdn.com/bootswatch/3.2.0/united/bootstrap.min.css">United</option>
            <option value="https://netdna.bootstrapcdn.com/bootswatch/3.2.0/slate/bootstrap.min.css">Slate</option>
            <option value="https://netdna.bootstrapcdn.com/bootswatch/3.2.0/amelia/bootstrap.min.css">Amelia</option>
            <option value="https://netdna.bootstrapcdn.com/bootswatch/3.2.0/cosmo/bootstrap.min.css">Cosmo</option>
            <option value="https://netdna.bootstrapcdn.com/bootswatch/3.2.0/cyborg/bootstrap.min.css">Cyborg</option>
            <option value="https://netdna.bootstrapcdn.com/bootswatch/3.2.0/journal/bootstrap.min.css">Flatly</option>
            <option value="https://netdna.bootstrapcdn.com/bootswatch/3.2.0/lumen/bootstrap.min.css">Lumen</option>
            <option value="https://netdna.bootstrapcdn.com/bootswatch/3.2.0/spacelab/bootstrap.min.css">Spacelab</option>
            <option value="https://netdna.bootstrapcdn.com/bootswatch/3.2.0/superhero/bootstrap.min.css">Superhero</option>
            <option value="https://netdna.bootstrapcdn.com/bootswatch/3.2.0/yeti/bootstrap.min.css">Yeti</option>
            <option value="https://netdna.bootstrapcdn.com/bootswatch/3.2.0/darkly/bootstrap.min.css">Darkly</option>
            <option value="http://bootswatch.com/sandstone/bootstrap.min.css">Sandstone</option>
            <option value="http://bootswatch.com/paper/bootstrap.min.css">Paper</option>            
        </select>
    </div>
    <h1>Documenttitle</h1>
    <div data-name="Introduction" data-func="input" data-placeholder="Description of system / documentation"></div>
</div>
<ul data-array="Elements" class="sdok list-group" data-placeholder="No elements in document. Drag and drop from menu below."  data-remove="1">

    <li data-variant="Table" class="clearfix list-group-item">
        <span class="skipautofocus toolbar btn btn-sm" data-action="sort" data-glyphicon="th" tabindex="0"></span>
        
        <div class="form-group">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr data-array="Columns">
                            <th data-func="input" data-name="Title" data-deleteempty="1" data-placeholder="Enter column title"></th>
                        </tr>
                    </thead>
                    <tbody data-array="Rows">
                        <tr data-sync="Columns" data-array="Cells" data-container="table">
                            <td data-func="input" data-name="Text" data-placeholder="Enter text"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div data-func="popoverbar" data-target="ItemToolbar">
            <div class="form-group">
                <label><input type="checkbox" name="Header" /> Show header</label>
            </div>
            <div class="form-group">
                <button data-action="add" data-target="Columns">Add column</button>
            </div>
            <div class="form-group">
                <button data-action="add" data-target="Rows">Add row</button>
            </div>
        </div>
    </li>
    <li data-variant="List" class="list-group-item clearfix">
        <span class="skipautofocus toolbar btn btn-sm" data-action="sort" data-glyphicon="th" tabindex="0"></span>
        <ul class="form-group" data-array="Items">
            <li>
                <span>
                    <span data-name="Text" data-func="input" data-placeholder="Enter text ..." data-removeempty="1"></span>
                    <span class="btn btn-default btn-xs" data-action="sort"></span>
                    <div data-func="popoverbar" data-target="ItemToolbar" data-container="span"></div>
                </span>
            </li>
        </ul>
        <div data-func="popoverbar" data-target="ItemToolbar">
            <button data-action="add" class="btn btn-default btn-sm" data-target="Items">Add item</button>
        </div>
    </li>
    <li data-variant="Code" class="list-group-item clearfix" data-func="focus">
        <span class="skipautofocus toolbar btn btn-sm" data-action="sort" data-glyphicon="th" tabindex="0"></span>
        
        <div title="Code example" class="well well-sm text-primary code" style="display:block" data-name="Code" data-deleteempty="1" data-placeholder="Enter code example ..." data-func="input"></div>
        <div data-func="popoverbar" data-target="ItemToolbar"></div>
    </li>
    <li data-variant="Text" class="clearfix list-group-item form-group" data-func="focus">
        <span class="skipautofocus toolbar btn btn-sm" data-action="sort" data-glyphicon="th" tabindex="0"></span>
        
        <p data-name="Text" title="Text paragraph" data-placeholder="Enter text ..." data-func="input" data-deleteempty="1"></p>
        <div data-func="popoverbar" data-target="ItemToolbar">
            <label>Style</label>
            <select name="Style" class="input-sm skipautofocus editce" style="display:inline">
                <option value="">Normal</option>
                <option value="lead">Lead</option>
                <option value="small">Small</option>
                <optgroup label="Alert (Colored box)">
                    <option value="alert alert-info">Info</option>
                    <option value="alert alert-success">Success</option>
                    <option value="alert alert-warning">Warning</option>
                    <option value="alert alert-danger">Danger</option>
                </optgroup>
                <optgroup label="Box frames">
                    <option value="jumbotron">Jumbotron</option>
                    <option value="well">Well</option>
                    <option value="well well-sm">Well (small)</option>
                    <option value="well well-lg">Well (large)</option>
                </optgroup>
                <optgroup label="Text color">
                    <option value="text-muted">Muted</option>
                    <option value="text-primary">Primary</option>
                    <option value="text-success">Success</option>
                    <option value="text-info">Info</option>
                    <option value="text-warning">Warning</option>
                    <option value="text-danger">Danger</option>
                </optgroup>
            </select>
        </div>
    </li>
    <li data-variant="Gallery" class="list-group-item clearfix">
        <span class="skipautofocus toolbar btn btn-sm" data-action="sort" data-glyphicon="th" tabindex="0"></span>
        <div class="form-group">
            <p class="small" data-func="input" data-name="Header">Image collection</p>
            <div class="row" data-array="Bilder">
                <div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
                    <img class="img-thumbnail" alt="Bilde" data-name="Image" data-action="sort" />
                    <span data-name="noimg">
                        <a class="btn btn-primary" data-func="camera" data-img="Image" data-noimg="noimg"></a>
                        <a class="btn btn-primary" data-func="pasteimg" data-img="Image" data-noimg="noimg"></a>
                        <a class="btn btn-default" data-action="delete"></a>
                    </span>
                </div>
            </div>
        </div>
        <div data-func="popoverbar" data-target="ItemToolbar">
            <a data-action="add" class="btn btn-default btn-block" data-target="Bilder">Image</a>
        </div>
    </li>
    <li data-variant="Image" class="list-group-item clearfix">
        <span class="skipautofocus toolbar btn btn-sm" data-action="sort" data-glyphicon="th" tabindex="0"></span>
        <div class="form-group">
            <img class="img-responsive" alt="Bilde" data-name="Image" />
            <span data-name="noimg">
                <a class="btn btn-lg btn-primary" data-func="camera" data-img="Image" data-noimg="noimg"></a>
                <a class="btn btn-lg btn-primary" data-func="pasteimg" data-img="Image" data-noimg="noimg"></a>
            </span>
        </div>
        <div data-func="popoverbar" data-target="ItemToolbar">
            <label>Style</label>
            <select name="Style" class="input-sm skipautofocus imgstyle" style="display:inline">
                <option value="">None</option>
                <optgroup label="Frames">
                    <option value="img-thumbnail">Box</option>
                    <option value="img-rounded">Rounded</option>
                    <option value="img-circle">Circle</option>
                </optgroup>
            </select>            
        </div>
    </li>
    <li data-variant="Chapter" class="section list-group-item clearfix">
        <div class="panel panel-default">
            <div class="panel-heading">
        
                <div data-toggle="buttons" class="skipautofocus pull-right">
                    <label class="btn btn-sm btn-default active">
                        <input type="checkbox" name="Expand" checked="checked" data-func="collapse" data-container=".panel" data-body="> .list-group" />
                        <span class="glyphicon glyphicon-plus"></span>
                    </label>
                </div>
                <div class="pull-right">
                    <span class="skipautofocus btn btn-sm" data-action="sort" data-glyphicon="th" tabindex="0"></span>
                </div>
                
                <h3 data-name="Title" data-func="input" data-placeholder="Enter chapter title ..."></h3>
                <div data-func="popoverbar" data-target="ItemToolbar" data-container=".panel-heading">
                    <label>Columns</label>
                    <select name="Columns" title="Select input type" class="colsel">
                        <option value="">No columns</option>
                        <option value="col-2">2</option>
                        <option value="col-3">3</option>
                        <option value="col-4">4</option>
                        <option value="col-5">5</option>
                    </select>                
                </div>
            </div>
            <ul data-array="Elements" class="list-group" data-template="Elements" data-placeholder="No elements in chapter. Drag and drop from menu below."></ul>
        </div>
    </li>
    <li data-variant="ColumnRow" class="section list-group-item clearfix">
        <div class="panel panel-default">
            <div class="panel-heading" data-func="focus">
                <div class="pull-right">
                    <span class="skipautofocus btn btn-sm" data-action="sort" data-glyphicon="th" tabindex="0"></span>
                    <div data-toggle="buttons" class="pull-right">
                        <label class="btn btn-sm btn-default active">
                            <input type="checkbox" name="Expand" checked="checked" data-func="collapse" data-container=".panel" data-body="> .list-group,> .panel-footer" />
                            <span class="glyphicon glyphicon-plus"></span>
                        </label>
                    </div>
                </div>
                
                <span data-name="Title" data-func="input">Column layout</span>
                <div class="clearfix"></div>
                <div data-func="popoverbar" data-target="ItemToolbar" data-container=".panel-heading">
                    <button data-action="add" data-target="Columns">Add column</button>
                </div>
            </div>
            
            <div data-array="Columns" data-placeholder="No columns added" class="section row">
                <div class="section col-lg-6">
                    <div class="panel panel-default">
                        <span class="skipautofocus pull-right btn btn-sm" data-action="sort" data-glyphicon="th" tabindex="0"></span>
                        <!--<div data-toggle="buttons" class="pull-right">
                            <label class="btn btn-sm btn-default active">
                                <input type="checkbox" name="Expand" checked="checked" data-func="collapse" data-container=".panel" data-body="> .list-group,> .panel-footer" />
                                <span class="glyphicon glyphicon-plus"></span>
                            </label>
                        </div>-->
                        <ul class="list-group" data-array="Elements" data-template="Elements" data-placeholder="No elements in column. Drag and drop from menu below."></ul>
                        <div data-func="popoverbar" data-target="ItemToolbar">
                            <label>Column sizes</label>
                            <table class="table table-bordered" style="width:auto;margin:0">
                                <tr>
                                    <th>XS:</th>
                                    <td class="colsize" data-name="col-xs" data-func="input">12</td>
                                    <th>SM:</th>
                                    <td class="colsize" data-name="col-sm" data-func="input">6</td>
                                    </tr>
                                <tr>
                                    <th>MD:</th>
                                    <td class="colsize" data-name="col-md" data-func="input">4</td>
                                    <th>LG:</th>
                                    <td class="colsize" data-name="col-lg" data-func="input">4</td>
                                </tr>
                            </table>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>

<div data-name="ItemToolbar" class="popover bottom">
    <div class="arrow"></div>
    <h3 class="popover-title">
        <span class="close">×</span>
        Configure
    </h3>
    <div class="popover-content addprops"></div>
    <div class="btn-group btn-group-sm btn-group-justified">
        <div class="btn-group">
            <button data-action="remove" title="Delete this field"></button>
        </div>
        <div class="btn-group">
            <button data-action="clone" title="Clone this field"></button>
        </div>
    </div>
</div>

.toolbar {
    display:none;
    position:absolute;
    right:0;
    top:0;
    /*height:100%;*/
    /*padding:0.5em;*/
}
.toolbar.btn {
    /*border-radius:0 !important;*/
}
/*.toolbar span {
    top:40%;
}*/

.active > .toolbar, .panel-primary > .panel-heading > .toolbar {
    display:block;
}

.panel-heading h1, .panel-heading h2, .panel-heading h3 {
    margin:0;
}

.list-group-item .well, .list-group-item .alert, .list-group-item .jumbotron, .list-group-item .lead {
    margin:0;
}

.list-group-item .panel {
    margin:0;
}

[data-array][data-placeholder]:empty{
    padding:0.8em;
}

.cmdbar {
    padding:0 !important;
    width:1%;
    white-space:nowrap;
    vertical-align:middle !important;
}

.tbar {
    padding:0.5em 0;
}

.sdok > .section {
    padding:0 !important;
}

.sdok > .section > .panel {
    border:none !important;
}
article ul li {
  /*padding-right:3em !important;*/
}
.section > .panel > ul > li {border-left-width:0.3em !important;}

@media (min-width: 768px) {
    .col-3 {
        column-count:3;
        -webkit-column-count:3;
        -moz-column-count: 3;
    }
    .col-2 {
        column-count:2;
        -webkit-column-count:2;
        -moz-column-count: 2;
    }
    .col-4 {
        column-count:4;
        -webkit-column-count:4;
        -moz-column-count: 4;
    }
    .col-5 {
        column-count:5;
        -webkit-column-count:5;
        -moz-column-count: 5;
    }
    .col-3 li, .col-4 li, .col-2 li, .col-5 li{
        column-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside:avoid;
        -moz-page-break-inside:avoid;
        page-break-inside: avoid;
        border: none !important;
    }
}

function AttachDocEvents($e) {
$e.find(".editce").on("change", function () {
    $e.find("[data-func=input]").attr("class", this.value);
});

$e.find(".imgstyle").on("change", function () {
    $e.find(".img-responsive").attr("class", "img-responsive " + this.value);
});

$e.find("[data-action=sort]").on("mousedown touchstart", function() {
   $(this).trigger("deactivate");
});

$e.find("[data-action=sort]").on("click", function() {
   $(this).trigger("activate");
});

$e.find("[name=Header]").on("change", function () {
    var $h = $(this).closest("[data-array] > *").find("thead");
    if ($(this).prop("checked")) $h.show();
    else $h.hide();
});

$e.find(":input,.btn,button,select,[data-func=input],[tabindex],label").on("focus", function() {
    var $c = $(this).closest(".list-group-item, .panel");
    $form.find(".list-group-item.active").not($c).removeClass("active");
    $form.find(".panel-primary").not($c).removeClass("panel-primary").addClass("panel-default");

    if ($c.is(".panel"))
        $c.addClass("panel-primary").removeClass("panel-default");
    else
        $c.addClass("active");
    
}).on("blur", function() {
    $(this).closest(".list-group-item").removeClass("active");
    $(this).closest(".panel-primary").removeClass("panel-primary").addClass("panel-default");
});

if ($e.is(".list-group-item"))
    $e.on("mousedown touchstart click mouseup", function() {
        if (!$e.is(".section")) {
            $form.find(".list-group-item.active").not($e).removeClass("active");
            $form.find(".panel-primary").removeClass("panel-primary").addClass("panel-default");
    
            $e.addClass("active");
        }
    });
    
$e.find(".colsize").on("blur", function() {
    var $t = $(this);
    //var $c = $(this).closest(".section");
    $e.attr("class", "section col-lg-" + $t.text());
});

$e.find(".colsel").on("change", function() {
    var $u = $e.find(".list-group").first();
    $u.removeClass("col-2 col-3 col-4 col-5");
    if ($(this).val()!==null) $u.addClass($(this).val());
});
}

Output templates

Templates used for document and web page generation: