Bootstrap dynamic divider for columns (angular solution preferable)

Bootstrap dynamic divider for columns (angular solution preferable)

Let’s say I have a typical bootstrap layout with row‘s and col-lg-x‘s

<div class="content container">
    <div class="row">
        <div class="col-lg-5">

        </div>
        <div class="col-lg-7">

        </div>
    </div> 
</div>

Are there any plugins (perferably angular but others too) to make a draggable divider between 2 columns to allows the user to adjust the width?

Like in this example (Tab #2) except it should “snap” to bootstrap’s possible col-lg-xx combinations like col-6/col-6, col-5/col-7, col-4/col-8.

The following does not address your question directly, in that it does not follow bootstrap’s columns/rows. But it might give you a good starting point and others might find it useful:

bg-splitter https://github.com/blackgate/bg-splitter

ui-layout https://github.com/angular-ui/ui-layout

.
.
.
.