~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ updated by JMH on August 21, 2023 at 11:08 AM Changes to C:\xampp\apache\conf\extra\httpd-vhosts.conf to support my versions of the examples: # updated by JMH on July 21, 2023 at 3:35 PM for Bootstrap 5.3.0 # from https://getbootstrap.com/docs/5.3/getting-started/download/ Alias /Bootstrap "D:/cssd.local/E/Student Resources/Website Development I/Bootstrap/bootstrap-5.3.0-dist" Redirect /bootstrap /Bootstrap # updated by JMH on August 21, 2023 at 11:01 AM # Font Awesome 6 downloaded from https://fontawesome.com/download Alias /FontAwesome "D:/cssd.local/E/Student Resources/Website Development I/Bootstrap/FontAwesome/fontawesome-free-6.4.2-web" Redirect /fontawesome /FontAwesome Redirect /font-awesome /FontAwesome For Font Awesome downloads, see: https://fontawesome.com/docs/web/setup/host-yourself/webfonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ updated by JMH on August 19, 2023 at 7:50 PM Pragim Technologies: Bootstrap Tutorial for Beginners https://www.pragimtech.com/courses/bootstrap-tutorial-for-beginners/ https://youtu.be/314m7YBRFvQ&list=PL6n9fhu94yhXd4xnk-j5FGhHjUv1LsF0V&index=1 Subscribe to receive an email, when new videos are uploaded 1. 6:28 | https://youtu.be/314m7YBRFvQ | What is Bootstrap 2. 9:13 | https://youtu.be/6e9IlNJ6W38 | Setting up bootstrap 3. 10:38 | https://youtu.be/GDwWmrpCa30 | Bootstrap Grid System 4. Bootstrap 3 grid classes 5. Bootstrap grid column offset 6. Bootstrap Nested rows & columns 7. Bootstrap image gallery 8. Bootstrap 3 responsive utility classes 9. Bootstrap typography 10. Bootstrap paragraphs 11. Bootstrap blockquotes and lists 12. Bootstrap list groups 13. Bootstrap code blocks 14. Bootstrap table classes 15. Bootstrap button classes 16. Bootstrap icons 17. Bootstrap dropdown 18. Bootstrap button group 19. Bootstrap split button dropdown 20. Bootstrap forms 21. Bootstrap form controls 22. Bootstrap disabled and readonly form controls 23. Bootstrap form validation states 24. Bootstrap form controls height and width 25. Bootstrap input groups 26. Bootstrap button in input group 27. Bootstrap nav component 28. Bootstrap navbar component 29. Bootstrap breadcrumbs 30. Bootstrap pager and pagination 31. Bootstrap panels 32. Bootstrap well 33. Bootstrap labels and badges 34. Bootstrap progress bars 35. Bootstrap jumbotron 36. Bootstrap media object 37. Bootstrap collapse plugin 38. Bootstrap accordion 39. Bootstrap accordion with arrows 40. Bootstrap modal popup 41. Bootstrap modal methods and events 42. Bootstrap tabs plugin 43. Bootstrap tooltip 44. Bootstrap tooltip manual trigger 45. Bootstrap popover 46. Bootstrap alert 47. Bootstrap scrollspy 48. Bootstrap scrollspy not working 49. Bootstrap scrollspy vertical menu 50. Bootstrap affix plugin 51. Bootstrap image carousel 52. Bootstrap multi column carousel ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ updated by JMH on July 22, 2023 at 8:35 AM Packt Publishing https://www.packtpub.com/ 35 Livery St Fl 2 Livery Pl, Birmingham, West Midlands, B3 2PB, United Kingdom $30M, 136 employees https://en.wikipedia.org/wiki/Packt In 2019 Packt stated it had published 6,500[6] books over its 16 years of operation. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ updated by JMH on August 3, 2023 at 9:37 PM https://stackoverflow.com/questions/63948287/bootstrap-5-navbar-align-items-right Bootstrap 5 has added support for RTL (Right-to-Left), which means you can develop content that needs writing from the right side of the page and continues to the left. As a result, websites in languages like Arabic, Sindhi, and Urdu can easily be developed. As of Bootstrap 5 beta, left and right have been replaced by start and end for RTL support. Therefore the margin utilities changed for Bootstrap 5 beta: ml-auto => ms-auto (start) mr-auto => me-auto (end) Also note, all uses of left and right have been replaced with start and end in Bootstrap 5: ml-* => ms-* pl-* => ps-* mr-* => me-* pr-* => pe-* text-left => text-start text-right=> text-end float-left => float-start float-right=> float-end border-left => border-start border-right=> border-end rounded-left => rounded-start rounded-right=> rounded-end dropleft => dropstart dropright=> dropend dropdown-menu-left => dropdown-menu-start dropdown-menu-right => dropdown-menu-end carousel-item-left => carousel-item-start carousel-item-right=> carousel-item-end Bootstrap 4 vs. Bootstrap 5: What is the Difference? https://www.loginradius.com/blog/engineering/guest-post/bootstrap4-vs-bootstrap5/ Bootstrap 5 introduces a new data attribute naming structure. data-* attribute has been renamed to data-bs-*. SASS = Syntactically Awesome Style Sheets (Sass) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ updated by JMH on July 23, 2023 at 10:58 AM bootstrap-5.3.0-examples come from: https://getbootstrap.com/docs/5.3/examples/ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ updated by JMH on July 21, 2023 at 2:51 PM Video: How to Install Bootstrap 5 Locally on Windows 10 https://youtu.be/wLctHUPp9DE Use Bootstrap from: https://getbootstrap.com/docs/5.3/getting-started/download/ Download from the "Compiled CSS and JS" section Download ready-to-use compiled code for Bootstrap v5.3.0 to easily drop into your project, which includes: - Compiled and minified CSS bundles (see CSS files comparison) - Compiled and minified JavaScript plugins (see JS files comparison) This doesn’t include documentation, source files, or any optional JavaScript dependencies like Popper. Download the examples from the "Examples" section or https://getbootstrap.com/docs/5.3/examples/ See also: W3Schools Bootstrap 5 Tutorial with myriad examples https://www.w3schools.com/bootstrap5/index.php MD Bootstrap Documentation https://mdbootstrap.com/docs/ https://mdbootstrap.com/docs/standard/ https://mdbootstrap.com/docs/standard/navigation/tabs/ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ updated by JMH on July 20, 2023 at 3:42 PM nvm Installation (1) download nvm-setup.exe from: https://github.com/coreybutler/nvm-windows/releases to: D:\cssd.local\E\Student Resources\Website Development I\Bootstrap (2) run nvm-setup.exe (3) accept the license agreement (4) change the nvm installation folder to: D:\cssd.local\E\Student Resources\Website Development I\Bootstrap (5) change node.js installation folder to: D:\cssd.local\E\Student Resources\Website Development I\Bootstrap\nvm N.B. If you leave the directory as C:\Program Files\nodejs, it doesn't seem to get created as the dialog box says it will. This path *does* get added to my path, however. If I set the Node directory as explicitly NVM_HOME = D:\cssd.local\E\Student Resources\Website Development I\Bootstrap\nvm NVM_SYMLINK = D:\cssd.local\E\Student Resources\Website Development I\Bootstrap\nodejs I cannot explain this. Also, the only Node-related file that seems to go into /Bootstrap/nvm is nodejs.ico. (6) click the Install button to complete the installation After installation > nvm -v 1.1.11 > node -v TCC: Unknown command "node" nodejs Installation (1) download node-v18.17.0-x64.msi from: https://nodejs.org/en/download (2) run node-v18.17.0-x64.msi (3) accept the license agreement (4) change the nodejs installation folder to: D:\cssd.local\E\Student Resources\Website Development I\Bootstrap\nodejs After installation > node -v v18.17.0 popper Installation (1) npm i @popperjs/core After installation, the following files and folder were added > dir Volume in drive D is Carol_D Serial number is 10f3:c788 Directory of D:\cssd.local\E\Student Resources\Website Development I\Bootstrap\* 7/20/2023 16:30 559 package-lock.json 7/20/2023 16:30 60 package.json 7/20/2023 16:30 node_modules Code to include in HTML files that require JavaScript ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ updated by JMH on July 16, 2023 at 2:01 PM AVAILABLE BREAKPOINTS https://getbootstrap.com/docs/5.0/layout/breakpoints/ (this information updates page 36 and page 44 of the text) Bootstrap 5 includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. (These breakpoints can be customized if you’re using our source Sass files.) +-------------------+--------+------------+ | | Class | | | Breakpoint | Infix | Dimensions | +-------------------+--------+------------+ | X-Small | (none) | <576px | | Small | sm | ≥576px | | Medium | md | ≥768px | | Large | lg | ≥992px | | Extra large | xl | ≥1200px | | Extra extra large | xxl | ≥1400px | +-------------------+--------+------------+ Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions -- they don’t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ updated by JMH on July 15, 2023 at 11:29 AM Bootstrap 5 Tutorial https://www.w3schools.com/bootstrap5/ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~