"Scrolled resizeable div with header"
Bootstrap 4.0.0 Snippet by qs13

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <body> <div class="main"> <h1>Blender addons collection:</h1> <br>Content added for testing purposes. <h2>Scrolled resizeable div window example below (work with bootstrap 5 as well):</h2> <h3>Grab div's right bottom corner to test it out.</h3> <div class="container"> <div class="message" style="position: relative;"> <div class="header bg-danger text-white">HardOps</div> <div class="panel panel-default border panel-resizable"> Welcome! Great addon to speed up your work in blender!... Working with blender has never been easier. Come to website and read more about this interesting addon. It's usefull to work with bevels. Creators (TeamC) have more interesting addons like boxcutter which can cut object's in interesting way. Blender is great! Blender have many usefull addons some of theme are for free. Blender is one of the best 3d modeling tools ever! You need to try it out. More clever tips here. Go to search and find out about blender feartures! <br> <a href="https://blendermarket.com/products/hardopsofficial">Hardops blendermarket</a> <a href="https://masterxeon1001.com">Hardops Official</a> </div> </div> </div> <div class="container"> <div class="message" style="position: relative;"> <div class="header bg-primary text-white">QucikBevel</div> <div class="panel panel-default border panel-resizable"> Welcome! Great addon to speed up your work in blender!... Work with bevels easier! Don't waste time use this addon! Choose sharp bevel or dull bevel and don't spend to much time on it! Find the best way to create bevels! Working with blender has never been easier. Come to website and read more about this interesting addon. Blender is great! Blender have many usefull addons some of theme are for free. Blender is one of the best 3d modeling tools ever! You need to try it out. More clever tips here. Go to search and find out about blender feartures! <br> <a href="https://blendermarket.com/products/quick-bevel">QucikBevel blendermarket</a> <a href="https://vaguelybutter.artstation.com/">QucikBevel</a> </div> </div> </div> <div class="container"> <div class="message" style="position: relative;"> <div class="header bg-info text-white">Clipboard Paster</div> <div class="panel panel-default border panel-resizable"> Welcome! Great addon to speed up your work in blender!... Want to paste image into blender! Don't waste time use this addon! Paste image to blender with Styriam Clipboard Paster. Easiest way to paste image to blender. Working with blender has never been easier. Come to website and read more about this interesting addon. Blender is great! Blender have many usefull addons some of theme are for free. Blender is one of the best 3d modeling tools ever! You need to try it out. More clever tips here. Go to search and find out about blender feartures! <br> <a href="https://blendermarket.com/products/clipboard-paster">Clipboard Paster blendermarket</a> <a href="https://www.styriam.com/">Styriam</a> </div> </div> </div> </div> </body>
.panel-resizable { resize: both; overflow: hidden; overflow-y: auto; overflow-x: auto; } .main { max-width: 40%; } .message { height: auto; width: auto; float:left; border: 0px; padding: 2px; margin:12; overflow:auto; } .header { padding:12px; border: 1px; border-radius: 4px; }

Related: See More


Questions / Comments: