Syntax error Allow wrapping of flex items in Bootstrap on different screens

Allow wrapping of flex items in Bootstrap on different screens

To allow wrapping of flex items on different screens, use the flex-*-wrap class. The flex-wrap for varied screen sizes work for small, medium, large and extra large screens.

For example, use the flex-lg-wrap class to wrap flex items on large screen −

<div class="d-flex flex-lg-wrap bg-primary">

For small screen −

<div class="d-flex flex-sm-wrap bg-primary">

You can try to run the following code to implement the flex-*-wrap class to wrap flex items on small and large screen size −

Example

Live Demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
   </head>

   <body>
     <div class="container mt-3">
       <h3>Flex Examples</h3>
       <p>Wrap - Yes</p>
       <div class="d-flex flex-wrap bg-primary">
         <div class="p-2 border">Poland</div>
         <div class="p-2 border">Netherlands</div>
         <div class="p-2 border">Ireland</div>
         <div class="p-2 border">Brazil</div>
         <div class="p-2 border">India</div>
         <div class="p-2 border">US</div>
         <div class="p-2 border">Bangladesh</div>
         <div class="p-2 border">Russia</div>
         <div class="p-2 border">Morocco</div>
         <div class="p-2 border">UK</div>
         <div class="p-2 border">Australia</div>
         <div class="p-2 border">Denmark</div>
       </div>
       <br>
       <p>Will wrap on Small Screen</p>
       <div class="d-flex flex-sm-wrap bg-primary">
         <div class="p-2 border">Poland</div>
         <div class="p-2 border">Netherlands</div>
         <div class="p-2 border">Ireland</div>
         <div class="p-2 border">Brazil</div>
         <div class="p-2 border">India</div>
         <div class="p-2 border">US</div>
         <div class="p-2 border">Bangladesh</div>
         <div class="p-2 border">Russia</div>
         <div class="p-2 border">Morocco</div>
         <div class="p-2 border">UK</div>
         <div class="p-2 border">Australia</div>
         <div class="p-2 border">Denmark</div>
       </div><br>
       <p>Will Wrap on Large Screen</p>
       <div class="d-flex flex-lg-wrap bg-primary">
         <div class="p-2 border">Poland</div>
         <div class="p-2 border">Netherlands</div>
         <div class="p-2 border">Ireland</div>
         <div class="p-2 border">Brazil</div>
         <div class="p-2 border">India</div>
         <div class="p-2 border">US</div>
         <div class="p-2 border">Bangladesh</div>
         <div class="p-2 border">Russia</div>
         <div class="p-2 border">Morocco</div>
         <div class="p-2 border">UK</div>
         <div class="p-2 border">Australia</div>
         <div class="p-2 border">Denmark</div>
       </div><br>
    </div>

 </body>
</html>
Updated on: 2020-06-18T07:29:27+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements