How can I let the client actively resize a column in Bootstrap?

Question

How do I let the user resize a column in bootstrap?

I made a responsive layout in Bootstrap like this.

<div class='container-fluid'>
  <div class='row'>
    <div class='col-xs-3 app-left-hand-side'>
      <!-- tool bar goes here eventually -->
    </div>
    <div class='col-xs-9'>
      <!-- the main content goes here -->
    </div>
  </div>
</div>

How can I let the client actively resize the columns by dragging along the border in the middle?

Consider using jQuery UI with the resizeable feature, you can make the other element resize too in the resize or stop events to ensure everything flows smoothly. http://api.jqueryui.com/resizable/#event-resize — scragar, Jun 12 '14 at 17:13

score 2 · Accepted Answer · edited May 23 '17 at 10:27

2

Can't with bootstrap but with javascript you can do as described here:

How to make HTML element resizable using pure javascript?

Or use jquery:

  $(function() {
    $( "#divId" ).resizable();
  });

http://jqueryui.com/resizable/

edited May 23 '17 at 10:27

Community

1
1

answered Jun 12 '14 at 17:15

Andrew

18,680
13
103
118

2

Just a heads up, that's jQuery UI, not jQuery. (jQuery UI is pretty heavy to add if it's only for this feature). – StackOverflowed Oct 17 '16 at 01:36

How can I let the client actively resize a column in Bootstrap?

1 Answers1