css - Wrapping Items in Bootstrap -

i have web page uses bootstrap 3. in web page, i'm displaying list of variable number of items. want layout items horizontally , wrap next line if item goes past width of item-container. currently, have following. in code, have:

<div class="container">   <div class="item-wrapper">     <div class="item"></div>     <div class="item"></div>     <div class="item"></div>     <div class="item"></div>     <div class="item"></div>      <div class="item"></div>     <div class="item"></div>     <div class="item"></div>     <div class="item"></div>     <div class="item"></div>      <div class="item"></div>     <div class="item"></div>     <div class="item"></div>     <div class="item"></div>     <div class="item"></div>      <div class="item"></div>     <div class="item"></div>     <div class="item"></div>       </div> </div> 

as can see in bootply, items laying vertically. not laying out horizontally or wrapping. cannot use flexbox because have support older browsers. i'm trying make layout this:

+-----------+ | █ █ █ █ █ | | █ █ █ █ █ | | █ █ █ █ █ | | █ █ █     | +-----------+ 

is there way css , bootstrap?

just make .item inline: display: inline-block;

.item-wrapper {   float:left;   width: 40%; }  .item {   height:54px;   width:54px;   background-color:orange;   margin:4px;   display: inline-block; } 

bootply