Making columns resizable in bootstrap 4

Question

I am using bootstrap 4 and it is great but Is there any way I can add certain columns another class like resizable and maybe add min-width or max-width and they will be resizable within these limits. That would be so great.

I’m not referring to any existing library specifically. I am just looking for a solution to this problem.

An example code would be:

<div class="row">
    <div class="col" resizable style="max-width:500px;"></div>
    <div class="col" resizable></div>
    <div class="col" style="min-width:100px;"></div>
    <div class="col"></div>
</div>

Thank you very much

Answer 1

https://split.js.org/

You can use split js you'd give your elements an id and set default sizes, because you're using bootstrap you already have a dependency on Jquery so that shouldn't be an issue.

Github link is: https://github.com/nathancahill/split

const GUTTER_SIZE = 30;

const gutterStyle = dimension => ({
  'flex-basis': `${GUTTER_SIZE}px`,
});

const elementStyle = (dimension, size) => ({
  'flex-basis': `calc(${size}% - ${GUTTER_SIZE}px)`,
})

Split(['#one', '#two'], {
  sizes: [500, 100],
  minSize: 200,
  elementStyle,
  gutterStyle
});

div {
  border: 2px solid black;
  background: #ccc;
  height: 170px;
}

.flex {
  display: flex;
  flex-direction: row;
}

<section class="flex">
  <div id="one"></div>
  <div id="two"></div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.3.5/split.min.js">
</script>

Answer 2

Split.js just worked perfect for me, If you are using flex (bootstrap 4) you also must add elementstyle and gutterstyle attributes.

This is how I did it

HTML:

    <div class="row no-gutters" style="height:300px">
        <div id="one" class="col">A</div>
        <div id="two" class="col">B</div>
        <div id="three" class="col">C</div>
    </div>

CSS:

.split {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;overflow-y: auto;overflow-x: hidden;}
.gutter {background-color: transparent;background-repeat: no-repeat;background-position: 50%;}
.gutter.gutter-horizontal {cursor: col-resize;background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); }
.gutter.gutter-vertical {cursor: row-resize;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII='); }
.split.split-horizontal, .gutter.gutter-horizontal { height: 100%;float: left;}

JS Library :

<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.3.5/split.min.js"></script>

Code:

var splitobj = Split(["#one","#two","#three"], {
    elementStyle: function (dimension, size, gutterSize) { 
        $(window).trigger('resize'); // Optional
        return {'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'}
    },
    gutterStyle: function (dimension, gutterSize) { return {'flex-basis':  gutterSize + 'px'} },
    sizes: [20,60,20],
    minSize: 150,
    gutterSize: 6,
    cursor: 'col-resize'
});