html - list of inline images to wrap -

i have series of 10 images (thumbnails) 90x45 px i'd listed horizontally, managed using inline-flex, in 2 rows of 5. problem when resizing window @ size (1024px-1180) last image overlaps right column. using bootstrap 3.0 3-5-4 setup.

i use 1 row regardless of how many images they'd wrap in new row.

i.e. this

<div> img1-img2-img3-img4-img5-img6-img7-img8-img9-img10-img11... </div> 

would become

<div> img1-img2-img3-img4- img5-img6-img7-img8- img9-img10-img11... </div> 

this have now

<div class="col-xs-12 col-md-3"> content </div> <div class="col-xs-12 col-md-5"> <div class="row">     <div class="col-xs-12">         <ul class="fz-thumbnails-ul">             <li>                 <div class="fz-intro-link">                 <a class="fz-thumbnail-links fz-nav-link fz-first-link" href="#item-1a">                 <div class="fz-hover-slide">                 <img class="img-responsive" src="image1.jpg" />                 </div>                 <img class="img-responsive" src="image1.jpg" />                 </a>                 </div>             </li>             <li>                 <div class="fz-intro-link">                 <a class="fz-thumbnail-links fz-nav-link" href="#item-2a">                 <div class="fz-hover-slide">                 <img class="img-responsive" src="image2.jpg" />                 </div>                 <img class="img-responsive" src="image2.jpg" />                 </a>                 </div>             </li>             <li>                 <div class="fz-intro-link">                 <a class="fz-thumbnail-links fz-nav-link" href="#item-3a">                 <div class="fz-hover-slide">                 <img class="img-responsive" src="image3.jpg" />                 </div>                 <img class="img-responsive" src="image3.jpg" />                 </a>                 </div>             </li>             <li>                 <div class="fz-intro-link">                 <a class="fz-thumbnail-links fz-nav-link" href="#item-4a">                 <div class="fz-hover-slide">                 <img class="img-responsive" src="image4.jpg" />                 </div>                 <img class="img-responsive" src="image4.jpg" />                 </a>                 </div>             </li>             <li>                 <div class="fz-intro-link">                 <a class="fz-thumbnail-links fz-nav-link" href="#item-5a">                 <div class="fz-hover-slide">                 <img class="img-responsive" src="image5.jpg" />                 </div>                 <img class="img-responsive" src="image5.jpg" />                 </a>                 </div>             </li>             <li>                 <div class="fz-intro-link">                 <a class="fz-thumbnail-links fz-nav-link" href="#item-6a">                 <div class="fz-hover-slide">                 <img class="img-responsive" src="image6.jpg" />                 </div>                 <img class="img-responsive" src="image6.jpg" />                 </a>                 </div>             </li>         </ul>     </div> </div> </div> <div class="col-xs-12 col-md-4">     content </div> 

of course list goes on many items images. relevant (i think) css have this

.fz-thumbnails-ul {   display: inline-flex;   list-style: none;   margin-bottom: 3px;   padding: 0; } .fz-thumbnails-ul > li {   margin: 0 3px 0 0; } 

thank you

edit solution lotusms sample, changed above css this

.fz-thumbnails-ul  {   list-style: none;   padding: 0; } .fz-thumbnails-ul li {   display: inline-flex;   margin: 0 3px 0 0; } 

after classes cleanup , css re-structure, solution work if follow guideline , modify accordingly:

html

<div class="container">     <div class="col-xs-12 col-md-3 left">         content     </div>     <div class="col-xs-12 col-md-5 center">         <div class="row">             <div class="col-xs-12">                 <div class="fz-intro-link">                     <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/lough-leane-nov-opt-pano-ii%20wmark_90x0.jpg" />                     <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/lough-leane-nov-opt-pano-ii%20wmark_90x0.jpg" />                     <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/lough-leane-nov-opt-pano-ii%20wmark_90x0.jpg" />                     <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/lough-leane-nov-opt-pano-ii%20wmark_90x0.jpg" />                     <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/lough-leane-nov-opt-pano-ii%20wmark_90x0.jpg" />                     <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/lough-leane-nov-opt-pano-ii%20wmark_90x0.jpg" />                     <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/lough-leane-nov-opt-pano-ii%20wmark_90x0.jpg" />                     <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/lough-leane-nov-opt-pano-ii%20wmark_90x0.jpg" />                     <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/lough-leane-nov-opt-pano-ii%20wmark_90x0.jpg" />                     <img class="img-responsive" src="http://www.photosofireland.ie/phot/photos/thumbnails/lough-leane-nov-opt-pano-ii%20wmark_90x0.jpg" />                 </div>             </div>         </div>     </div>      <div class="col-xs-12 col-md-4 right">         content     </div> </div> 

css

.fz-intro-link img {   display: inline-flex;   list-style: none;   margin-bottom: 3px;   padding: 0;   margin: 5px 9px; } .left{     background:green; } .center{     background:blue; } .right{     background:orange; } 

here demo

:)