4.5. Bootstrap Tutorial¶
Bootstrap is a CSS and JavaScript library that can help you build a great looking website without having to create your styles from scratch.
There are many libraries like Bootstrap available. We can’t cover them all. But we can use Bootstrap to give you the idea of what these libraries can do.
Let’s get started with a simple web document.
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 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example Bootstrap Document</title> </head> <body> <header> <nav> <a href="#">Simpson College</a> <ul> <li> Home </li> <li> <a href="about.html">About</a> </li> <li> <a href="location.html">Location</a> </li> </ul> </nav> </header> <h1>Lorem Ipsum</h1> <p><em>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</em></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit odio quis magna pharetra finibus. Etiam iaculis pellentesque lectus, sed suscipit enim scelerisque in. Cras volutpat ut mi id suscipit. Nunc quis turpis lectus. Ut rutrum tempus enim quis dictum. Duis consequat ex orci, non maximus dui vestibulum non. In sed rutrum nulla. Curabitur auctor ultrices massa, vel maximus enim imperdiet sed. Sed libero augue, vehicula eu finibus vitae, interdum nec ante. Mauris vel porttitor felis. Suspendisse blandit erat vel neque volutpat, sed convallis est volutpat.</p> <p>Quisque felis mi, ornare molestie mauris ut, ullamcorper varius ex. Etiam facilisis lorem vitae quam tristique sagittis. Morbi finibus mauris eget elit pellentesque, non porta tortor placerat. Cras vel sodales tortor, fermentum fringilla elit. Proin ante ligula, posuere vitae sem sit amet, tincidunt dapibus quam. Pellentesque placerat augue ut aliquet vehicula. Cras et mauris id mauris pretium varius ac nec augue. Etiam rutrum eros quis hendrerit ultricies. Pellentesque a tellus id neque auctor eleifend vehicula non odio. Sed varius, justo sit amet rutrum blandit, justo erat tincidunt justo, eget mollis justo felis vitae enim.</p> <h2>Tables</h2> <table> <tr> <thead> <tr> <th>First</th> <th>Last</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Sam</td> <td>Simpson</td> <td>sam.simpson@simpson.edu</td> </tr> <tr> <td>Fred</td> <td>Flinstone</td> <td>fred.flinstone@simpson.edu</td> </tr> </tbody> </tr> </table> </body> </html> |
4.5.1. Bootstrap Setup¶
To enable Bootstrap functionality in our page, we have a few steps:
- Tell the browser that we are “responsive” to changing size browsers, phones, tablets, etc.
- Import the Bootstrap CSS.
- (Optional) Select a theme.
- Load “JavaScript” so functional things like pull-down menus work.
For the first three, we need to modify our HTML head to include these tags:
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 | <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"> <!-- Optional theme add-on --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/darkly/bootstrap.min.css" integrity="sha384-nNK9n28pDUDDgIiIqZ/MiyO3F4/9vsMtReZK39klb/MtkZI3/LtjSjlmyVPS3KdN" crossorigin="anonymous"> <!-- If you don't like how sandstone looks, go here and see other themes that are available: https://bootswatch.com/ You can replace the 'optional theme' with links from the page below to get that theme: https://www.bootstrapcdn.com/bootswatch/ --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/flatly/bootstrap.min.css" integrity="sha384-qF/QmIAj5ZaYFAeQcrQ6bfVMAh4zZlrGwTPY7T/M+iTTLJqJBJjwwnsE5Y0mV7QK" crossorigin="anonymous"> </head> |
For the last one, we need to add the following line just before the close of the body tag:
<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>
Where did I get this info? Bootstrap has great docs, and this is from the getting started guide.
At this point, you might notice some slight changes to your document. Mainly font changes.
You should also get introduced to the idea of using a CDN, what the “integrity” and “crossorigin” mean. Your instructor will explain.
4.5.3. The Container¶
Your content will run all the way to the edge of the screen. It will extend too wide on large monitors. It will look awful.
To get around this, put all the content in a <div>
with the class “container”:
<div class="container">
Most of your content below the header goes here.
</div>
Now it will look better:
4.5.4. Buttons¶
Buttons are great!
You can create buttons with Bootstrap:
<button type="button" class="btn btn-primary">Click me!</button>
Buttons are used in forms. But you aren’t limited to using these as button tags! They can be links:
<a type="button" class="btn btn-primary" href="https://simpson.edu">Simpson</a>
There are many styles of buttons. See: https://getbootstrap.com/docs/4.0/components/buttons/
4.5.5. Tables¶
Say you have a boring table you want to make look better:
Simply adding the table
class to the table tab will make it look better:
<table class="table">
There’s a lot more you can do to style tables and make them look great: https://getbootstrap.com/docs/5.0/content/tables/
4.5.6. Bootstrap Alert¶
Want to grab someone’s attention? Use a Bootstrap Alert.
Check the linked docs for different styles.
<div class="alert alert-primary" role="alert">
Use an alert!
</div>
4.5.7. Cards¶
You can create cool looking cards with images and text below.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
For more info, see:
4.5.8. Full Bootstrap Example¶
This is a full example with working code from above.
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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 | <!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"> <!-- Optional theme add-on --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/darkly/bootstrap.min.css" integrity="sha384-nNK9n28pDUDDgIiIqZ/MiyO3F4/9vsMtReZK39klb/MtkZI3/LtjSjlmyVPS3KdN" crossorigin="anonymous"> <!-- If you don't like how sandstone looks, go here and see other themes that are available: https://bootswatch.com/ You can replace the 'optional theme' with links from the page below to get that theme: https://www.bootstrapcdn.com/bootswatch/ --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/flatly/bootstrap.min.css" integrity="sha384-qF/QmIAj5ZaYFAeQcrQ6bfVMAh4zZlrGwTPY7T/M+iTTLJqJBJjwwnsE5Y0mV7QK" crossorigin="anonymous"> </head> <body> <header> <nav class="navbar navbar-expand-sm navbar-light bg-light"> <div class="container-fluid"> <!-- Brand/site name --> <a class="navbar-brand" href="#">Simpson College</a> <!-- Hamburger icon --> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- Div to hide stuff if we have hamburger --> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Nav bar item list --> <ul class="navbar-nav me-auto mb-2 mb-sm-0"> <li class="nav-item"> <!-- This is the style for the 'active' page --> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link" href="location.html">Location</a> </li> </ul> </div> </div> </nav> </header> <!-- Main content Put your main content in a dic named 'container'. This includes your footer. Otherwise everything will stretch to the edge of the screen. --> <div class="container"> <h1>Lorem Ipsum</h1> <p><em>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</em></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit odio quis magna pharetra finibus. Etiam iaculis pellentesque lectus, sed suscipit enim scelerisque in. Cras volutpat ut mi id suscipit. Nunc quis turpis lectus. Ut rutrum tempus enim quis dictum. Duis consequat ex orci, non maximus dui vestibulum non. In sed rutrum nulla. Curabitur auctor ultrices massa, vel maximus enim imperdiet sed. Sed libero augue, vehicula eu finibus vitae, interdum nec ante. Mauris vel porttitor felis. Suspendisse blandit erat vel neque volutpat, sed convallis est volutpat.</p> <p>Quisque felis mi, ornare molestie mauris ut, ullamcorper varius ex. Etiam facilisis lorem vitae quam tristique sagittis. Morbi finibus mauris eget elit pellentesque, non porta tortor placerat. Cras vel sodales tortor, fermentum fringilla elit. Proin ante ligula, posuere vitae sem sit amet, tincidunt dapibus quam. Pellentesque placerat augue ut aliquet vehicula. Cras et mauris id mauris pretium varius ac nec augue. Etiam rutrum eros quis hendrerit ultricies. Pellentesque a tellus id neque auctor eleifend vehicula non odio. Sed varius, justo sit amet rutrum blandit, justo erat tincidunt justo, eget mollis justo felis vitae enim.</p> <h2>Buttons</h2> <a type="button" class="btn btn-primary" href="https://simpson.edu">Simpson</a> <h2>Tables</h2> <table class="table"> <tr> <thead class="thead-light"> <tr> <th scope="col">First</th> <th>Last</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Sam</td> <td>Simpson</td> <td>sam.simpson@simpson.edu</td> </tr> <tr> <td>Fred</td> <td>Flinstone</td> <td>fred.flinstone@simpson.edu</td> </tr> </tbody> </tr> </table> <h2>Alerts</h2> <div class="alert alert-primary" role="alert"> Use an alert! </div> <h2>Cards</h2> <div class="card" style="width: 18rem;"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Juvenile_Ragdoll.jpg/330px-Juvenile_Ragdoll.jpg" class="card-img-top" alt="Kitten"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <!-- end container --> <!-- 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> </script> </body> </html> |