4.6. Bootstrap Grid Tutorial¶
By now you should have:
- Look at the Bootstrap Examples to see what is possible.
- Get started by using their Bootstrap Quick Start, or the example above.
- Then look at their section on Components to know how to use it for components. Try those out.
- Finally, look at their grid system. It is a very important tool for layout.
However those grid examples are complex. Here are some full, simple grid examples:
4.6.1. Example 1¶
Bootstrap has a 12 column layout. The div below uses 6 columns. It always takes half the screen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example Bootstrap Document</title> <!-- This says our CSS is compatible with phones, and phones don't need to scale it strangely. --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <!-- Extra style info, so we can see a border around our elements. --> <!-- You probably do NOT want this in your project. --> <style> .mycolor { background-color: #EEEEEE; border-style: solid; border-width: 1px; } .container { background-color: #FFFFEE; border-style: solid; border-width: 1px; } </style> </head> <body> <!-- Main content --> <div class="container"> <h1>Example 1</h1> <p>Bootstrap has a 12 column layout. The div below uses 6 columns. It always takes half the screen.</p> <div class="row"> <div class="mycolor col-6"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <!-- Load in JavaScript that makes Bootstrap interactive --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> </body> </html> |
4.6.2. Example 2¶
Bootstrap has a 12 column layout. We now have two divs that each take 6 columns. Therefore they always take half the screen, and appear side-by-side.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example Bootstrap Document</title> <!-- This says our CSS is compatible with phones, and phones don't need to scale it strangely. --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <!-- Extra style info, so we can see a border around our elements. --> <!-- You probably do NOT want this in your project. --> <style> .mycolor { background-color: #EEEEEE; border-style: solid; border-width: 1px; } .container { background-color: #FFFFEE; border-style: solid; border-width: 1px; } </style> </head> <body> <!-- Main content --> <div class="container"> <h1>Example 2</h1> <p>Bootstrap has a 12 column layout. We now have two divs that each take 6 columns. Therefore they always take half the screen, and appear side-by-side.</p> <div class="row"> <div class="mycolor col-6"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="mycolor col-6"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <!-- Load in JavaScript that makes Bootstrap interactive --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> </body> </html> |
4.6.3. Example 3¶
When the screen is xs or sm, each div takes 12 columns. The width of the screen. When the screen gets to md size, each div takes 6 columns. So they appear side-by-side.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example Bootstrap Document</title> <!-- This says our CSS is compatible with phones, and phones don't need to scale it strangely. --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <!-- Extra style info, so we can see a border around our elements. --> <!-- You probably do NOT want this in your project. --> <style> .mycolor { background-color: #EEEEEE; border-style: solid; border-width: 1px; } .container { background-color: #FFFFEE; border-style: solid; border-width: 1px; } </style> </head> <body> <!-- Main content --> <div class="container"> <h1>Example 3</h1> <p>When the screen is md or larger, each div takes 6 columns. So they appear side-by-side. When the screen gets to less than md size, each div takes 12 columns. The width of the screen.</p> <div class="row"> <div class="mycolor col-12 col-md-6"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="mycolor col-12 col-md-6"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <!-- Load in JavaScript that makes Bootstrap interactive --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> </body> </html> |
4.6.4. Example 4¶
This example scales to between using the whole width (all 12 columns) on small screens, to using only 3/12 = 25% of the width on large screens.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example Bootstrap Document</title> <!-- This says our CSS is compatible with phones, and phones don't need to scale it strangely. --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <!-- Extra style info, so we can see a border around our elements. --> <!-- You probably do NOT want this in your project. --> <style> .mycolor { background-color: #EEEEEE; border-style: solid; border-width: 1px; } .container { background-color: #FFFFEE; border-style: solid; border-width: 1px; } </style> </head> <body> <!-- Main content --> <div class="container"> <h1>Example 4</h1> <p>This example scales to between using the whole width (all 12 columns) on small screens, to using only 3/12 = 25% of the width on large screens.</p> <div class="row"> <div class="mycolor col-xs-12 col-sm-6 col-md-4 col-lg-3"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="mycolor col-xs-12 col-sm-6 col-md-4 col-lg-3"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="mycolor col-xs-12 col-sm-6 col-md-4 col-lg-3"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="mycolor col-xs-12 col-sm-6 col-md-4 col-lg-3"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <!-- Load in JavaScript that makes Bootstrap interactive --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> </body> </html> |
4.6.5. Example 5¶
This example has sidebar that goes away when the screen is extra small. This uses Bootstrap’s Display Utilities.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example Bootstrap Document</title> <!-- This says our CSS is compatible with phones, and phones don't need to scale it strangely. --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <!-- Extra style info, so we can see a border around our elements. --> <!-- You probably do NOT want this in your project. --> <style> .mycolor { background-color: #EEEEEE; border-style: solid; border-width: 1px; } .container { background-color: #FFFFEE; border-style: solid; border-width: 1px; } </style> </head> <body> <!-- Main content --> <div class="container"> <h1>Example 5</h1> <p>This example has sidebar that goes away when the screen is medium or smaller.</p> <div class="row"> <div class="mycolor d-none d-md-block col-2"> <p>Menu:</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div> <div class="mycolor col-12 col-md-10"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <!-- Load in JavaScript that makes Bootstrap interactive --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> </body> </html> |