InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
How to wrap flex items on different screens in Bootstrap? |
|
Answer» <P>To wrap items on different screens in Bootstrap, use the flex-wrap class. Let us see how to use this class for different screens:
Use flex-sm-wrap for small screen: <DIV class="d-flex flex-sm-wrap bg-primary">
Use flex-md-wrap for medium screen: <div class="d-flex flex-md-wrap bg-primary">
Use flex-lg-wrap for large screen: <div class="d-flex flex-lg-wrap bg-primary">
Use flex-xl-wrap for extra large screen: <div class="d-flex flex-xl-wrap bg-primary">The following is an example that wraps flex items on different screen size: <!DOCTYPE html> <html lang="EN"> <head> <title>Bootstrap Flex Wrap 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.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h3>Books</h3> <div class="d-flex flex-wrap bg-primary"> <div class="p-2 border">Book1</div> <div class="p-2 border">Book2</div> <div class="p-2 border">Book3</div> <div class="p-2 border">Book4</div> <div class="p-2 border">Book5</div> <div class="p-2 border">Book6</div> <div class="p-2 border">Book7</div> <div class="p-2 border">Book8</div> <div class="p-2 border">Book9</div> <div class="p-2 border">Book10</div> </div> <br> <p>Wraps on Small Screen (>576px)</p> <div class="d-flex flex-sm-wrap bg-primary"> <div class="p-2 border">Book1</div> <div class="p-2 border">Book2</div> <div class="p-2 border">Book3</div> <div class="p-2 border">Book4</div> <div class="p-2 border">Book5</div> <div class="p-2 border">Book6</div> <div class="p-2 border">Book7</div> <div class="p-2 border">Book8</div> <div class="p-2 border">Book9</div> <div class="p-2 border">Book10</div> </div><br> <p>Wraps on Medium sized screen (>768px)</p> <div class="d-flex flex-md-wrap bg-primary"> <div class="p-2 border">Book1</div> <div class="p-2 border">Book2</div> <div class="p-2 border">Book3</div> <div class="p-2 border">Book4</div> <div class="p-2 border">Book5</div> <div class="p-2 border">Book6</div> <div class="p-2 border">Book7</div> <div class="p-2 border">Book8</div> <div class="p-2 border">Book9</div> <div class="p-2 border">Book10</div> </div><br> <p>Wraps on Large Screen (>992px)</p> <div class="d-flex flex-lg-wrap bg-primary"> <div class="p-2 border">Book1</div> <div class="p-2 border">Book2</div> <div class="p-2 border">Book3</div> <div class="p-2 border">Book4</div> <div class="p-2 border">Book5</div> <div class="p-2 border">Book6</div> <div class="p-2 border">Book7</div> <div class="p-2 border">Book8</div> <div class="p-2 border">Book9</div> <div class="p-2 border">Book10</div> <div class="p-2 border">Book11</div> <div class="p-2 border">Book12</div> <div class="p-2 border">Book13</div> </div><br> <p>Wraps on Extra Large Screen (>1200px)</p> <div class="d-flex flex-xl-wrap bg-primary"> <div class="p-2 border">Book1</div> <div class="p-2 border">Book2</div> <div class="p-2 border">Book3</div> <div class="p-2 border">Book4</div> <div class="p-2 border">Book5</div> <div class="p-2 border">Book6</div> <div class="p-2 border">Book7</div> <div class="p-2 border">Book8</div> <div class="p-2 border">Book9</div> <div class="p-2 border">Book10</div> <div class="p-2 border">Book11</div> <div class="p-2 border">Book12</div> <div class="p-2 border">Book13</div> <div class="p-2 border">Book14</div> <div class="p-2 border">Book15</div> <div class="p-2 border">Book16</div> <div class="p-2 border">Book17</div> <div class="p-2 border">Book18</div> <div class="p-2 border">Book19</div> </div><br> </div> </body> </html>The output for screen size above 576px. The flex-sm-wrap wraps on small screen size: The output for screen size above 768px. The flex-md-wrap wraps on medium screen size: The output for screen size above 1200px. The flex-xl-wrap wraps on extra-large screen size: |
|