├── README.md
└── index.html


/README.md:
--------------------------------------------------------------------------------
  1 | # Bootstrap 5 Tutorial
  2 | 
  3 | - prerequisities: HTML, CSS
  4 | 
  5 | ### BS4 vs BS5
  6 | 
  7 | - support IE 10 and 11
  8 | - more colors added in bootstrap 5
  9 | - card-deck class is not supported anymore
 10 | - jumbotron not supported in bs5
 11 | - jQuery is removed and vanila js has taken place in bs5
 12 | - bootstrap 5 has own SVG icons
 13 | - form elements such as buttons, checkboxes used to look - different based on OS and browser now it remains same
 14 | - breakpoints: now 6 break-points xs, sm, md, lg, xl, xxl
 15 | 
 16 | - <div class="row bg-primary gx-3 gy-4 g-4"> </div>
 17 | 
 18 | ### [0. welcome to Bootstrap4 and 5](https://youtu.be/Wl6Q472fNCc)
 19 | 
 20 | ### [1. Introduction to Bootstrap](https://youtu.be/SzaWRb-Mm_M)
 21 | 
 22 | #### 1.1 What is Bootstrap?
 23 | 
 24 | - Most powerful and popular Front end framework.
 25 | 
 26 | #### 1.2 Why Bootstrap?
 27 | 
 28 | - It includes HTML, CSS based design for buttons, navigation etc.
 29 | - Easier web development
 30 |   - create navbar, alert boxes, different layout so easily
 31 | - Create responsive web page easily
 32 | - save time
 33 | - open source
 34 | 
 35 | ### [2. Create a bootstrap webpage](https://youtu.be/B7z7_LOCvrs)
 36 | 
 37 | - create a basic html file with 6 heading tags
 38 | - How to add bootstrap to your project?
 39 |   - add css cdn to the head of html file : `<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> `
 40 |   - add js cdn inside the body: ` <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>`
 41 | 
 42 | ### [3. Containers and grid](https://youtu.be/JVGWXp5uw7o)
 43 | 
 44 | - breakpoints: xs < 576px | sm >=576px | md >=768px | lg >=992 | xl >=1200px | xxl >=1400px
 45 | - .container: for x-small it will take 100%; but for other breakpoints it will take maximum not full width of viewport
 46 | - .container-fluid
 47 | - .container-{breakpoint}; example- .container-md
 48 | - example
 49 | 
 50 |   ```html
 51 |   <div class="container">
 52 |     <h1>Anisul Islam</h1>
 53 |     <p>Born To Teach.</p>
 54 | 
 55 |     <h2>About Me</h2>
 56 |     <p>
 57 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta,
 58 |       repudiandae laboriosam? Odit repudiandae beatae eius modi sapiente eveniet
 59 |       exercitationem illum.
 60 |     </p>
 61 |   </div>
 62 |   ```
 63 | 
 64 | - built with flexbox layout
 65 | - .row
 66 | - .col, .col-{breakpoints}; breakpoints are: xs, sm, md, lg, xl, xxl
 67 | - responsive grid
 68 | - example:
 69 |   ````html
 70 |   <div class="row">
 71 |     <h2>My Services</h2>
 72 |     <div class="col-md-4 col-md-6">
 73 |       <h3>Web development</h3>
 74 |       <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
 75 |     </div>
 76 |     <div class="col-md-4 col-md-6">
 77 |       <h3>Web development</h3>
 78 |       <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
 79 |     </div>
 80 |     <div class="col-md-4 col-md-6">
 81 |       <h3>Web development</h3>
 82 |       <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
 83 |     </div>
 84 |   </div>
 85 |   ```html
 86 |   ````
 87 | 
 88 | ### [4. bootstrap 4 vs bootstrap5](https://youtu.be/dMU3R1dWqo4)
 89 | 
 90 | ### [5. colors and spacing - Margin, padding](https://youtu.be/OpxU0T_Pa4w)
 91 | 
 92 | - colors: primary(blue), success(green), info(light blue), warning(orange), danger(red), secondary(grey), white, dark, light
 93 | - bg-colorName
 94 | - text-colorName
 95 | - p-0 (no padding), p-1(0.25rem), p-2(0.5rem), p-3(1rem), p-4(1.5rem) to p-5
 96 | - pl-value; pr-value, pt-value; pb-value; px-value; py-value;
 97 | - responsive padding: p-3, p-lg-5
 98 | - use m for margin
 99 | 
100 | ### [6. border and image](https://youtu.be/oPlPz2gf5OY)
101 | 
102 | - border, border-colorName, rounded-left, rounded-circle
103 | - responsive image: img-fluid
104 | - thumbnail image: img-thumbnail
105 | - aligning-image: float start, float-end
106 | - centering image: mx-auto d-block or make the parent div text-center
107 | 
108 | ### [7. Text and font](https://youtu.be/AbhMm6TYNKg)
109 | 
110 | - text-left, text-right, text-center, text-justify
111 | - responsive text-alignment: text-sm-left text-md-center
112 | - text-lowercase, text-uppercase, text-capitalize
113 | - text-decoration-none
114 | 
115 | ### [8. dismissible alert](https://youtu.be/jJnr3kvxmgU)
116 | 
117 | - example
118 |   ```html
119 |   <div class="alert alert-danger alert-dismissible" role="alert">
120 |     <button
121 |       class="btn-close"
122 |       data-bs-dismiss="alert"
123 |       aria-label="Close"
124 |     ></button>
125 |     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente, fuga!
126 |   </div>
127 |   ```
128 | 
129 | ### [9. blockquote and abbreviations](https://youtu.be/GggXq0Dh-Jc)
130 | 
131 | - example
132 | 
133 |   ```html
134 | 
135 |   ```
136 | 
137 | ### [10. button, button group, list group](https://youtu.be/rU9glyS3J6o)
138 | 
139 | - btn, btn-link, btn-group
140 | - btn-colorName; example: btn-primary, btn-light
141 | - btn-outline-colorName
142 | - button modifiers: btn-lg, btn-sm, btn-block, btn-group-lg, disabled
143 | - example
144 | 
145 |   ```html
146 | 
147 |   ```
148 | 
149 | ### [11. collapse and pagination](https://youtu.be/pKrfwnZ2Rxk)
150 | 
151 | - example
152 | 
153 |   ```html
154 |   <!-- collapse example -->
155 |   <a href="#demo" data-bs-toggle="collapse">learn more</a>
156 |   <button
157 |     class="btn btn-primary"
158 |     type="button"
159 |     data-bs-toggle="collapse"
160 |     data-bs-target="#demo"
161 |     aria-expanded="false"
162 |     aria-controls="demo"
163 |   >
164 |     learn more
165 |   </button>
166 |   <div class="collapse" id="demo">
167 |     <p>
168 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Id dolorem sed
169 |       quisquam repudiandae sequi voluptatibus, aperiam aliquam adipisci nam
170 |       maiores quia unde necessitatibus veritatis eligendi in laboriosam, officia
171 |       porro? Explicabo.
172 |     </p>
173 |   </div>
174 | 
175 |   <!-- pagination example -->
176 |   <footer>
177 |     <ul class="pagination py-3 justify-content-center">
178 |       <li class="page-item"><a class="page-link" href="#">1</a></li>
179 |       <li class="page-item"><a class="page-link" href="#">2</a></li>
180 |       <li class="page-item"><a class="page-link" href="#">3</a></li>
181 |     </ul>
182 |   </footer>
183 |   ```
184 | 
185 | ### [12. Navigation menu](https://youtu.be/ZbAvtMpEzcA)
186 | 
187 | - example
188 | 
189 |   ```html
190 |   <!-- nav example -->
191 |   <ul class="nav justify-content-center py-3 bg-primary">
192 |     <li class="nav-item">
193 |       <a class="nav-link text-white text-uppercase active" href="#">Home</a>
194 |     </li>
195 |     <li class="nav-item">
196 |       <a class="nav-link text-white text-uppercase" href="#">Tutorial</a>
197 |     </li>
198 |     <li class="nav-item">
199 |       <a class="nav-link text-white text-uppercase" href="#">Gallery</a>
200 |     </li>
201 |     <li class="nav-item">
202 |       <a class="nav-link text-white text-uppercase" href="#">Contact</a>
203 |     </li>
204 |   </ul>
205 |   ```
206 | 
207 | ### [13. Toggleable dynamic tab and pill](https://youtu.be/VWxSH4zjF8c)
208 | 
209 | ### [14. Navbar](https://youtu.be/Exq0vXXe3DM)
210 | 
211 | ### [15. Card](https://youtu.be/hXNglSpEv5Q)
212 | 
213 | - example
214 | 
215 | ```html
216 | <div class="row">
217 |   <div class="col-lg-3">
218 |     <div class="card">
219 |       <img
220 |         src="http://www.studywithanis.com/wp-content/uploads/2018/01/ICT-Cover.jpg"
221 |         alt="hsc ict"
222 |       />
223 |       <div class="card-body">
224 |         <h4 class="card-title">Card Title</h4>
225 |         <p class="card-text">card text is here. add your description</p>
226 |         <a href="#" class="card-link stretched-link" target="_blank"
227 |           >visit the link</a
228 |         >
229 |       </div>
230 |     </div>
231 |   </div>
232 | </div>
233 | ```
234 | 
235 | ### [16. Media objects](https://youtu.be/cqEvL_kIbTE)
236 | 
237 | ### [17. Table](https://youtu.be/74Ge1I0FzBk)
238 | 
239 | - we can use table-colorName on table, tr, td
240 | - Use .table-striped to add zebra-striping to any table row within the <tbody>.
241 | - example
242 | 
243 | ```html
244 |           <table class="table table-bordered table-hover text-center table-striped">
245 |         <caption>
246 |           My Education
247 |         </caption>
248 |         <thead style="background-color: darkseagreen">
249 |           <tr>
250 |             <th scope="col">Qualification</th>
251 |             <th scope="col">Institution</th>
252 |             <th scope="col">Passing Year</th>
253 |             <th scope="col">Grade</th>
254 |           </tr>
255 |         </thead>
256 |         <tbody>
257 |           <tr class="table-primary">
258 |             <th scope="row">SSC</th>
259 |             <td>SingerKatch High School and College</td>
260 |             <td>2006</td>
261 |             <td rowspan="2">3.44 / 5.00</td>
262 |           </tr>
263 |           <tr class="table-secondary">
264 |             <th scope="row">HSC</td>
265 |             <td>SingerKatch High School and College</td>
266 |             <td>2008</td>
267 |           </tr>
268 |           <tr>
269 |             <th scope="row">BSc in CSE</td>
270 |             <td>Leading University</td>
271 |             <td>2017</td>
272 |             <td>3.92 / 4.00</td>
273 |           </tr>
274 |         </tbody>
275 |       </table>
276 | ```
277 | 
278 | ### [18. Form ](https://youtu.be/eDE7TndaKeM)
279 | 
280 | - form controls create block level and allows us to style input and textarea with custom sizing, designing and more.
281 | - sizing: form-control, form-control-lg, form-control-sm
282 | 
283 | - example
284 | 
285 | ```html
286 |      <div id="contact-me" class="p-3">
287 |       <h2 class="text-center">Contact</h2>
288 |       <form action="">
289 | 
290 |         <!-- name here  -->
291 |        <div class="mb-3">
292 |           <label for="fullname" class="form-label">fullname: </label>
293 |           <input type="text" id="fullname" name="fullname" class="form-control">
294 |        </div>
295 | 
296 |        <!-- email here  -->
297 |         <div class="mb-3">
298 |           <label for="email" class="form-label">email: </label>
299 |           <input type="email" id="email" name="email" class="form-control">
300 |           <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
301 |         </div>
302 | 
303 |         <!-- password here  -->
304 |         <div class="mb-3">
305 |           <label for="password" class="form-label">password: </label>
306 |           <input type="password" id="password" name="password" class="form-control">
307 |           <div id="passwordHelp" class="form-text">Must be 8-20 characters long.</div>
308 |         </div>
309 | 
310 |        <!-- color selector here  -->
311 |         <div class="mb-3">
312 |             <label for="exampleColorInput" class="form-label">Color picker</label>
313 |             <input type="color" class="form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
314 |         </div>
315 | 
316 |         <!-- dropdown menu here  -->
317 |         <div class="mb-3">
318 |             <select class="form-select" aria-label="department">
319 |                <option selected>CSE</option>
320 |                <option value="1">EEE</option>
321 |                <option value="2">LLB</option>
322 |             </select>
323 |         </div>
324 | 
325 |         <!-- checkbox here  -->
326 |          <div class="mb-3">
327 |           <div class="form-check">
328 |             <input class="form-check-input" type="checkbox" id="terms">
329 |             <label class="form-check-label" for="terms">
330 |               Accept terms and conditions
331 |             </label>
332 |           </div>
333 |         </div>
334 | 
335 | 
336 |         <!-- radio button  -->
337 |          <div class="mb-3">
338 |           <div class="form-check form-check-inline">
339 |             <input class="form-check-input" type="radio" id="male" name="gender">
340 |             <label class="form-check-label" for="male">
341 |               male
342 |             </label>
343 |           </div>
344 |           <div class="form-check form-check-inline">
345 |             <input class="form-check-input" type="radio" id="male" name="gender">
346 |             <label class="form-check-label" for="female">
347 |               female
348 |             </label>
349 |           </div>
350 |         </div>
351 | 
352 | 
353 |         <!-- form-floating labels example; placeholder is required  -->
354 | 
355 |             <div class="form-floating mb-3">
356 |               <input type="email" class="form-control" id="emailInput" placeholder="name@example.com">
357 |               <label for="emailInput">Email address</label>
358 |             </div>
359 | 
360 |             <div class="form-floating">
361 |               <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
362 |               <label for="floatingTextarea">Comments</label>
363 |             </div>
364 |         </div>
365 | 
366 | 
367 |           <!-- form grid example  -->
368 |           <div class="row">
369 |             <div class="col">
370 |               <input type="text" class="form-control" placeholder="First name" aria-label="First name">
371 |             </div>
372 |             <div class="col">
373 |               <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
374 |             </div>
375 |           </div>
376 | 
377 |           <button class="btn btn-primary" type="submit">Submit</button>
378 |         </div>
379 |       </form>
380 | ```
381 | 
382 | ### [19. Carousel](https://youtu.be/f6nCsa6Zbjg)
383 | 
384 | ### [20. Badge, progress and tooltip](https://youtu.be/D-rPnaM0agw)
385 | 
386 | - example
387 | 
388 |   ```html
389 |   <h2>
390 |     Bootstrap5 video <span class="badge bg-secondary rounded-pill">New</span>
391 |   </h2>
392 | 
393 |   <button type="button" class="btn btn-primary">
394 |     Notifications <span class="badge bg-secondary">4</span>
395 |   </button>
396 | 
397 |   <button
398 |     type="button"
399 |     class="btn btn-secondary"
400 |     data-bs-toggle="tooltip"
401 |     data-bs-placement="right"
402 |     title="by clicking sign up you will be registered"
403 |   >
404 |     sign up
405 |   </button>
406 | 
407 |   <div class="progress mt-3">
408 |     <div
409 |       class="progress-bar bg-success w-75"
410 |       role="progressbar"
411 |       aria-valuenow="75"
412 |       aria-valuemin="0"
413 |       aria-valuemax="100"
414 |     >
415 |       75%
416 |     </div>
417 |   </div>
418 |   ```
419 | 
420 | ### [21. List group]()
421 | 
422 | - example
423 | 
424 |   ```html
425 |   <!-- list can have link and button  -->
426 |   <ul class="list-group">
427 |     <li class="list-group-item active">An item</li>
428 |     <a href="#" class="list-group-item list-group-item-action"
429 |       >A second link item</a
430 |     >
431 |     <button type="button" class="list-group-item list-group-item-action">
432 |       A third button item
433 |     </button>
434 |     <li class="list-group-item">A fourth item</li>
435 |     <li class="list-group-item">And a fifth one</li>
436 |   </ul>
437 | 
438 |   <!-- list, badge  -->
439 |   <ul class="list-group">
440 |     <li
441 |       class="list-group-item d-flex justify-content-between align-items-center"
442 |     >
443 |       Books
444 |       <span class="badge bg-primary rounded-pill">10</span>
445 |     </li>
446 |     <li
447 |       class="list-group-item d-flex justify-content-between align-items-center"
448 |     >
449 |       Pens
450 |       <span class="badge bg-primary rounded-pill">5</span>
451 |     </li>
452 |   </ul>
453 |   ```
454 | 
455 | ### [22. float and svg icons](https://youtu.be/-BP8r0vMOXU)
456 | 
457 | - bootstrap svg icons - https://icons.getbootstrap.com/
458 | - example
459 | 
460 |   ```html
461 |   <div class="clearfix">
462 |     <div class="float-start w-50">
463 |       <p>
464 |         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,
465 |         architecto, totam harum eaque commodi dignissimos alias veniam tenetur
466 |         maxime, sapiente nisi facere ipsa saepe inventore.
467 |       </p>
468 |     </div>
469 |     <div class="float-end w-50">
470 |       <p>
471 |         <i class="bi bi-123"></i>
472 |         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,
473 |         architecto, totam harum eaque commodi dignissimos alias veniam tenetur
474 |         maxime, sapiente nisi facere ipsa saepe inventore.
475 |       </p>
476 |     </div>
477 |   </div>
478 | 
479 |   <button class="btn btn-primary">
480 |     <svg
481 |       xmlns="http://www.w3.org/2000/svg"
482 |       width="16"
483 |       height="16"
484 |       fill="currentColor"
485 |       class="bi bi-alarm"
486 |       viewBox="0 0 16 16"
487 |     >
488 |       <path
489 |         d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"
490 |       />
491 |       <path
492 |         d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"
493 |       />
494 |     </svg>
495 |     Alarm
496 |   </button>
497 |   ```
498 | 
499 | ### [23. position and display](https://youtu.be/qknEBRJBAM0)
500 | 
501 | - example
502 | 
503 |   ```html
504 |   <!-- // display: none, block, inline, inline-block, flex, grid, table -->
505 | 
506 |   <!-- <button class="d-none">click me 1</button>
507 |     <button class="d-block">click me 2</button>
508 |   
509 |     <div class="bg-success d-inline-block">
510 |       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A culpa</p>
511 |     </div>
512 |     <div class="bg-primary d-inline-block">
513 |       <p>
514 |         Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus
515 |         tempore in qui. Quasi, quas non?
516 |       </p>
517 |     </div> -->
518 | 
519 |   <!-- positioning: static, fixed, sticky, absolute, relative -->
520 | 
521 |   <div class="bg-success position-relative" style="height: 200px">
522 |     <button class="position-absolute start-50 top-50 translate-middle">
523 |       click me
524 |     </button>
525 |   </div>
526 |   ```
527 | 
528 | ### [24. flex]()
529 | 
530 | - example
531 | 
532 | ```html
533 | <!-- responsive flex items -->
534 | <div
535 |   class="card-container d-flex flex-sm-column flex-md-row bg-success p-3"
536 |   <!--
537 | >
538 |   <div class="card w-25">
539 |     <div class="card-body">
540 |       <h4 class="card-title">card title</h4>
541 |       <p class="card-text">
542 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
543 |       </p>
544 |     </div>
545 |   </div>
546 |   <div class="card w-25">
547 |     <div class="card-body">
548 |       <h4 class="card-title">card title</h4>
549 |       <p class="card-text">
550 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
551 |       </p>
552 |     </div>
553 |   </div>
554 |   <div class="card w-25">
555 |     <div class="card-body">
556 |       <h4 class="card-title">card title</h4>
557 |       <p class="card-text">
558 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
559 |       </p>
560 |     </div>
561 |   </div>
562 | </div>
563 | 
564 | <!-- horizontal alignment  -->
565 | <!-- justify-content-value; here value can be start, end, center, between, around, evenly -->
566 | <div
567 |   class="card-container d-flex flex-sm-column flex-md-row bg-success p-3 justify-content-evenly"
568 | >
569 |   <div class="card w-25">
570 |     <div class="card-body">
571 |       <h4 class="card-title">card title</h4>
572 |       <p class="card-text">
573 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
574 |       </p>
575 |     </div>
576 |   </div>
577 |   <div class="card w-25">
578 |     <div class="card-body">
579 |       <h4 class="card-title">card title</h4>
580 |       <p class="card-text">
581 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
582 |       </p>
583 |     </div>
584 |   </div>
585 |   <div class="card w-25">
586 |     <div class="card-body">
587 |       <h4 class="card-title">card title</h4>
588 |       <p class="card-text">
589 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
590 |       </p>
591 |     </div>
592 |   </div>
593 | </div>
594 | 
595 | <!-- vertical alignment -->
596 | <!-- align-items-value; here value can be start,end,center, stretch -->
597 | 
598 | <div
599 |   class="card-container d-flex flex-sm-column flex-md-row bg-success p-3 align-items-center"
600 |   style="height: 100vh"
601 |   <!--
602 | >
603 |   <div class="card w-25">
604 |     <div class="card-body">
605 |       <h4 class="card-title">card title</h4>
606 |       <p class="card-text">
607 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
608 |       </p>
609 |     </div>
610 |   </div>
611 |   <div class="card w-25">
612 |     <div class="card-body">
613 |       <h4 class="card-title">card title</h4>
614 |       <p class="card-text">
615 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
616 |       </p>
617 |     </div>
618 |   </div>
619 |   <div class="card w-25">
620 |     <div class="card-body">
621 |       <h4 class="card-title">card title</h4>
622 |       <p class="card-text">
623 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
624 |       </p>
625 |     </div>
626 |   </div>
627 | </div>
628 | 
629 | <!-- horizontal and vertical alignment together -->
630 | 
631 | <div
632 |   class="card-container d-flex flex-sm-column flex-md-row bg-primary p-3 justify-content-center align-items-center"
633 |   style="height: 100vh"
634 |   <!--
635 | >
636 |   <div class="card w-25 m-1">
637 |     <div class="card-body">
638 |       <h4 class="card-title">card title</h4>
639 |       <p class="card-text">
640 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
641 |       </p>
642 |     </div>
643 |   </div>
644 |   <div class="card w-25 m-1">
645 |     <div class="card-body">
646 |       <h4 class="card-title">card title</h4>
647 |       <p class="card-text">
648 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
649 |       </p>
650 |     </div>
651 |   </div>
652 |   <div class="card w-25 m-1">
653 |     <div class="card-body">
654 |       <h4 class="card-title">card title</h4>
655 |       <p class="card-text">
656 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
657 |       </p>
658 |     </div>
659 |   </div>
660 | </div>
661 | 
662 | <!-- order of flex items -->
663 | <div
664 |   class="card-container d-flex flex-sm-column flex-md-row bg-primary p-3 justify-content-center align-items-center"
665 |   style="height: 100vh"
666 |   <!--
667 | >
668 |   <div class="card w-25 m-1 order-3">
669 |     <div class="card-body">
670 |       <h4 class="card-title">card title1</h4>
671 |       <p class="card-text">
672 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
673 |       </p>
674 |     </div>
675 |   </div>
676 |   <div class="card w-25 m-1 order-1">
677 |     <div class="card-body">
678 |       <h4 class="card-title">card title2</h4>
679 |       <p class="card-text">
680 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
681 |       </p>
682 |     </div>
683 |   </div>
684 |   <div class="card w-25 m-1 order-2">
685 |     <div class="card-body">
686 |       <h4 class="card-title">card title3</h4>
687 |       <p class="card-text">
688 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
689 |       </p>
690 |     </div>
691 |   </div>
692 | </div>
693 | 
694 | <!-- align-self: start / end/ center / stretched -->
695 | <div
696 |   class="card-container d-flex flex-sm-column flex-md-row bg-primary p-3 justify-content-center align-items-center"
697 |   style="height: 100vh"
698 |   <!--
699 | >
700 |   <div class="card w-25 m-1 align-self-start">
701 |     <div class="card-body">
702 |       <h4 class="card-title">card title1</h4>
703 |       <p class="card-text">
704 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
705 |       </p>
706 |     </div>
707 |   </div>
708 |   <div class="card w-25 m-1">
709 |     <div class="card-body">
710 |       <h4 class="card-title">card title2</h4>
711 |       <p class="card-text">
712 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
713 |       </p>
714 |     </div>
715 |   </div>
716 |   <div class="card w-25 m-1 align-self-end">
717 |     <div class="card-body">
718 |       <h4 class="card-title">card title3</h4>
719 |       <p class="card-text">
720 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit.
721 |       </p>
722 |     </div>
723 |   </div>
724 | </div>
725 | ```
726 | 
727 | ### [25. Modal]()
728 | 
729 | - example
730 | 
731 | ```html
732 | <!-- modal example  -->
733 | <!-- Button trigger modal -->
734 | <button
735 |   type="button"
736 |   class="btn btn-primary"
737 |   data-bs-toggle="modal"
738 |   data-bs-target="#exampleModal"
739 | >
740 |   Launch demo modal
741 | </button>
742 | 
743 | <!-- Modal -->
744 | <div class="modal fade" id="exampleModal">
745 |   <div class="modal-dialog">
746 |     <div class="modal-content">
747 |       <div class="modal-header">
748 |         <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
749 |         <button
750 |           type="button"
751 |           class="btn-close"
752 |           data-bs-dismiss="modal"
753 |           aria-label="Close"
754 |         ></button>
755 |       </div>
756 |       <div class="modal-body">some text is here</div>
757 |       <div class="modal-footer">
758 |         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
759 |           Close
760 |         </button>
761 |         <button type="button" class="btn btn-primary">Save changes</button>
762 |       </div>
763 |     </div>
764 |   </div>
765 | </div>
766 | ```
767 | 
768 | ### [26. Projects]()
769 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |     <link
 9 |       href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
10 |       rel="stylesheet"
11 |       integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
12 |       crossorigin="anonymous"
13 |     />
14 |   </head>
15 |   <body class="p-3">
16 |     <!-- // display: none, block, inline, inline-block, flex, grid, table -->
17 | 
18 |     <!-- <button class="d-none">click me 1</button>
19 |     <button class="d-block">click me 2</button>
20 | 
21 |     <div class="bg-success d-inline-block">
22 |       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A culpa</p>
23 |     </div>
24 |     <div class="bg-primary d-inline-block">
25 |       <p>
26 |         Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus
27 |         tempore in qui. Quasi, quas non?
28 |       </p>
29 |     </div> -->
30 | 
31 |     <!-- positioning: static, fixed, sticky, absolute, relative -->
32 | 
33 |     <div class="bg-success position-relative" style="height: 200px">
34 |       <button class="position-absolute start-50 top-50 translate-middle">
35 |         click me
36 |       </button>
37 |     </div>
38 | 
39 |     <script
40 |       src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
41 |       integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
42 |       crossorigin="anonymous"
43 |     ></script>
44 |   </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------