O'Reilly logo

Learning Bootstrap 4 - Second Edition by Matt Lambert

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required