├── .gitignore ├── project.css ├── checkout.js ├── bootstrapgrid.html ├── bootstrapexample.html └── bootstrapforms.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /project.css: -------------------------------------------------------------------------------- 1 | .btn-success { 2 | background-color: aqua; 3 | } 4 | 5 | .carousel{ 6 | width: 50%; 7 | height: 50%; 8 | } 9 | 10 | .myclass { 11 | margin: 50px; 12 | } 13 | 14 | p { 15 | border: 5px solid black; 16 | margin-top: 20px; 17 | } -------------------------------------------------------------------------------- /checkout.js: -------------------------------------------------------------------------------- 1 | // Example starter JavaScript for disabling form submissions if there are invalid fields 2 | (() => { 3 | 'use strict' 4 | 5 | // Fetch all the forms we want to apply custom Bootstrap validation styles to 6 | const forms = document.querySelectorAll('.needs-validation') 7 | 8 | // Loop over them and prevent submission 9 | Array.from(forms).forEach(form => { 10 | form.addEventListener('submit', event => { 11 | if (!form.checkValidity()) { 12 | event.preventDefault() 13 | event.stopPropagation() 14 | } 15 | 16 | form.classList.add('was-validated') 17 | }, false) 18 | }) 19 | })() 20 | -------------------------------------------------------------------------------- /bootstrapgrid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Bootstrap Column Row 11 | 12 | 13 | 14 |
15 |
16 |
17 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias omnis exercitationem, harum, facere molestias aspernatur quae impedit eius at quod dolorum nisi quam quasi vero! Corporis voluptatibus pariatur accusamus qui.

18 |
19 |
20 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos repudiandae accusantium corrupti ut tenetur, beatae ipsam unde. Numquam dicta inventore libero harum reprehenderit animi eaque aut! Soluta, similique. Beatae, fugit.

21 |
22 |
23 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dicta ullam saepe, eligendi, earum quae nobis assumenda quis, distinctio omnis veritatis possimus in magnam. Autem deleniti corporis sequi corrupti libero.

24 |
25 |
26 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, illo, enim perferendis assumenda obcaecati ipsum eos quas doloribus fugiat beatae quibusdam itaque numquam reiciendis. Ipsa ipsam sit aperiam. Rem, corporis?

27 |
28 | 29 |
30 |
31 |
32 |

test test

33 | 34 |
35 |
36 |

test test

37 | 38 |
39 |
40 |

test test

41 | 42 |
43 |
44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrapexample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Bootstrap Example 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 |
27 | metallica 28 |
29 |
Metallica
30 |

Metallica last album: 72 Seasons.

31 | Buy 32 |
33 |
34 | 35 |
36 |
37 | 38 | 62 | 63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |

71 | 72 |
73 |
74 |

75 | 78 |

79 |
80 |
81 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro a laborum earum, quibusdam voluptates quam officia quia hic dolorem exercitationem facere esse quos voluptatibus recusandae temporibus! A deleniti dolores nulla? 82 | This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. 83 |
84 |
85 |
86 |
87 |

88 | 91 |

92 |
93 |
94 | This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. 95 |
96 |
97 |
98 |
99 |

100 | 103 |

104 |
105 |
106 | This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. 107 |
108 |
109 |
110 |
111 | 112 | 113 |



114 | 115 |
116 |
117 |
118 | 119 | 120 |
We'll never share your email with anyone else.
121 |
122 |
123 | 124 | 125 |
126 |
127 | 128 | 129 |
130 | 131 |
132 |
133 | 134 | 135 | -------------------------------------------------------------------------------- /bootstrapforms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Checkout 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 119 | 120 |
121 |
122 |
123 | 124 |

Checkout form

125 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla deleniti delectus ullam impedit quae beatae incidunt. Voluptatem sunt, architecto, recusandae quaerat in delectus quo consequatur soluta omnis ut ullam praesentium?

126 |
127 | 128 |
129 |
130 |

131 | Your cart 132 | 3 133 |

134 |
    135 |
  • 136 |
    137 |
    Product name
    138 | Brief description 139 |
    140 | $12 141 |
    • 142 |
  • 143 |
    144 |
    Second product
    145 | Brief description 146 |
    147 | $8 148 |
    • 149 |
  • 150 |
    151 |
    Third item
    152 | Brief description 153 |
    154 | $5 155 |
    • 156 |
  • 157 |
    158 |
    Promo code
    159 | EXAMPLECODE 160 |
    161 | −$5 162 |
    • 163 |
  • 164 | Total (USD) 165 | $20 166 |
    • 167 |
168 | 169 |
170 |
171 | 172 | 173 |
174 |
175 |
176 |
177 |

Billing address

178 |
179 |
180 |
181 | 182 | 183 |
184 | Valid first name is required. 185 |
186 |
187 | 188 |
189 | 190 | 191 |
192 | Valid last name is required. 193 |
194 |
195 | 196 |
197 | 198 |
199 | @ 200 | 201 |
202 | Your username is required. 203 |
204 |
205 |
206 | 207 |
208 | 209 | 210 |
211 | Please enter a valid email address for shipping updates. 212 |
213 |
214 | 215 |
216 | 217 | 218 |
219 | Please enter your shipping address. 220 |
221 |
222 | 223 |
224 | 225 | 226 |
227 | 228 |
229 | 230 | 234 |
235 | Please select a valid country. 236 |
237 |
238 | 239 |
240 | 241 | 245 |
246 | Please provide a valid state. 247 |
248 |
249 | 250 |
251 | 252 | 253 |
254 | Zip code required. 255 |
256 |
257 |
258 | 259 |
260 | 261 |
262 | 263 | 264 |
265 | 266 |
267 | 268 | 269 |
270 | 271 |
272 | 273 |

Payment

274 | 275 |
276 |
277 | 278 | 279 |
280 |
281 | 282 | 283 |
284 |
285 | 286 | 287 |
288 |
289 | 290 |
291 |
292 | 293 | 294 | Full name as displayed on card 295 |
296 | Name on card is required 297 |
298 |
299 | 300 |
301 | 302 | 303 |
304 | Credit card number is required 305 |
306 |
307 | 308 |
309 | 310 | 311 |
312 | Expiration date required 313 |
314 |
315 | 316 |
317 | 318 | 319 |
320 | Security code required 321 |
322 |
323 |
324 | 325 |
326 | 327 | 328 |
329 |
330 |
331 |
332 | 333 | 341 |
342 | 343 | 344 | 345 | 346 | --------------------------------------------------------------------------------