Using bootstrap to build a prototype for a web app is really handy. Everything gets a decent look pretty fast. This applies greatly if you are  are not in a web design phase, just want to deal with the proof of concept or want to lay the interface and components without worrying with the design and layout details.

My current web app project has many editing panels like this:

In these panels several features of bootstrap are used: panels, forms and accordion.

And it gets pretty messy very fast:

<div id="bl-mytemplates-editor" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading"><a href="#bl-mytemplates-editor-properties" data-toggle="collapse" data-parent="bl-mytemplates-editor">Template Properties</a></div>
        <div id="bl-mytemplates-editor-properties" class="panel-collapse collapse">
            <div class="panel-body form-horizontal">
                <div class="form-group form-group-sm row">
                    <label class="control-label col-sm-4"><span>Name</span></label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control input-sm" placeholder="name" data-ng-model="templateData.name" />
                    </div>
                </div>
                <div class="form-group form-group-sm row">
                    <label class="control-label col-sm-4"><span>Width</span></label>
                    <div class="col-sm-8">
                        <input type="number" class="form-control input-sm" placeholder="width" data-ng-model="templateData.width" />
                    </div>
                </div>
                <div class="form-group form-group-sm row">
                    <label class="control-label col-sm-4"><span>Height</span></label>
                    <div class="col-sm-8">
                        <input type="number" class="form-control input-sm" placeholder="height" data-ng-model="templateData.height"

[…]


Read the full article.