Bootstrap 4 – Responsive Web Design

Wrapping your Flexbox

By default all of your child boxes will try to fit onto one line. If you have a layout with several boxes, this may not be the look you want. If this is the case, you can use the flex-wrap property to wrap the child boxes as needed. Let's add more boxes to our original code with the following HTML:

<div class="parent"> 
   <div class="child"> 
   1 
   </div> 
   <div class="child"> 
   2 
   </div> 
   <div class="child"> 
   3 
   </div> 
   <div class="child"> 
   4 
   </div> 
   <div class="child"> 
   5 
   </div> 
   <div class="child"> 
   6 
   </div> 
   <div class="child"> 
   7 
   </div> 
   <div class="child"> 
   8 
   </div> 
   <div class="child"> 
   9 
   </div> 
</div> 
 

We now have nine boxes in our parent container. That should give us enough to work with to create a nice wrapping effect. Before we see what this ...