How can I make it play nice with Bootstrap 4 ?

[nikgoy]

This is per se not an issue, still I would like to know developer suggestions on this. Below is the ul generated. How can I modify the code here so that it becomes responsive and follows bootstrap grid system.

    <ul class="thumbnails image_picker_selector">
        <li><div class="thumbnail"><img class="image_picker_image" src="http://via.placeholder.com/300x350"></div></li>
        <li><div class="thumbnail"><img class="image_picker_image" src="http://via.placeholder.com/300x350"></div></li>
        <li><div class="thumbnail"><img class="image_picker_image" src="http://via.placeholder.com/300x350"></div></li>
        <li><div class="thumbnail"><img class="image_picker_image" src="http://via.placeholder.com/300x350"></div></li>
        <li><div class="thumbnail"><img class="image_picker_image" src="http://via.placeholder.com/300x350"></div></li>
        <li><div class="thumbnail"><img class="image_picker_image" src="http://via.placeholder.com/300x350"></div></li>
    </ul>

[rvera]

Hi @nikhilgoyal I'm not up to date with bootstrap 4, what would be the appropriate html? It would need to be baked into the lib.

[nikgoy]

Thanks for super fast reply. Appropriate HTML is what I'm trying to figure out with Bootstrap. For example

    <div class="container-fluid">
      <div class="row">
        <div class="col-6 col-sm-6 col-md-4 col-lg-3"><img class="img-fluid" src="http://via.placeholder.com/300x350"></div>
        <div class="col-6 col-sm-6 col-md-4 col-lg-3"><img class="img-fluid" src="http://via.placeholder.com/300x350"></div>
        <div class="col-6 col-sm-6 col-md-4 col-lg-3"><img class="img-fluid" src="http://via.placeholder.com/300x350"></div>
      </div>
    </div>

This plays nice with images and breakpoints. I tried adding the bootstrap classes mentioned here to div thumbnail lib generated code, but no effect. If this would have worked, I would have just added bootstrap classes along with thumbnail class in lib js.

[nikgoy]

Hi again, I have figure out a way to make it work with Bootstrap. I just want to know how can I wrap the li in div with classes, so that it ends up like this.

<div class="col-6 col-sm-6 col-md-4 col-lg-3 lesspad"><li><div class="thumbnail"><img class="image_picker_image img-fluid" src="http://via.placeholder.com/300x350"></div></li></div>

[rvera]

This requires updating the code, I'll create an issue for it.

[Akbishnu]

[Humni]

@nikhilgoyal looking into this, this is quite a major rewrite of the codebase, as there is a lot of code dependent on a non-linear grid system (i.e. look at the uneven images example).

Additionally, could you provide more details as to why the UL doesn't work in bootstrap 4 for your use case?