{"id":21676907,"url":"https://github.com/rasbeetech/bootstrap-test","last_synced_at":"2026-04-20T10:05:16.940Z","repository":{"id":135281282,"uuid":"347180497","full_name":"RasbeeTech/Bootstrap-Test","owner":"RasbeeTech","description":"Bootstrap Test","archived":false,"fork":false,"pushed_at":"2021-03-14T23:31:50.000Z","size":1899,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-20T09:44:03.241Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RasbeeTech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-12T19:47:18.000Z","updated_at":"2021-04-14T01:02:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"d0fc8a3a-4ba5-40ac-bd0d-6b70e2a15783","html_url":"https://github.com/RasbeeTech/Bootstrap-Test","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RasbeeTech/Bootstrap-Test","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RasbeeTech%2FBootstrap-Test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RasbeeTech%2FBootstrap-Test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RasbeeTech%2FBootstrap-Test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RasbeeTech%2FBootstrap-Test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RasbeeTech","download_url":"https://codeload.github.com/RasbeeTech/Bootstrap-Test/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RasbeeTech%2FBootstrap-Test/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32042304,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-25T14:16:47.850Z","updated_at":"2026-04-20T10:05:16.921Z","avatar_url":"https://github.com/RasbeeTech.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bootstrap-Test\n\n## Purpose\nCreate a Bootstrap 4 reference while practicing web-design.\n\n# Bootstrap 4.3.1\n## Getting Started  \nInclude the following code to take advantage of Bootstrap CSS/JS  \n```html\n    \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003c!-- meta viewport tag enables touch zooming and proper rendering on mobile devices--\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\u003e\n    \u003ctitle\u003eBootstrap Test\u003c/title\u003e\n    \u003c!-- Bootstrap CSS file --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css\"\u003e\n    \u003c!-- Icons and font styling CSS file --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css\"\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n    \u003ch1\u003eBootstrap Test\u003c/h1\u003e\n    \u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n    \u003c/div\u003e\n    \u003c-- Place JS at end for perforomance --\u003e\n    \u003cscript src=\"https://code.jquery.com/jquery-3.5.1.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js\"\u003e\u003c/script\u003e\n    \u003c/body\u003e\n    \u003c/html\u003e\n```  \n\n## Table  \n1. [Grid-System](#Grid-System)  \n2. [Fixed-Layout](#Fixed-Layout)  \n3. [Fluid-Layout](#Fluid-Layoutl)  \n4. [Responsive-Layout](#Responsive-Layout)  \n5. [Typography](#Typography)  \n6. [Tables](#Tables)  \n7. [Lists](#Lists)  \n8. [Forms](#Forms)  \n9. [Buttons](#Buttons)  \n10. [Images](#Images)  \n11. [Cards](#Cards)  \n12. [Icons](#Icons)  \n13. [Navbars](#Navbars)  \n14. [Pagination](#Pagination)  \n15. [Badges](#Badges)  \n16. [Progress-Bars](#Progress-Bars)  \n17. [Spinners](#Spinners)  \n18. [Jumbotron](#Jumbotron)  \n19. [Helper-Classes](#Helper-Classes)  \n20. [Modals](#Modals)  \n21. [Dropdowns](#Dropdowns)  \n22. [Alerts](#Alerts)  \n23. [Accordian](#Accordian)  \n24. [Carousal](#Carousal)  \n\n## Content\n1. ## Grid-System\n\nThe latest Bootstrap 4 version introduces the new mobile-first flexbox grid system that appropriately scales up to 12 columns as the device or viewport size increases.\n![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/grid-system-sizing-table.png)  \n\n2. ## Fixed-Layout\nWith Bootstrap 4 you can still create web page layouts based on fixed number of pixels, however the container width vary depending on the viewport width and the layout is responsive too.\n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n\n```html\n\u003cbody\u003e\n    \u003ch1\u003eBootstrap Test\u003c/h1\u003e\n    \u003cdiv class=\"container\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n    \n    \u003c/div\u003e\n\u003c/body\u003e\n```\n\n\u003c/details\u003e\n\n3. ## Fluid-Layout\n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n\n```html\n\u003cbody\u003e\n\u003ch1\u003eBootstrap Test\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n\n\u003c/div\u003e\n\u003c/body\u003e\n```\n\n\u003c/details\u003e\n\n4. ## Responsive-Layout\n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n\n```html\n\u003chead\u003e\n\u003c!-- meta viewport tag enables touch zooming and proper rendering on mobile devices--\u003e\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\u003e\n\u003c/head\u003e\n```\n\n\u003c/details\u003e\n\n5. ## Typography\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/typography.jpg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eTypography\u003c/h1\u003e\n\u003cdiv class=\"container\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n    \u003c!--  The small tag--\u003e\n    \u003ch2\u003e Fancy display heading\n        \u003csmall class=\"text-muted\"\u003eWith faded secondary text\u003c/small\u003e\n    \u003c/h2\u003e\n\n    \u003c!-- Display classes: larger font size but lighter font-weight --\u003e\n    \u003ch1 class=\"display-1\"\u003eDisplay Heading 1\u003c/h1\u003e\n    \u003ch1 class=\"display-2\"\u003eDisplay Heading 2\u003c/h1\u003e\n    \u003ch1 class=\"display-3\"\u003eDisplay Heading 3\u003c/h1\u003e\n    \u003ch1 class=\"display-4\"\u003eDisplay Heading 4\u003c/h1\u003e\n\n    \u003c!-- Paragraphs --\u003e\n    \u003c!-- default font-size: 1rem/16px, line-height: 1.5/20px, line-end: 10px --\u003e\n    \u003cp\u003eThis is how a normal paragraph looks like in Bootstrap.\u003c/p\u003e\n    \u003cp class=\"lead\"\u003eThis is how a paragraph stands out in Bootstrap.\u003c/p\u003e\n\n    \u003c!-- Text Alignment --\u003e\n    \u003cp class=\"text-left\"\u003eLeft aligned text.\u003c/p\u003e\n    \u003cp class=\"text-center\"\u003eCenter aligned text.\u003c/p\u003e\n    \u003cp class=\"text-right\"\u003eRight aligned text.\u003c/p\u003e\n    \u003cp class=\"text-justify\"\u003eJustified text.\u003c/p\u003e\n\n    \u003c!-- Viewport alignment --\u003e\n    \u003cp class=\"text-sm-left\"\u003eText aligned to left on small or wider viewports.\u003c/p\u003e\n    \u003cp class=\"text-md-left\"\u003eText aligned to left on medium or wider viewports.\u003c/p\u003e\n    \u003cp class=\"text-lg-left\"\u003eText aligned to left on large or wider viewports.\u003c/p\u003e\n    \u003cp class=\"text-xl-left\"\u003eText aligned to left on extra-large or wider viewports.\u003c/p\u003e\n\n    \u003c!-- Text formatting --\u003e\n    \u003cp\u003e\u003cb\u003eThis is bold text\u003c/b\u003e\u003c/p\u003e\n    \u003cp\u003e\u003ccode\u003eThis is computer code\u003c/code\u003e\u003c/p\u003e\n    \u003cp\u003e\u003cem\u003eThis is emphasized text\u003c/em\u003e\u003c/p\u003e\n    \u003cp\u003e\u003ci\u003eThis is italic text\u003c/i\u003e\u003c/p\u003e\n    \u003cp\u003e\u003cmark\u003eThis is highlighted text\u003c/mark\u003e\u003c/p\u003e\n    \u003cp\u003e\u003csmall\u003eThis is small text\u003c/small\u003e\u003c/p\u003e\n    \u003cp\u003e\u003cstrong\u003eThis is strongly emphasized text\u003c/strong\u003e\u003c/p\u003e\n    \u003cp\u003eThis is \u003csub\u003esubscript\u003c/sub\u003e and \u003csup\u003esuperscript\u003c/sup\u003e\u003c/p\u003e\n    \u003cp\u003e\u003cins\u003eThis text is inserted to the document\u003c/ins\u003e\u003c/p\u003e\n    \u003cp\u003e\u003cdel\u003eThis text is deleted from the document\u003c/del\u003e\u003c/p\u003e\n\n    \u003c!-- Text transformation --\u003e\n    \u003cp class=\"text-lowercase\"\u003eThe quick brown fox jumps over the lazy dog.\u003c/p\u003e\n    \u003cp class=\"text-uppercase\"\u003eThe quick brown fox jumps over the lazy dog.\u003c/p\u003e\n    \u003cp class=\"text-capitalize\"\u003eThe quick brown fox jumps over the lazy dog.\u003c/p\u003e\n\n    \u003c!-- Text coloring --\u003e\n    \u003cp class=\"text-primary\"\u003ePrimary: Please read the instructions carefully before proceeding.\u003c/p\u003e\n    \u003cp class=\"text-secondary\"\u003eSecondary: This is featured has been removed from the latest version.\u003c/p\u003e\n    \u003cp class=\"text-success\"\u003eSuccess: Your message has been sent successfully.\u003c/p\u003e\n    \u003cp class=\"text-info\"\u003eInfo: You must agree with the terms and conditions to complete the sign up process.\u003c/p\u003e\n    \u003cp class=\"text-warning\"\u003eWarning: There was a problem with your network connection.\u003c/p\u003e\n    \u003cp class=\"text-danger\"\u003eDanger: An error has been occurred while submitting your data.\u003c/p\u003e\n    \u003cp class=\"text-muted\"\u003eMuted: This paragraph of text is grayed out.\u003c/p\u003e\n\n    \u003c!-- Block quotes --\u003e\n    \u003cblockquote class=\"blockquote\"\u003e\n        \u003cp class=\"mb-0\"\u003eThe world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.\u003c/p\u003e\n        \u003cfooter class=\"blockquote-footer\"\u003eby \u003ccite\u003eAlbert Einstein\u003c/cite\u003e\u003c/footer\u003e\n    \u003c/blockquote\u003e\n\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n6. ## Tables\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/tables.jpg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eTables\u003c/h1\u003e\n\u003c!-- table-responsive class enables horizontal scrolling on smaller devices--\u003e\n\u003cdiv class=\"table-responsive{-sm|-md|-lg|-xl}\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n    \u003c!-- use table classes to change styling:\n    .table-dark: inverted or dark table colors,\n    .table-striped: alternating zebra stripes,\n    .table-bordered: adds border to table,\n    .table-borderless: removes all borders,\n    .table-hover: highlights row when hovered over,\n    .table-sm: cuts table padding in half\n    --\u003e\n    \u003ctable class=\"table table-striped table-bordered table-sm\"\u003e\n        \u003c!-- use table head classes to style:\n        .thead-light: light colored table heads,\n        .thead-dark: dark colored table heads,\n        --\u003e\n        \u003cthead class=\"thead-dark\"\u003e\n            \u003ctr\u003e\n            \u003cth\u003eRow\u003c/th\u003e\n            \u003cth\u003eFirst Name\u003c/th\u003e\n            \u003cth\u003eLast Name\u003c/th\u003e\n            \u003cth\u003eEmail\u003c/th\u003e\n            \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n            \u003c!-- use table body classes to style:\n            .table-primary: blue color,\n            .table-secondary: grey color,\n            .table-success: green color,\n            .table-info: teal color,\n            .table-warning: yellow color,\n            .table-danger: red color,\n            .table-active: light grey color,\n            .table-light: light color,\n            .table-dark: dark color\n            --\u003e\n            \u003ctr class=\"table-primary\"\u003e\n                \u003ctd\u003e1\u003c/td\u003e\n                \u003ctd\u003eClark\u003c/td\u003e\n                \u003ctd\u003eKent\u003c/td\u003e\n                \u003ctd\u003eclarkkent@mail.com\u003c/td\u003e\n            \u003c/tr\u003e\n            \u003ctr class=\"table-warning\"\u003e\n                \u003ctd\u003e2\u003c/td\u003e\n                \u003ctd\u003eJohn\u003c/td\u003e\n                \u003ctd\u003eCarter\u003c/td\u003e\n                \u003ctd\u003ejohncarter@mail.com\u003c/td\u003e\n            \u003c/tr\u003e\n            \u003ctr class=\"table-danger\"\u003e\n                \u003ctd\u003e3\u003c/td\u003e\n                \u003ctd\u003ePeter\u003c/td\u003e\n                \u003ctd\u003eParker\u003c/td\u003e\n                \u003ctd\u003epeterparker@mail.com\u003c/td\u003e\n            \u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table\u003e\n\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n7. ## Lists\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/lists.jpg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eLists\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n    \u003c!-- ul classes for styling:\n    .list-unstyled: immediate children have listing style removed,\n    --\u003e\n    \u003cul class=\"list-inline\"\u003e\n        \u003cli\u003eHome\u003c/li\u003e\n        \u003cli\u003eProducts\n            \u003cul\u003e\n                \u003cli\u003eGadgets\u003c/li\u003e\n                \u003cli\u003eAccessories\u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003eAbout Us\u003c/li\u003e\n        \u003cli\u003eContact\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003c!-- horizontal list example --\u003e\n    \u003c!-- list styling:\n    .list-inline: horizontal list (must add .list-inline-item to all \u003cli\u003e items)\n    --\u003e\n    \u003cul class=\"list-inline\"\u003e\n        \u003cli class=\"list-inline-item\"\u003eHome\u003c/li\u003e\n        \u003cli class=\"list-inline-item\"\u003eProducts\u003c/li\u003e\n        \u003cli class=\"list-inline-item\"\u003eAbout Us\u003c/li\u003e\n        \u003cli class=\"list-inline-item\"\u003eContact\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003c!-- horizontal definition lists --\u003e\n    \u003cdl class=\"row\"\u003e\n        \u003cdt class=\"col-sm-3\"\u003eUser Agent\u003c/dt\u003e\n        \u003cdd class=\"col-sm-9\"\u003eAn HTML user agent is any device that interprets HTML documents.\u003c/dd\u003e\n        \u003cdt class=\"col-sm-3 text-truncate\"\u003eClient-side Scripting\u003c/dt\u003e\n        \u003cdd class=\"col-sm-9\"\u003eClient-side scripting generally refers to the category of computer programs on the web that are executed by the user's web browser.\u003c/dd\u003e\n        \u003cdt class=\"col-sm-3\"\u003eDocument Tree\u003c/dt\u003e\n        \u003cdd class=\"col-sm-9\"\u003eThe tree of elements encoded in the source document.\u003c/dd\u003e\n    \u003c/dl\u003e\n    \u003c!-- List Groups --\u003e\n    \u003c!-- \u003cul\u003e has .list-group class and all contained \u003cli\u003e use .list-group-item class--\u003e\n    \u003cul class=\"list-group\"\u003e\n        \u003cli class=\"list-group-item\"\u003ePictures\u003c/li\u003e\n        \u003cli class=\"list-group-item\"\u003eDocuments\u003c/li\u003e\n        \u003cli class=\"list-group-item\"\u003eMusic\u003c/li\u003e\n        \u003cli class=\"list-group-item\"\u003eVideos\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003c!-- hyper linking list items with styling --\u003e\n    \u003c!-- icon and badge styling requires: font-awesome.min.css --\u003e\n    \u003cdiv class=\"list-group\"\u003e\n        \u003ca href=\"#\" class=\"list-group-item list-group-item-action active\"\u003e\n            \u003ci class=\"fa fa-home\"\u003e\u003c/i\u003e Home\n        \u003c/a\u003e\n        \u003ca href=\"#\" class=\"list-group-item list-group-item-action\"\u003e\n            \u003ci class=\"fa fa-camera\"\u003e\u003c/i\u003e Pictures \u003cspan class=\"badge badge-pill badge-primary pull-right\"\u003e145\u003c/span\u003e\n        \u003c/a\u003e\n        \u003ca href=\"#\" class=\"list-group-item list-group-item-action\"\u003e\n            \u003ci class=\"fa fa-music\"\u003e\u003c/i\u003e Music \u003cspan class=\"badge badge-pill badge-primary pull-right\"\u003e50\u003c/span\u003e\n        \u003c/a\u003e\n        \u003ca href=\"#\" class=\"list-group-item list-group-item-action\"\u003e\n            \u003ci class=\"fa fa-film\"\u003e\u003c/i\u003e Videos \u003cspan class=\"badge badge-pill badge-primary pull-right\"\u003e8\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/div\u003e\n\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n8. ## Forms\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/forms.jpg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eForms\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n    \u003c!--  form controls default: left aligned--\u003e\n    \u003c!-- \u003cinput\u003e, \u003ctextarea\u003e, and \u003cselect\u003e require the class .form-control for general styling--\u003e\n    \u003cform\u003e\n        \u003cdiv class=\"form-group\"\u003e\n            \u003clabel for=\"inputEmail\"\u003eEmail\u003c/label\u003e\n            \u003cinput type=\"email\" class=\"form-control\" id=\"inputEmail\" placeholder=\"Email\"\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group\"\u003e\n            \u003clabel for=\"inputPassword\"\u003ePassword\u003c/label\u003e\n            \u003cinput type=\"password\" class=\"form-control\" id=\"inputPassword\" placeholder=\"Password\"\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group\"\u003e\n            \u003clabel class=\"form-check-label\"\u003e\u003cinput type=\"checkbox\"\u003e Remember me\u003c/label\u003e\n        \u003c/div\u003e\n        \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eSign in\u003c/button\u003e\n    \u003c/form\u003e\n    \u003chr\u003e\n    \u003c!-- horizontal form layout example --\u003e\n    \u003cform\u003e\n        \u003cdiv class=\"form-group row\"\u003e\n            \u003clabel for=\"inputEmail\" class=\"col-sm-2 col-form-label\"\u003eEmail\u003c/label\u003e\n            \u003cdiv class=\"col-sm-10\"\u003e\n                \u003cinput type=\"email\" class=\"form-control\" id=\"inputEmail\" placeholder=\"Email\"\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group row\"\u003e\n            \u003clabel for=\"inputPassword\" class=\"col-sm-2 col-form-label\"\u003ePassword\u003c/label\u003e\n            \u003cdiv class=\"col-sm-10\"\u003e\n                \u003cinput type=\"password\" class=\"form-control\" id=\"inputPassword\" placeholder=\"Password\"\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group row\"\u003e\n            \u003cdiv class=\"col-sm-10 offset-sm-2\"\u003e\n                \u003clabel class=\"form-check-label\"\u003e\u003cinput type=\"checkbox\"\u003e Remember me\u003c/label\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group row\"\u003e\n            \u003cdiv class=\"col-sm-10 offset-sm-2\"\u003e\n                \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eSign in\u003c/button\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/form\u003e\n    \u003chr\u003e\n    \u003c!-- inline form layout --\u003e\n    \u003cform class=\"form-inline\"\u003e\n        \u003cdiv class=\"form-group mr-2\"\u003e\n            \u003clabel class=\"sr-only\" for=\"inputEmail\"\u003eEmail\u003c/label\u003e\n            \u003cinput type=\"email\" class=\"form-control\" id=\"inputEmail\" placeholder=\"Email\"\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group mr-2\"\u003e\n            \u003clabel class=\"sr-only\" for=\"inputPassword\"\u003ePassword\u003c/label\u003e\n            \u003cinput type=\"password\" class=\"form-control\" id=\"inputPassword\" placeholder=\"Password\"\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group mr-2\"\u003e\n            \u003clabel\u003e\u003cinput type=\"checkbox\" class=\"mr-1\"\u003e Remember me\u003c/label\u003e\n        \u003c/div\u003e\n        \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eSign in\u003c/button\u003e\n    \u003c/form\u003e\n    \u003chr\u003e\n    \u003c!-- static form layout --\u003e\n    \u003cform\u003e\n        \u003cdiv class=\"form-group row\"\u003e\n            \u003clabel for=\"inputEmail\" class=\"col-sm-2 col-form-label\"\u003eEmail\u003c/label\u003e\n            \u003cdiv class=\"col-sm-10\"\u003e\n                \u003cinput type=\"text\" readonly class=\"form-control-plaintext\" id=\"inputEmail\" value=\"peterparker@example.com\"\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group row\"\u003e\n            \u003clabel for=\"inputPassword\" class=\"col-sm-2 col-form-label\"\u003ePassword\u003c/label\u003e\n            \u003cdiv class=\"col-sm-10\"\u003e\n                \u003cinput type=\"password\" class=\"form-control\" id=\"inputPassword\" placeholder=\"Password\"\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group row\"\u003e\n            \u003cdiv class=\"col-sm-10 offset-sm-2\"\u003e\n                \u003cdiv class=\"checkbox\"\u003e\n                    \u003clabel\u003e\u003cinput type=\"checkbox\"\u003e Remember me\u003c/label\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group row\"\u003e\n            \u003cdiv class=\"col-sm-10 offset-sm-2\"\u003e\n                \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eSign in\u003c/button\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/form\u003e\n    \u003chr\u003e\n    \u003c!-- Vertically stacked checkboxes --\u003e\n    \u003c!-- .d-block class for vertically aligning --\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class=\"d-block\"\u003e\n            \u003cinput type=\"checkbox\" class=\"mr-1\" name=\"sports\"\u003e Cricket\n        \u003c/label\u003e\n        \u003clabel class=\"d-block\"\u003e\n            \u003cinput type=\"checkbox\" class=\"mr-1\" name=\"sports\"\u003e Football\n        \u003c/label\u003e\n        \u003clabel class=\"d-block\"\u003e\n            \u003cinput type=\"checkbox\" class=\"mr-1\" name=\"sports\"\u003e Tennis\n        \u003c/label\u003e\n    \u003c/div\u003e\n    \u003c!-- Vertically stacked radios --\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class=\"d-block\"\u003e\n            \u003cinput type=\"radio\" class=\"mr-1\" name=\"gender\"\u003e Male\n        \u003c/label\u003e\n        \u003clabel class=\"d-block\"\u003e\n            \u003cinput type=\"radio\" class=\"mr-1\" name=\"gender\"\u003e Female\n        \u003c/label\u003e\n    \u003c/div\u003e\n    \u003chr\u003e\n    \u003c!-- Inline checkboxes --\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class=\"mr-3\"\u003e\n            \u003cinput type=\"checkbox\" class=\"mr-1\" name=\"sports\"\u003e Cricket\n        \u003c/label\u003e\n        \u003clabel class=\"mr-3\"\u003e\n            \u003cinput type=\"checkbox\" class=\"mr-1\" name=\"sports\"\u003e Football\n        \u003c/label\u003e\n        \u003clabel class=\"mr-3\"\u003e\n            \u003cinput type=\"checkbox\" class=\"mr-1\" name=\"sports\"\u003e Tennis\n        \u003c/label\u003e\n    \u003c/div\u003e\n    \u003c!-- Inline radios --\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class=\"mr-3\"\u003e\n            \u003cinput type=\"radio\" class=\"mr-1\" name=\"gender\"\u003e Male\n        \u003c/label\u003e\n        \u003clabel class=\"mr-3\"\u003e\n            \u003cinput type=\"radio\" class=\"mr-1\" name=\"gender\"\u003e Female\n        \u003c/label\u003e\n    \u003c/div\u003e\n    \u003c!-- disable form controls --\u003e\n    \u003c!-- add 'Disabled' to attribute --\u003e\n    \u003c!-- add 'readonly' attribute --\u003e\n    \u003cinput type=\"text\" class=\"form-control mb-2\" placeholder=\"Disabled input\" disabled\u003e\n    \u003ctextarea class=\"form-control mb-2\" placeholder=\"Disabled textarea\" disabled\u003e\u003c/textarea\u003e\n    \u003cselect id=\"disabledSelect\" class=\"form-control\" disabled\u003e\n        \u003coption\u003eDisabled select\u003c/option\u003e\n    \u003c/select\u003e\n    \u003chr\u003e\n    \u003c!-- column sizing --\u003e\n    \u003cdiv class=\"form-row\"\u003e\n        \u003cdiv class=\"form-group col-sm-6\"\u003e\n            \u003clabel for=\"inputCity\"\u003eCity\u003c/label\u003e\n            \u003cinput type=\"text\" class=\"form-control\" id=\"inputCity\"\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group col-sm-4\"\u003e\n            \u003clabel for=\"inputState\"\u003eState\u003c/label\u003e\n            \u003cselect id=\"inputState\" class=\"form-control\"\u003e\n                \u003coption\u003eSelect\u003c/option\u003e\n            \u003c/select\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group col-sm-2\"\u003e\n            \u003clabel for=\"inputZip\"\u003eZip\u003c/label\u003e\n            \u003cinput type=\"text\" class=\"form-control\" id=\"inputZip\"\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003c!-- height sizing --\u003e\n    \u003cform\u003e\n        \u003cdiv class=\"form-group row\"\u003e\n            \u003clabel class=\"col-sm-2 col-form-label col-form-label-lg\"\u003eEmail\u003c/label\u003e\n            \u003cdiv class=\"col-sm-10\"\u003e\n                \u003cinput type=\"email\" class=\"form-control form-control-lg\" placeholder=\"Large input\"\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group row\"\u003e\n            \u003clabel class=\"col-sm-2 col-form-label\"\u003eEmail\u003c/label\u003e\n            \u003cdiv class=\"col-sm-10\"\u003e\n                \u003cinput type=\"email\" class=\"form-control\" placeholder=\"Default input\"\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group row\"\u003e\n            \u003clabel class=\"col-sm-2 col-form-label\"\u003eEmail\u003c/label\u003e\n            \u003cdiv class=\"col-sm-10\"\u003e\n                \u003cinput type=\"email\" class=\"form-control form-control-sm\" placeholder=\"Small input\"\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003chr\u003e\n        \u003cdiv class=\"form-group row\"\u003e\n            \u003clabel class=\"col-sm-2 col-form-label col-form-label-lg\"\u003eState\u003c/label\u003e\n            \u003cdiv class=\"col-sm-10\"\u003e\n                \u003cselect class=\"form-control form-control-lg\"\u003e\n                    \u003coption\u003eLarge select\u003c/option\u003e\n                \u003c/select\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group row\"\u003e\n            \u003clabel class=\"col-sm-2 col-form-label\"\u003eState\u003c/label\u003e\n            \u003cdiv class=\"col-sm-10\"\u003e\n                \u003cselect class=\"form-control\"\u003e\n                    \u003coption\u003eDefault select\u003c/option\u003e\n                \u003c/select\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group row\"\u003e\n            \u003clabel class=\"col-sm-2 col-form-label col-form-label-sm\"\u003eState\u003c/label\u003e\n            \u003cdiv class=\"col-sm-10\"\u003e\n                \u003cselect class=\"form-control form-control-sm\"\u003e\n                    \u003coption\u003eSmall select\u003c/option\u003e\n                \u003c/select\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/form\u003e\n    \u003chr\u003e\n    \u003c!-- help text around form controls --\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel\u003ePassword\u003c/label\u003e\n        \u003cinput type=\"password\" class=\"form-control\"\u003e\n        \u003c!-- help text can be put in-line with just \u003csmall\u003e tag --\u003e\n        \u003csmall class=\"form-text text-muted\"\u003e\n            Your password must be 8-20 characters long, contain letters, numbers and special characters, but must not contain spaces.\n        \u003c/small\u003e\n    \u003c/div\u003e\n    \u003chr\u003e\n    \u003c!-- form validation --\u003e\n    \u003c!-- applied with CSS :invalid and :valid pseudo-classes --\u003e\n    \u003cform class=\"needs-validation\" novalidate\u003e\n        \u003cdiv class=\"form-group\"\u003e\n            \u003clabel for=\"inputEmail\"\u003eEmail\u003c/label\u003e\n            \u003cinput type=\"email\" class=\"form-control\" id=\"inputEmail\" placeholder=\"Email\" required\u003e\n            \u003cdiv class=\"invalid-feedback\"\u003ePlease enter a valid email address.\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group\"\u003e\n            \u003clabel for=\"inputPassword\"\u003ePassword\u003c/label\u003e\n            \u003cinput type=\"password\" class=\"form-control\" id=\"inputPassword\" placeholder=\"Password\" required\u003e\n            \u003cdiv class=\"invalid-feedback\"\u003ePlease enter your password to continue.\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"form-group\"\u003e\n            \u003clabel class=\"form-check-label\"\u003e\u003cinput type=\"checkbox\"\u003e Remember me\u003c/label\u003e\n        \u003c/div\u003e\n        \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eSign in\u003c/button\u003e\n    \u003c/form\u003e\n    \u003c!-- javascript code to test validation above ^ --\u003e\n    \u003cscript\u003e\n        // Self-executing function\n        (function() {\n            'use strict';\n            window.addEventListener('load', function() {\n                // Fetch all the forms we want to apply custom Bootstrap validation styles to\n                var forms = document.getElementsByClassName('needs-validation');\n                // Loop over them and prevent submission\n                var validation = Array.prototype.filter.call(forms, function(form) {\n                    form.addEventListener('submit', function(event) {\n                        if (form.checkValidity() === false) {\n                            event.preventDefault();\n                            event.stopPropagation();\n                        }\n                        form.classList.add('was-validated');\n                    }, false);\n                });\n            }, false);\n        })();\n    \u003c/script\u003e\n    \u003chr\u003e\n    \u003c!-- full form example --\u003e\n    \u003c!-- supports all html5 input types including:  datetime, number, email, url, search, range, color, and url--\u003e\n    \u003cform\u003e\n    \u003cdiv class=\"form-group row\"\u003e\n        \u003clabel class=\"col-sm-3 col-form-label\" for=\"firstName\"\u003eFirst Name:\u003c/label\u003e\n        \u003cdiv class=\"col-sm-9\"\u003e\n            \u003cinput type=\"text\" class=\"form-control\" id=\"firstName\" placeholder=\"First Name\" required\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-group row\"\u003e\n        \u003clabel class=\"col-sm-3 col-form-label\" for=\"lastName\"\u003eLast Name:\u003c/label\u003e\n        \u003cdiv class=\"col-sm-9\"\u003e\n            \u003cinput type=\"text\" class=\"form-control\" id=\"lastName\" placeholder=\"Last Name\" required\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-group row\"\u003e\n        \u003clabel class=\"col-sm-3 col-form-label\" for=\"inputEmail\"\u003eEmail Address:\u003c/label\u003e\n        \u003cdiv class=\"col-sm-9\"\u003e\n            \u003cinput type=\"email\" class=\"form-control\" id=\"inputEmail\" placeholder=\"Email Address\" required\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-group row\"\u003e\n        \u003clabel class=\"col-sm-3 col-form-label\" for=\"phoneNumber\"\u003eMobile Number:\u003c/label\u003e\n        \u003cdiv class=\"col-sm-9\"\u003e\n            \u003cinput type=\"number\" class=\"form-control\" id=\"phoneNumber\" placeholder=\"Phone Number\" required\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-group row\"\u003e\n        \u003clabel class=\"col-sm-3 col-form-label\"\u003eDate of Birth:\u003c/label\u003e\n        \u003cdiv class=\"col-sm-3\"\u003e\n            \u003cselect class=\"custom-select\"\u003e\n                \u003coption\u003eDate\u003c/option\u003e\n            \u003c/select\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"col-sm-3\"\u003e\n            \u003cselect class=\"custom-select\"\u003e\n                \u003coption\u003eMonth\u003c/option\u003e\n            \u003c/select\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"col-sm-3\"\u003e\n            \u003cselect class=\"custom-select\"\u003e\n                \u003coption\u003eYear\u003c/option\u003e\n            \u003c/select\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-group row\"\u003e\n        \u003clabel class=\"col-sm-3 col-form-label\" for=\"postalAddress\"\u003ePostal Address:\u003c/label\u003e\n        \u003cdiv class=\"col-sm-9\"\u003e\n            \u003ctextarea rows=\"3\" class=\"form-control\" id=\"postalAddress\" placeholder=\"Postal Address\" required\u003e\u003c/textarea\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-group row\"\u003e\n        \u003clabel class=\"col-sm-3 col-form-label\" for=\"ZipCode\"\u003eZip Code:\u003c/label\u003e\n        \u003cdiv class=\"col-sm-9\"\u003e\n            \u003cinput type=\"text\" class=\"form-control\" id=\"ZipCode\" placeholder=\"Zip Code\" required\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-group row\"\u003e\n        \u003clabel class=\"col-sm-3 col-form-label\"\u003eGender:\u003c/label\u003e\n        \u003cdiv class=\"col-sm-9 mt-2\"\u003e\n            \u003clabel class=\"mb-0 mr-3\"\u003e\n                \u003cinput type=\"radio\" class=\"mr-1\" name=\"gender\"\u003e Male\n            \u003c/label\u003e\n            \u003clabel class=\"mb-0 mr-3\"\u003e\n                \u003cinput type=\"radio\" class=\"mr-1\" name=\"gender\"\u003e Female\n            \u003c/label\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-group row\"\u003e\n        \u003cdiv class=\"col-sm-9 offset-sm-3\"\u003e\n            \u003clabel class=\"checkbox-inline\"\u003e\n                \u003cinput type=\"checkbox\" class=\"mr-1\" value=\"agree\"\u003e I agree to the \u003ca href=\"#\"\u003eTerms and Conditions\u003c/a\u003e.\n            \u003c/label\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-group row\"\u003e\n        \u003cdiv class=\"col-sm-9 offset-sm-3\"\u003e\n            \u003cinput type=\"submit\" class=\"btn btn-primary\" value=\"Submit\"\u003e\n            \u003cinput type=\"reset\" class=\"btn btn-secondary\" value=\"Reset\"\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003c/form\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n9. ## Buttons\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/buttons.jpg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eButtons\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003c!-- button classes --\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003ePrimary\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003eSecondary\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-success\"\u003eSuccess\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-danger\"\u003eDanger\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-warning\"\u003eWarning\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-info\"\u003eInfo\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-dark\"\u003eDark\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-light\"\u003eLight\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-link\"\u003eLink\u003c/button\u003e\n  \u003chr\u003e\n  \u003c!-- button outlining --\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-outline-primary\"\u003ePrimary\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-outline-secondary\"\u003eSecondary\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-outline-success\"\u003eSuccess\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-outline-danger\"\u003eDanger\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-outline-warning\"\u003eWarning\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-outline-info\"\u003eInfo\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-outline-dark\"\u003eDark\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-outline-light\"\u003eLight\u003c/button\u003e\n  \u003chr\u003e\n  \u003c!-- button sizing --\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-primary btn-lg\"\u003eLarge\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eDefault\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-primary btn-sm\"\u003eSmall\u003c/button\u003e\n  \u003chr\u003e\n  \u003c!-- block buttons cover full width: use to .btn-block class--\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-primary btn-lg btn-block\"\u003eBlock level button\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-secondary btn-lg btn-block\"\u003eBlock level button\u003c/button\u003e\n  \u003chr\u003e\n  \u003c!-- disabled buttons --\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-primary btn-lg\" disabled\u003ePrimary button\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-secondary btn-lg\" disabled\u003eButton\u003c/button\u003e\n  \u003chr\u003e\n  \u003c!-- spinner buttons --\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-primary\" disabled\u003e\n      \u003cspan class=\"spinner-border spinner-border-sm\"\u003e\u003c/span\u003e\n  \u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-primary\" disabled\u003e\n      \u003cspan class=\"spinner-border spinner-border-sm\"\u003e\u003c/span\u003e Loading...\n  \u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-primary\" disabled\u003e\n      \u003cspan class=\"spinner-grow spinner-grow-sm\"\u003e\u003c/span\u003e Loading...\n  \u003c/button\u003e\n  \u003chr\u003e\n  \u003ch2\u003eButton Groups\u003c/h2\u003e\n  \u003c!-- Button Groups --\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eHome\u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eAbout\u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eServices\u003c/button\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Button toolbar --\u003e\n  \u003cdiv class=\"btn-group mr-2\"\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003e\n          \u003ci class=\"fa fa-font\"\u003e\u003c/i\u003e\n      \u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003e\n          \u003ci class=\"fa fa-bold\"\u003e\u003c/i\u003e\n      \u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003e\n          \u003ci class=\"fa fa-italic\"\u003e\u003c/i\u003e\n      \u003c/button\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"btn-group mr-2\"\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003e\n          \u003ci class=\"fa fa-align-left\"\u003e\u003c/i\u003e\n      \u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003e\n          \u003ci class=\"fa fa-align-center\"\u003e\u003c/i\u003e\n      \u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003e\n          \u003ci class=\"fa fa-align-right\"\u003e\u003c/i\u003e\n      \u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003e\n          \u003ci class=\"fa fa-align-justify\"\u003e\u003c/i\u003e\n      \u003c/button\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003e\n          \u003ci class=\"fa fa-undo\"\u003e\u003c/i\u003e\n      \u003c/button\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Button group sizing --\u003e\n  \u003cdiv class=\"btn-group mb-2 btn-group-lg\"\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eHome\u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eAbout\u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eServices\u003c/button\u003e\n  \u003c/div\u003e\n  \u003cbr\u003e\n  \u003cdiv class=\"btn-group mb-2\"\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eHome\u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eAbout\u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eServices\u003c/button\u003e\n  \u003c/div\u003e\n  \u003cbr\u003e\n  \u003cdiv class=\"btn-group btn-group-sm\"\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eHome\u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eAbout\u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eServices\u003c/button\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- nesting button groups --\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n      \u003ca href=\"#\" class=\"btn btn-primary\"\u003eHome\u003c/a\u003e\n      \u003ca href=\"#\" class=\"btn btn-primary\"\u003eAbout\u003c/a\u003e\n      \u003cdiv class=\"btn-group\"\u003e\n          \u003ca href=\"#\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\"\u003eServices\u003c/a\u003e\n          \u003cdiv class=\"dropdown-menu\"\u003e\n              \u003ca class=\"dropdown-item\" href=\"#\"\u003eWeb Design\u003c/a\u003e\n              \u003ca class=\"dropdown-item\" href=\"#\"\u003eWeb Development\u003c/a\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- vertical button groups --\u003e\n  \u003cdiv class=\"btn-group-vertical\"\u003e\n      \u003ca href=\"#\" class=\"btn btn-primary\"\u003eHome\u003c/a\u003e\n      \u003ca href=\"#\" class=\"btn btn-primary\"\u003eAbout\u003c/a\u003e\n      \u003cdiv class=\"btn-group\"\u003e\n          \u003ca href=\"#\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\"\u003eServices\u003c/a\u003e\n          \u003cdiv class=\"dropdown-menu\"\u003e\n              \u003ca class=\"dropdown-item\" href=\"#\"\u003eWeb Design\u003c/a\u003e\n              \u003ca class=\"dropdown-item\" href=\"#\"\u003eWeb Development\u003c/a\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- justifying button groups --\u003e\n  \u003cdiv class=\"btn-group d-flex\"\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eHome\u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eAbout\u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eServices\u003c/button\u003e\n  \u003c/div\u003e\n\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n10. ## Images\n    ![images.jpeg](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/images.jpg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eImages\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003c!-- Image styling:\n  .img-fluid: responsive web design (max-width: 100%, height: auto)\n  --\u003e\n  \u003cimg src=\"images/avatar.svg\" class=\"rounded\" alt=\"Rounded Image\"\u003e\n  \u003cimg src=\"images/avatar.svg\" class=\"rounded-circle\" alt=\"Circular Image\"\u003e\n  \u003cimg src=\"images/avatar.svg\" class=\"img-thumbnail\" alt=\"Thumbnail Image\"\u003e\n  \u003chr\u003e\n  \u003c!-- Image alignment--\u003e\n  \u003c!-- Horizontal alignment using float classes --\u003e\n  \u003cdiv class=\"box clearfix\"\u003e\n      \u003cimg src=\"images/avatar.svg\" class=\"pull-left\" alt=\"Sample Image\"\u003e\n      \u003cimg src=\"images/avatar.svg\" class=\"pull-right\" alt=\"Sample Image\"\u003e\n  \u003c/div\u003e\n\n  \u003c!-- Left alignment using text alignment classes --\u003e\n  \u003cdiv class=\"box text-left\"\u003e\n      \u003cimg src=\"images/avatar.svg\" alt=\"Sample Image\"\u003e\n  \u003c/div\u003e\n\n  \u003c!-- Right alignment using text alignment classes --\u003e\n  \u003cdiv class=\"box text-right\"\u003e\n      \u003cimg src=\"images/avatar.svg\" alt=\"Sample Image\"\u003e\n  \u003c/div\u003e\n\n  \u003c!-- Center alignment using text alignment classes --\u003e\n  \u003cdiv class=\"box text-center\"\u003e\n      \u003cimg src=\"images/avatar.svg\" alt=\"Sample Image\"\u003e\n  \u003c/div\u003e\n\n  \u003c!-- Center alignment of block-level image using auto margin --\u003e\n  \u003cdiv class=\"box\"\u003e\n      \u003cimg src=\"images/avatar.svg\" class=\"d-block mx-auto\" alt=\"Sample Image\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n11. ## Cards\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/cards.jpg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eCards\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003c!-- Cards --\u003e\n  \u003cdiv class=\"card\" style=\"width: 300px;\"\u003e\n      \u003cimg src=\"images/avatar.svg\" class=\"card-img-top\" alt=\"...\"\u003e\n      \u003cdiv class=\"card-body text-center\"\u003e\n          \u003ch5 class=\"card-title\"\u003eAlice Liddel\u003c/h5\u003e\n          \u003cp class=\"card-text\"\u003eAlice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.\u003c/p\u003e\n          \u003ca href=\"#\" class=\"btn btn-primary\"\u003eView Profile\u003c/a\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Body-only card --\u003e\n  \u003cdiv class=\"card\"\u003e\n      \u003cdiv class=\"card-body\"\u003eThis is some text within a padded box.\u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- card with header and footer --\u003e\n  \u003cdiv class=\"card text-center\"\u003e\n      \u003cdiv class=\"card-header\"\u003eFeatured\u003c/div\u003e\n      \u003cdiv class=\"card-body\"\u003e\n          \u003ch5 class=\"card-title\"\u003eNASA launches solar probe\u003c/h5\u003e\n          \u003cp class=\"card-text\"\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.\u003c/p\u003e\n          \u003ca href=\"#\" class=\"btn btn-primary\"\u003eKnow more\u003c/a\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card-footer text-muted\"\u003e2 days ago\u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- List groups in card --\u003e\n  \u003cdiv class=\"card\" style=\"width: 18rem;\"\u003e\n      \u003cdiv class=\"card-header\"\u003eFeatured\u003c/div\u003e\n      \u003cul class=\"list-group list-group-flush\"\u003e\n          \u003cli class=\"list-group-item\"\u003eCras justo odio\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eDapibus ac facilisis in\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eVestibulum at eros\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"card-body\"\u003e\n          \u003ca href=\"#\" class=\"card-link\"\u003eAdd More\u003c/a\u003e\n          \u003ca href=\"#\" class=\"card-link\"\u003eShare\u003c/a\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Mix and match --\u003e\n  \u003cdiv class=\"card\" style=\"width: 300px;\"\u003e\n      \u003cimg src=\"images/avatar.svg\" class=\"w-100 border-bottom\" alt=\"Rounded Image\"\u003e\n      \u003cdiv class=\"card-body\"\u003e\n          \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n          \u003cp class=\"card-text\"\u003ePulvinar leo id risus pellentesque el vestibulum. Sed diam libero egetve sodales sapien vel, aliquet nibhte bibendum enim porttitor orci.\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cul class=\"list-group list-group-flush\"\u003e\n          \u003cli class=\"list-group-item\"\u003eCras justo odio\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eDapibus ac facilisis in\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eVestibulum at eros\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"card-body\"\u003e\n          \u003ca href=\"#\" class=\"card-link\"\u003eCard link\u003c/a\u003e\n          \u003ca href=\"#\" class=\"card-link\"\u003eAnother link\u003c/a\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Background color for cards --\u003e\n  \u003c!-- card colors:\n  .bg-primary,\n  .bg-secondary,\n  .bg-success,\n  .bg-danger,\n  .bg-warning,\n  .bg-info,\n  .bg-dark,\n  .bg-light\n  --\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col-sm-6\"\u003e\n        \u003cdiv class=\"card text-white bg-warning mb-4\"\u003e\n            \u003cdiv class=\"card-body\"\u003e\n                \u003ch5 class=\"card-title\"\u003ePrimary card title\u003c/h5\u003e\n                \u003cp class=\"card-text\"\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.\u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- card borders and text styling:\n  .border/text-primary,\n  .border/text-secondary,\n  .border/text-success,\n  .border/text-danger,\n  .border/text-warning,\n  .border/text-info,\n  .border/text-dark,\n  .border/text-light\n  --\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col-sm-6\"\u003e\n        \u003cdiv class=\"card border-primary mb-4\"\u003e\n            \u003cdiv class=\"card-body text-primary\"\u003e\n                \u003ch5 class=\"card-title\"\u003ePrimary card title\u003c/h5\u003e\n                \u003cp class=\"card-text\"\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.\u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003ch2\u003e Card Layout \u003c/h2\u003e\n  \u003c!-- Card Groups (uses display: flex) --\u003e\n  \u003cdiv class=\"card-group\"\u003e\n      \u003cdiv class=\"card\"\u003e\n          \u003cimg src=\"images/avatar.svg\" class=\"card-img-top\" alt=\"...\"\u003e\n          \u003cdiv class=\"card-body\"\u003e\n              \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n              \u003cp class=\"card-text\"\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"card-footer\"\u003e\n              \u003csmall class=\"text-muted\"\u003eLast updated 3 mins ago\u003c/small\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n          \u003cimg src=\"images/avatar.svg\" class=\"card-img-top\" alt=\"...\"\u003e\n          \u003cdiv class=\"card-body\"\u003e\n              \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n              \u003cp class=\"card-text\"\u003eVestibulum id metus ac nisl bibendum nibh scelerisque non purus in suspendisse.\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"card-footer\"\u003e\n              \u003csmall class=\"text-muted\"\u003eLast updated 3 mins ago\u003c/small\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n          \u003cimg src=\"images/avatar.svg\" class=\"card-img-top\" alt=\"...\"\u003e\n          \u003cdiv class=\"card-body\"\u003e\n              \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n              \u003cp class=\"card-text\"\u003ePulvinar leo id risus enim. Bibendum varius tincidunt pellentesque malesuada in.\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"card-footer\"\u003e\n              \u003csmall class=\"text-muted\"\u003eLast updated 3 mins ago\u003c/small\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Card decks: seperation between cards --\u003e\n  \u003cdiv class=\"card-deck\"\u003e\n      \u003cdiv class=\"card\"\u003e\n          \u003cimg src=\"images/avatar.svg\" class=\"card-img-top\" alt=\"...\"\u003e\n          \u003cdiv class=\"card-body\"\u003e\n              \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n              \u003cp class=\"card-text\"\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"card-footer\"\u003e\n              \u003csmall class=\"text-muted\"\u003eLast updated 3 mins ago\u003c/small\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n          \u003cimg src=\"images/avatar.svg\" class=\"card-img-top\" alt=\"...\"\u003e\n          \u003cdiv class=\"card-body\"\u003e\n              \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n              \u003cp class=\"card-text\"\u003eVestibulum id metus ac nisl bibendum nibh scelerisque non purus in suspendisse.\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"card-footer\"\u003e\n              \u003csmall class=\"text-muted\"\u003eLast updated 3 mins ago\u003c/small\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n          \u003cimg src=\"images/avatar.svg\" class=\"card-img-top\" alt=\"...\"\u003e\n          \u003cdiv class=\"card-body\"\u003e\n              \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n              \u003cp class=\"card-text\"\u003ePulvinar leo id risus enim. Bibendum varius tincidunt pellentesque malesuada in.\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"card-footer\"\u003e\n              \u003csmall class=\"text-muted\"\u003eLast updated 3 mins ago\u003c/small\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Card columns --\u003e\n  \u003cdiv class=\"card-columns\"\u003e\n  \u003cdiv class=\"card\"\u003e\n      \u003cimg src=\"images/thumbnail.svg\" class=\"card-img-top\" alt=\"...\"\u003e\n      \u003cdiv class=\"card-body\"\u003e\n          \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n          \u003cp class=\"card-text\"\u003eLorem ipsum dolor sit amet, consectetur adipi elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus.\u003c/p\u003e\n          \u003cp class=\"card-text\"\u003e\u003csmall class=\"text-muted\"\u003eLast updated 3 mins ago\u003c/small\u003e\u003c/p\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card p-3\"\u003e\n      \u003cblockquote class=\"blockquote mb-0 card-body\"\u003e\n          \u003cp\u003eNam eget purus consectetur in vehicula. Nullamr ultrices nisl risus, viverra libero.\u003c/p\u003e\n          \u003cfooter class=\"blockquote-footer\"\u003e\n              \u003csmall class=\"text-muted\"\u003eSomeone famous\u003c/small\u003e\n          \u003c/footer\u003e\n      \u003c/blockquote\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card\"\u003e\n      \u003cimg src=\"images/thumbnail.svg\" class=\"card-img-top\" alt=\"...\"\u003e\n      \u003cdiv class=\"card-body\"\u003e\n          \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n          \u003cp class=\"card-text\"\u003eVestibulum id metus ac nisl bibendum scelerisque non dignissim purus.\u003c/p\u003e\n          \u003cp class=\"card-text\"\u003e\u003csmall class=\"text-muted\"\u003eLast updated 2 mins ago\u003c/small\u003e\u003c/p\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card bg-primary text-white text-center p-3\"\u003e\n      \u003cblockquote class=\"blockquote mb-0\"\u003e\n          \u003cp\u003ePulvinar leo risus vestibulum. Sed diam on sodales eget.\u003c/p\u003e\n          \u003cfooter class=\"blockquote-footer text-white\"\u003e\n              \u003csmall\u003eSomeone famous\u003c/small\u003e\n          \u003c/footer\u003e\n      \u003c/blockquote\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card text-center\"\u003e\n      \u003cdiv class=\"card-body\"\u003e\n          \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n          \u003cp class=\"card-text\"\u003eEnim arcu, interdum dignissim venenatis velc.\u003c/p\u003e\n          \u003cp class=\"card-text\"\u003e\u003csmall class=\"text-muted\"\u003eLast updated 1 mins ago\u003c/small\u003e\u003c/p\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card\"\u003e\n      \u003cimg src=\"images/thumbnail.svg\" class=\"card-img-top\" alt=\"...\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card p-3 text-right\"\u003e\n      \u003cblockquote class=\"blockquote mb-0\"\u003e\n          \u003cp\u003eQuis quam ut magna consequat faucibus. Pellentesque eget nisi suscipit tincidunt. Pellentesque quam.\u003c/p\u003e\n          \u003cfooter class=\"blockquote-footer\"\u003e\n              \u003csmall class=\"text-muted\"\u003eSomeone famous\u003c/small\u003e\n          \u003c/footer\u003e\n      \u003c/blockquote\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card\"\u003e\n      \u003cdiv class=\"card-body\"\u003e\n          \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n          \u003cp class=\"card-text\"\u003eConvallis eget pretium, bibendum non leo. Proien suscipit purus adipiscing dolor gravida fermentum sapien blandit praest interdum vel metus.\u003c/p\u003e\n          \u003cp class=\"card-text\"\u003e\u003csmall class=\"text-muted\"\u003eLast updated 3 mins ago\u003c/small\u003e\u003c/p\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Horizontal Cards --\u003e\n  \u003cdiv class=\"card\" style=\"max-width: 500px;\"\u003e\n      \u003cdiv class=\"row no-gutters\"\u003e\n          \u003cdiv class=\"col-sm-5\" style=\"background: #868e96;\"\u003e\n              \u003cimg src=\"images/avatar.svg\" class=\"card-img-top h-100\" alt=\"...\"\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"col-sm-7\"\u003e\n              \u003cdiv class=\"card-body\"\u003e\n                  \u003ch5 class=\"card-title\"\u003eAlice Liddel\u003c/h5\u003e\n                  \u003cp class=\"card-text\"\u003eAlice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.\u003c/p\u003e\n                  \u003ca href=\"#\" class=\"btn btn-primary stretched-link\"\u003eView Profile\u003c/a\u003e\n              \u003c/div\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Card image overlays --\u003e\n  \u003c!-- use .card-img-overlay class --\u003e\n  \u003cdiv class=\"card text-white\" style=\"width: 350px;\"\u003e\n      \u003cimg src=\"images/avatar.svg\" class=\"card-img-top\" alt=\"...\"\u003e\n      \u003cdiv class=\"card-img-overlay\"\u003e\n          \u003ch5 class=\"card-title\"\u003eAlice Liddel\u003c/h5\u003e\n          \u003cp class=\"card-text\"\u003eAlice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.\u003c/p\u003e\n          \u003ca href=\"#\" class=\"btn btn-primary stretched-link\"\u003eView Profile\u003c/a\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n12. ## Icons\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/icons.jpeg)  \n\u003cdetails\u003e\n    \u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eIcons\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003c!-- Fonts and Icons--\u003e\n  \u003c!-- require font-awesome.min.css --\u003e\n  \u003c!--\n  .fa: base class\n  .fa-globe\n  .fa-search\n  .fa-user\n  .fa-star\n  .fa-calendar\n  and more...\n  --\u003e\n  \u003ch1\u003e\u003ci class=\"fa fa-globe\"\u003e\u003c/i\u003e Hello, world!\u003c/h1\u003e\n  \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003e\u003cspan class=\"fa fa-search\"\u003e\u003c/span\u003e Search\u003c/button\u003e\n  \u003cbutton type=\"submit\" class=\"btn btn-secondary\"\u003e\u003cspan class=\"fa fa-search\"\u003e\u003c/span\u003e Search\u003c/button\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n13. ## Navbars\n    ![navbars.jpeg](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/navbars.jpg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eNav bar\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003c!-- Nav Bar --\u003e\n  \u003cnav class=\"nav\"\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link active\"\u003eHome\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eProfile\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eMessages\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link disabled\" tabindex=\"-1\"\u003eReports\u003c/a\u003e\n  \u003c/nav\u003e\n  \u003chr\u003e\n  \u003c!-- Alighnment of Navbar --\u003e\n  \u003cnav class=\"nav justify-content-center\"\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link active\"\u003eHome\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eProfile\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eMessages\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link disabled\" tabindex=\"-1\"\u003eReports\u003c/a\u003e\n  \u003c/nav\u003e\n  \u003cnav class=\"nav justify-content-end\"\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link active\"\u003eHome\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eProfile\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eMessages\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link disabled\" tabindex=\"-1\"\u003eReports\u003c/a\u003e\n  \u003c/nav\u003e\n  \u003cnav class=\"nav flex-column\"\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link active\"\u003eHome\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eProfile\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eMessages\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link disabled\" tabindex=\"-1\"\u003eReports\u003c/a\u003e\n  \u003c/nav\u003e\n  \u003chr\u003e\n  \u003c!-- Tabs of Nav bar --\u003e\n  \u003cnav class=\"nav nav-tabs\"\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link active\"\u003eHome\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eProfile\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eMessages\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link disabled\" tabindex=\"-1\"\u003eReports\u003c/a\u003e\n  \u003c/nav\u003e\n  \u003c!-- tabs with icons --\u003e\n  \u003cnav class=\"nav nav-tabs\"\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link active\"\u003e\n          \u003ci class=\"fa fa-home\"\u003e\u003c/i\u003e Home\n      \u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003e\n          \u003ci class=\"fa fa-user\"\u003e\u003c/i\u003e Profile\n      \u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003e\n          \u003ci class=\"fa fa-envelope\"\u003e\u003c/i\u003e Messages\n      \u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link disabled\" tabindex=\"-1\"\u003e\n          \u003ci class=\"fa fa-line-chart\"\u003e\u003c/i\u003e Reports\n      \u003c/a\u003e\n  \u003c/nav\u003e\n  \u003chr\u003e\n  \u003c!-- Pill based nav bar --\u003e\n  \u003cnav class=\"nav nav-pills\"\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link active\"\u003eHome\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eProfile\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eMessages\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link disabled\" tabindex=\"-1\"\u003eReports\u003c/a\u003e\n  \u003c/nav\u003e\n  \u003chr\u003e\n  \u003c!-- drop down menus --\u003e\n  \u003cnav class=\"nav nav-tabs\"\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link active\"\u003eHome\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eProfile\u003c/a\u003e\n      \u003cdiv class=\"nav-item dropdown\"\u003e\n          \u003ca href=\"#\" class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\"\u003eMessages\u003c/a\u003e\n          \u003cdiv class=\"dropdown-menu\"\u003e\n              \u003ca href=\"#\" class=\"dropdown-item\"\u003eInbox\u003c/a\u003e\n              \u003ca href=\"#\" class=\"dropdown-item\"\u003eSent\u003c/a\u003e\n              \u003ca href=\"#\" class=\"dropdown-item\"\u003eDrafts\u003c/a\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link disabled\" tabindex=\"-1\"\u003eReports\u003c/a\u003e\n  \u003c/nav\u003e\n  \u003chr\u003e\n  \u003c!-- fill and justify --\u003e\n  \u003cnav class=\"nav nav-pills nav-fill\"\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eHome\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eAbout\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link active\"\u003eExplore Products\u003c/a\u003e\n      \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eContact Us\u003c/a\u003e\n  \u003c/nav\u003e\n  \u003chr\u003e\n  \u003ch2 class=\"text-secondary\"\u003eResponsive Nav Bar\u003c/h2\u003e\n  \u003c!-- Nav Bar Plus+ --\u003e\n  \u003c!-- collapes when used on smaller devices --\u003e\n  \u003cnav class=\"navbar navbar-expand-md navbar-light bg-light\"\u003e\n      \u003ca href=\"#\" class=\"navbar-brand\"\u003eBrand\u003c/a\u003e\n      \u003cbutton type=\"button\" class=\"navbar-toggler\" data-toggle=\"collapse\" data-target=\"#navbarCollapse\"\u003e\n          \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n      \u003c/button\u003e\n\n      \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarCollapse\"\u003e\n          \u003cdiv class=\"navbar-nav\"\u003e\n              \u003ca href=\"#\" class=\"nav-item nav-link active\"\u003eHome\u003c/a\u003e\n              \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eProfile\u003c/a\u003e\n              \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eMessages\u003c/a\u003e\n              \u003ca href=\"#\" class=\"nav-item nav-link disabled\" tabindex=\"-1\"\u003eReports\u003c/a\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"navbar-nav ml-auto\"\u003e\n              \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eLogin\u003c/a\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n  \u003c/nav\u003e\n  \u003c!-- setting logo in navbar (image height needs to be defined) --\u003e\n  \u003cnav class=\"navbar navbar-expand-md navbar-light bg-light\"\u003e\n      \u003ca href=\"#\" class=\"navbar-brand\"\u003e\n          \u003cimg src=\"images/avatar.svg\" height=\"28\" alt=\"CoolBrand\"\u003e\n      \u003c/a\u003e\n      \u003cbutton type=\"button\" class=\"navbar-toggler\" data-toggle=\"collapse\" data-target=\"#navbarCollapse\"\u003e\n          \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n      \u003c/button\u003e\n\n      \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarCollapse\"\u003e\n          \u003cdiv class=\"navbar-nav\"\u003e\n              \u003ca href=\"#\" class=\"nav-item nav-link active\"\u003eHome\u003c/a\u003e\n              \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eProfile\u003c/a\u003e\n              \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eMessages\u003c/a\u003e\n              \u003ca href=\"#\" class=\"nav-item nav-link disabled\" tabindex=\"-1\"\u003eReports\u003c/a\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"navbar-nav ml-auto\"\u003e\n              \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eLogin\u003c/a\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n  \u003c/nav\u003e\n  \u003chr\u003e\n  \u003c!-- adding dropdowns and search bars in Navbar --\u003e\n  \u003cnav class=\"navbar navbar-expand-md navbar-light bg-light\"\u003e\n      \u003ca href=\"#\" class=\"navbar-brand\"\u003eBrand\u003c/a\u003e\n      \u003cbutton type=\"button\" class=\"navbar-toggler\" data-toggle=\"collapse\" data-target=\"#navbarCollapse\"\u003e\n          \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n      \u003c/button\u003e\n\n      \u003cdiv class=\"collapse navbar-collapse justify-content-between\" id=\"navbarCollapse\"\u003e\n          \u003cdiv class=\"navbar-nav\"\u003e\n              \u003ca href=\"#\" class=\"nav-item nav-link active\"\u003eHome\u003c/a\u003e\n              \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eProfile\u003c/a\u003e\n              \u003cdiv class=\"nav-item dropdown\"\u003e\n                  \u003ca href=\"#\" class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\"\u003eMessages\u003c/a\u003e\n                  \u003cdiv class=\"dropdown-menu\"\u003e\n                      \u003ca href=\"#\" class=\"dropdown-item\"\u003eInbox\u003c/a\u003e\n                      \u003ca href=\"#\" class=\"dropdown-item\"\u003eSent\u003c/a\u003e\n                      \u003ca href=\"#\" class=\"dropdown-item\"\u003eDrafts\u003c/a\u003e\n                  \u003c/div\u003e\n              \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cform class=\"form-inline\"\u003e\n              \u003cdiv class=\"input-group\"\u003e\n                  \u003cinput type=\"text\" class=\"form-control\" placeholder=\"Search\"\u003e\n                  \u003cdiv class=\"input-group-append\"\u003e\n                      \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e\u003ci class=\"fa fa-search\"\u003e\u003c/i\u003e\u003c/button\u003e\n                  \u003c/div\u003e\n              \u003c/div\u003e\n          \u003c/form\u003e\n          \u003cdiv class=\"navbar-nav\"\u003e\n              \u003ca href=\"#\" class=\"nav-item nav-link\"\u003eLogin\u003c/a\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n  \u003c/nav\u003e\n  \u003chr\u003e\n  \u003ch2\u003eNav bar coloring\u003c/h2\u003e\n  \u003c!-- Nav bar coloring --\u003e\n  \u003c!--\n\n  --\u003e\n  \u003cnav class=\"navbar navbar-expand-md navbar-dark bg-dark\"\u003e\n      \u003ch3\u003enavbar-dark bg-dark\u003c/h3\u003e\n  \u003c/nav\u003e\n\n  \u003cnav class=\"navbar navbar-dark bg-primary\"\u003e\n      \u003ch3\u003enavbar-dark bg-primary\u003c/h3\u003e\n  \u003c/nav\u003e\n\n  \u003cnav class=\"navbar navbar-light\" style=\"background-color: #ddeeff;\"\u003e\n      \u003ch3\u003enavbar-light\" style=\"background-color: #ddeeff;\"\u003c/h3\u003e\n  \u003c/nav\u003e\n  \u003chr\u003e\n  \u003c!-- Navbar sticky/fixed --\u003e\n  \u003c!--\n  .sticky-top\n  .fixed-bottom\n  --\u003e\n  \u003cnav class=\"navbar navbar-expand-md navbar-dark bg-dark fixed-top\"\u003e\n      \u003ch3\u003efixed top\u003c/h3\u003e\n  \u003c/nav\u003e\n  \u003chr\u003e\n  \u003ch2\u003eBreadCrumbs\u003c/h2\u003e\n  \u003c!-- BreadCrumbs --\u003e\n  \u003cnav\u003e\n      \u003col class=\"breadcrumb\"\u003e\n          \u003cli class=\"breadcrumb-item\"\u003e\u003ca href=\"#\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"breadcrumb-item\"\u003e\u003ca href=\"#\"\u003eProducts\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"breadcrumb-item active\"\u003eAccessories\u003c/li\u003e\n      \u003c/ol\u003e\n  \u003c/nav\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n14. ## Pagination\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/pagination.jpeg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003ePagination\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003c!-- pagination --\u003e\n  \u003cnav\u003e\n      \u003c!--\n      sizing can be added by:\n      .pagination-lg,\n      .pagination-sm\n\n      alignment classes:\n      .justify-content-center,\n      .justify-content-end\n      --\u003e\n      \u003cul class=\"pagination\"\u003e\n          \u003cli class=\"page-item\"\u003e\u003ca href=\"#\" class=\"page-link\"\u003ePrevious\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"page-item\"\u003e\u003ca href=\"#\" class=\"page-link\"\u003e1\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"page-item\"\u003e\u003ca href=\"#\" class=\"page-link\"\u003e2\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"page-item\"\u003e\u003ca href=\"#\" class=\"page-link\"\u003e3\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"page-item\"\u003e\u003ca href=\"#\" class=\"page-link\"\u003e4\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"page-item\"\u003e\u003ca href=\"#\" class=\"page-link\"\u003e5\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"page-item\"\u003e\u003ca href=\"#\" class=\"page-link\"\u003eNext\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n  \u003c/nav\u003e\n  \u003c!-- disable --\u003e\n  \u003cnav\u003e\n      \u003cul class=\"pagination\"\u003e\n          \u003cli class=\"page-item disabled\"\u003e\u003ca href=\"#\" class=\"page-link\" tabindex=\"-1\"\u003ePrevious\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"page-item active\"\u003e\u003ca href=\"#\" class=\"page-link\"\u003e1\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"page-item\"\u003e\u003ca href=\"#\" class=\"page-link\"\u003e2\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"page-item\"\u003e\u003ca href=\"#\" class=\"page-link\"\u003e3\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"page-item\"\u003e\u003ca href=\"#\" class=\"page-link\"\u003e4\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"page-item\"\u003e\u003ca href=\"#\" class=\"page-link\"\u003e5\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"page-item\"\u003e\u003ca href=\"#\" class=\"page-link\"\u003eNext\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n  \u003c/nav\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n15. ## Badges\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/badges.jpeg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eBadges\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003c!-- Badges --\u003e\n  \u003ch1\u003eBootstrap heading \u003cspan class=\"badge badge-secondary\"\u003eNew\u003c/span\u003e\u003c/h1\u003e\n  \u003ch2\u003eBootstrap heading \u003cspan class=\"badge badge-secondary\"\u003eNew\u003c/span\u003e\u003c/h2\u003e\n  \u003ch3\u003eBootstrap heading \u003cspan class=\"badge badge-secondary\"\u003eNew\u003c/span\u003e\u003c/h3\u003e\n  \u003ch4\u003eBootstrap heading \u003cspan class=\"badge badge-secondary\"\u003eNew\u003c/span\u003e\u003c/h4\u003e\n  \u003ch5\u003eBootstrap heading \u003cspan class=\"badge badge-secondary\"\u003eNew\u003c/span\u003e\u003c/h5\u003e\n  \u003ch6\u003eBootstrap heading \u003cspan class=\"badge badge-secondary\"\u003eNew\u003c/span\u003e\u003c/h6\u003e\n  \u003chr\u003e\n  \u003c!-- Badge colors --\u003e\n  \u003cspan class=\"badge badge-primary\"\u003ePrimary\u003c/span\u003e\n  \u003cspan class=\"badge badge-secondary\"\u003eSecondary\u003c/span\u003e\n  \u003cspan class=\"badge badge-success\"\u003eSuccess\u003c/span\u003e\n  \u003cspan class=\"badge badge-danger\"\u003eDanger\u003c/span\u003e\n  \u003cspan class=\"badge badge-warning\"\u003eWarning\u003c/span\u003e\n  \u003cspan class=\"badge badge-info\"\u003eInfo\u003c/span\u003e\n  \u003cspan class=\"badge badge-dark\"\u003eDark\u003c/span\u003e\n  \u003cspan class=\"badge badge-light\"\u003eLight\u003c/span\u003e\n  \u003chr\u003e\n  \u003c!-- Badge pilling --\u003e\n  \u003cspan class=\"badge badge-pill badge-primary\"\u003ePrimary\u003c/span\u003e\n  \u003cspan class=\"badge badge-pill badge-secondary\"\u003eSecondary\u003c/span\u003e\n  \u003cspan class=\"badge badge-pill badge-success\"\u003eSuccess\u003c/span\u003e\n  \u003cspan class=\"badge badge-pill badge-danger\"\u003eDanger\u003c/span\u003e\n  \u003cspan class=\"badge badge-pill badge-warning\"\u003eWarning\u003c/span\u003e\n  \u003cspan class=\"badge badge-pill badge-info\"\u003eInfo\u003c/span\u003e\n  \u003cspan class=\"badge badge-pill badge-dark\"\u003eDark\u003c/span\u003e\n  \u003cspan class=\"badge badge-pill badge-light\"\u003eLight\u003c/span\u003e\n  \u003chr\u003e\n  \u003c!-- Counter Badges --\u003e\n  \u003cul class=\"nav nav-pills\"\u003e\n      \u003cli class=\"nav-item\"\u003e\n          \u003ca href=\"#\" class=\"nav-link\"\u003eHome\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"nav-item\"\u003e\n          \u003ca href=\"#\" class=\"nav-link\"\u003eProfile\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"nav-item\"\u003e\n          \u003ca href=\"#\" class=\"nav-link active\"\u003eMessages \u003cspan class=\"badge badge-light\"\u003e24\u003c/span\u003e\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"nav-item\"\u003e\n          \u003ca href=\"#\" class=\"nav-link\"\u003eNotification \u003cspan class=\"badge badge-primary\"\u003e5\u003c/span\u003e\u003c/a\u003e\n      \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n16. ## Progress-Bars\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/progress-bar.jpeg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eProgress-bar\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003c!-- Progress bar --\u003e\n  \u003cdiv class=\"progress\"\u003e\n      \u003cdiv class=\"progress-bar\" style=\"width: 50%\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- progress bar with label --\u003e\n  \u003cdiv class=\"progress\"\u003e\n      \u003cdiv class=\"progress-bar\" style=\"width: 60%\"\u003e\n          60%\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- If showing percentage --\u003e\n  \u003cdiv class=\"progress\"\u003e\n      \u003cdiv class=\"progress-bar\" style=\"min-width: 20px;\"\u003e\n          0%\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003cdiv class=\"progress\"\u003e\n      \u003cdiv class=\"progress-bar\" style=\"min-width: 20px; width: 2%;\"\u003e\n          2%\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Height of Progress Bar --\u003e\n  \u003c!-- Progress bar with 1px height --\u003e\n  \u003cdiv class=\"progress\" style=\"height: 1px;\"\u003e\n      \u003cdiv class=\"progress-bar\" style=\"width: 50%;\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Progress bar with 20px height --\u003e\n  \u003cdiv class=\"progress\" style=\"height: 20px;\"\u003e\n      \u003cdiv class=\"progress-bar\" style=\"width: 50%;\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Striped progress bar --\u003e\n  \u003cdiv class=\"progress\"\u003e\n      \u003cdiv class=\"progress-bar progress-bar-striped\" style=\"width: 60%;\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Animated progress bar --\u003e\n  \u003cdiv class=\"progress\"\u003e\n      \u003cdiv class=\"progress-bar progress-bar-striped progress-bar-animated\" style=\"width: 60%\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Stacked progress bar --\u003e\n  \u003cdiv class=\"progress\"\u003e\n      \u003cdiv class=\"progress-bar bg-success\" style=\"width: 40%\"\u003e\n          Program Files (40%)\n      \u003c/div\u003e\n      \u003cdiv class=\"progress-bar bg-warning\" style=\"width: 25%\"\u003e\n          Residual Files (25%)\n      \u003c/div\u003e\n      \u003cdiv class=\"progress-bar bg-danger\" style=\"width: 15%\"\u003e\n          Junk Files (15%)\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Coloring progress bar --\u003e\n  \u003cdiv class=\"progress\"\u003e\n      \u003cdiv class=\"progress-bar bg-info\" style=\"width: 20%\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"progress\"\u003e\n      \u003cdiv class=\"progress-bar bg-success\" style=\"width: 40%\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"progress\"\u003e\n      \u003cdiv class=\"progress-bar bg-warning\" style=\"width: 80%\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"progress\"\u003e\n      \u003cdiv class=\"progress-bar bg-danger\" style=\"width: 90%\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n17. ## Spinners\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/spinners.jpeg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eSpinners\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003c!-- Spinners--\u003e\n  \u003cdiv class=\"spinner-border\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003c!-- Growing spinners --\u003e\n  \u003cdiv class=\"spinner-grow\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003c!-- Sizing spinners --\u003e\n  \u003cdiv class=\"spinner-border spinner-border-sm\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-grow spinner-grow-sm\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-border\" style=\"width: 40px; height: 40px;\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-grow\" style=\"width: 40px; height: 40px;\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Colored spinners --\u003e\n  \u003cdiv class=\"spinner-border text-primary\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-border text-secondary\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-border text-success\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-border text-danger\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-border text-warning\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-border text-info\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-border text-dark\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-border text-light\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003c!-- colored growing spinners --\u003e\n  \u003cdiv class=\"spinner-grow text-primary\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-grow text-secondary\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-grow text-success\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-grow text-danger\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-grow text-warning\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-grow text-info\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-grow text-light\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"spinner-grow text-dark\"\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Spinners in buttons --\u003e\n  \u003c!-- Border spinners inside buttons --\u003e\n  \u003cbutton class=\"btn btn-primary\" type=\"button\" disabled\u003e\n      \u003cspan class=\"spinner-border spinner-border-sm\"\u003e\u003c/span\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/button\u003e\n  \u003cbutton class=\"btn btn-primary\" type=\"button\" disabled\u003e\n      \u003cspan class=\"spinner-border spinner-border-sm\"\u003e\u003c/span\u003e\n      Loading...\n  \u003c/button\u003e\n  \u003c!-- Growing spinners inside buttons --\u003e\n  \u003cbutton class=\"btn btn-primary\" type=\"button\" disabled\u003e\n      \u003cspan class=\"spinner-grow spinner-grow-sm\"\u003e\u003c/span\u003e\n      \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n  \u003c/button\u003e\n  \u003cbutton class=\"btn btn-primary\" type=\"button\" disabled\u003e\n      \u003cspan class=\"spinner-grow spinner-grow-sm\"\u003e\u003c/span\u003e\n      Loading...\n  \u003c/button\u003e\n  \u003chr\u003e\n  \u003c!-- Alignment of spinners --\u003e\n  \u003c!-- Center alignment using flex utilities --\u003e\n  \u003cdiv class=\"d-flex justify-content-center\"\u003e\n      \u003cdiv class=\"spinner-border\" role=\"status\"\u003e\n          \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003c!-- Center alignment using text alignment utilities --\u003e\n  \u003cdiv class=\"text-center\"\u003e\n      \u003cdiv class=\"spinner-border\" role=\"status\"\u003e\n          \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003c!-- Right alignment using float utilities --\u003e\n  \u003cdiv class=\"clearfix\"\u003e\n      \u003cdiv class=\"spinner-border float-right\" role=\"status\"\u003e\n          \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n18. ## Jumbotron\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/jumbotron.jpg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eJumbotron\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003c!-- Jumbotron --\u003e\n  \u003cdiv class=\"jumbotron\"\u003e\n      \u003ch1\u003eLearn to Create Websites\u003c/h1\u003e\n      \u003cp class=\"lead\"\u003eIn today's world internet is the most popular way of connecting with the people. At \u003ca href=\"https://www.tutorialrepublic.com\" target=\"_blank\"\u003etutorialrepublic.com\u003c/a\u003e you will learn the essential of web development technologies along with real life practice example, so that you can create your own website to connect with the people around the world.\u003c/p\u003e\n      \u003cp\u003e\u003ca href=\"https://www.tutorialrepublic.com\" target=\"_blank\" class=\"btn btn-primary btn-lg\"\u003eStart learning today\u003c/a\u003e\u003c/p\u003e\n  \u003c/div\u003e\n  \u003c!-- Full Page Jumbotron --\u003e\n  \u003cdiv class=\"jumbotron jumbotron-fluid\"\u003e\n      \u003cdiv class=\"container\"\u003e\n          \u003ch1\u003eLearn to Create Websites\u003c/h1\u003e\n          \u003cp class=\"lead\"\u003eIn today's world internet is the most popular way of connecting with the people...\u003c/p\u003e\n          \u003cp\u003e\u003ca href=\"#\" class=\"btn btn-primary btn-lg\"\u003eStart learning today\u003c/a\u003e\u003c/p\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n19. ## Helper-Classes\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/helper-classes.jpg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ctitle\u003eHelper Classes\u003c/title\u003e\n    \u003c!-- Bootstrap CSS file --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css\"\u003e\n    \u003c!-- Icons and font styling CSS file --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css\"\u003e\n    \u003cstyle\u003e\n      #border-classes {\n        display: inline-block;\n        width: 100px;\n        height: 100px;\n        margin: 10px;\n        background-color: #f5f5f5;\n      }\n      #spacing-classes {\n        padding: 15px;\n        font-size: 18px;\n        background: #dbdfe5;\n      }\n      #float-classes {\n        font-size: 18px;\n        padding: 20px;\n        background: #abb1b8;\n      }\n      #sizing-classes {\n        background: #dbdfe5;\n        margin: 10px;\n      }\n    \u003c/style\u003e\n\u003c/head\u003e\n\u003ch1\u003eHelper Classes\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003ch2\u003eColor Classes\u003c/h2\u003e\n  \u003cp class=\"text-primary\"\u003e.text-primary\u003c/p\u003e\n  \u003cp class=\"text-secondary\"\u003e.text-secondary\u003c/p\u003e\n  \u003cp class=\"text-success\"\u003e.text-success\u003c/p\u003e\n  \u003cp class=\"text-danger\"\u003e.text-danger\u003c/p\u003e\n  \u003cp class=\"text-warning\"\u003e.text-warning\u003c/p\u003e\n  \u003cp class=\"text-info\"\u003e.text-info\u003c/p\u003e\n  \u003cp class=\"text-light bg-dark\"\u003e.text-light\u003c/p\u003e\n  \u003cp class=\"text-dark\"\u003e.text-dark\u003c/p\u003e\n  \u003cp class=\"text-body\"\u003e.text-body\u003c/p\u003e\n  \u003cp class=\"text-muted\"\u003e.text-muted\u003c/p\u003e\n  \u003cp class=\"text-white bg-dark\"\u003e.text-white\u003c/p\u003e\n  \u003cp class=\"text-black-50\"\u003e.text-black-50\u003c/p\u003e\n  \u003cp class=\"text-white-50 bg-dark\"\u003e.text-white-50\u003c/p\u003e\n  \u003chr\u003e\n  \u003ch2\u003eBackground Color Classes\u003c/h2\u003e\n  \u003cdiv class=\"p-3 mb-2 bg-primary text-white\"\u003e.bg-primary\u003c/div\u003e\n  \u003cdiv class=\"p-3 mb-2 bg-secondary text-white\"\u003e.bg-secondary\u003c/div\u003e\n  \u003cdiv class=\"p-3 mb-2 bg-success text-white\"\u003e.bg-success\u003c/div\u003e\n  \u003cdiv class=\"p-3 mb-2 bg-danger text-white\"\u003e.bg-danger\u003c/div\u003e\n  \u003cdiv class=\"p-3 mb-2 bg-warning text-dark\"\u003e.bg-warning\u003c/div\u003e\n  \u003cdiv class=\"p-3 mb-2 bg-info text-white\"\u003e.bg-info\u003c/div\u003e\n  \u003cdiv class=\"p-3 mb-2 bg-light text-dark\"\u003e.bg-light\u003c/div\u003e\n  \u003cdiv class=\"p-3 mb-2 bg-dark text-white\"\u003e.bg-dark\u003c/div\u003e\n  \u003cdiv class=\"p-3 mb-2 bg-white text-dark\"\u003e.bg-white\u003c/div\u003e\n  \u003cdiv class=\"p-3 mb-2 bg-transparent text-dark\"\u003e.bg-transparent\u003c/div\u003e\n  \u003chr\u003e\n  \u003ch2\u003eText Alignment Classes\u003c/h2\u003e\n  \u003cp\u003e.text-left: Align the text to the left.\u003c/p\u003e\n  \u003cp\u003e.text-center: Align the text to the center.\u003c/p\u003e\n  \u003cp\u003e.text-right: Align the text to the right.\u003c/p\u003e\n  \u003cp\u003e.text-justify: Justify the text content.\u003c/p\u003e\n  \u003cp\u003e.text-wrap: Wrap the overflowing text.\u003c/p\u003e\n  \u003cp\u003e.text-nowrap: Prevent text from wrapping.\u003c/p\u003e\n  \u003cp\u003e.text-truncate: Truncate the text with an ellipsis.\u003c/p\u003e\n  \u003cp\u003e.text-break: Break the long words to prevent overflow.\u003c/p\u003e\n  \u003cp\u003e.text-lowercase: Transform the text to lowercase.\u003c/p\u003e\n  \u003cp\u003e.text-uppercase: Transform the text to uppercase.\u003c/p\u003e\n  \u003cp\u003e.text-capitalize: Capitalize the first letter of each word.\u003c/p\u003e\n  \u003cp\u003e.font-weight-bold: Set the font-weight of an element to bold.\u003c/p\u003e\n  \u003cp\u003e.font-weight-bolder: Set the font-weight of an element to bolder (relative to the parent).\u003c/p\u003e\n  \u003cp\u003e.font-weight-normal: Set the font-weight of an element to normal.\u003c/p\u003e\n  \u003cp\u003e.font-weight-light: Set the light font-weight for an element.\u003c/p\u003e\n  \u003cp\u003e.font-weight-lighter: Set the lighter font-weight for an element (relative to the parent).\u003c/p\u003e\n  \u003cp\u003e.font-italic: Set the font-style of an element to italic.\u003c/p\u003e\n  \u003cp\u003e.text-monospace: Set the font-family of an element to monospace font (fixed-width)\u003c/p\u003e\n  \u003cp\u003e.text-reset: Reset the color of a text or link (inherits the color from its parent).\u003c/p\u003e\n  \u003cp\u003e.text-decoration-none: Remove the text decoration such as underline from a text.\u003c/p\u003e\n  \u003chr\u003e\n  \u003ch2\u003eBorder Classes\u003c/h2\u003e\n  \u003cspan id=\"border-classes\" class=\"border\"\u003e\u003c/span\u003e\n  \u003cspan id=\"border-classes\" class=\"border-top\"\u003e\u003c/span\u003e\n  \u003cspan id=\"border-classes\" class=\"border-right\"\u003e\u003c/span\u003e\n  \u003cspan id=\"border-classes\" class=\"border-bottom\"\u003e\u003c/span\u003e\n  \u003cspan id=\"border-classes\" class=\"border-left\"\u003e\u003c/span\u003e\n  \u003chr\u003e\n  \u003ch2\u003eSpacing Classes\u003c/h2\u003e\n  \u003cdiv id=\"spacing-classes\" class=\"mt-0\"\u003e.mt-0\u003c/div\u003e\n  \u003cdiv id=\"spacing-classes\" class=\"mt-1\"\u003e.mt-1\u003c/div\u003e\n  \u003cdiv id=\"spacing-classes\" class=\"mt-2\"\u003e.mt-2\u003c/div\u003e\n  \u003cdiv id=\"spacing-classes\" class=\"mt-3\"\u003e.mt-3\u003c/div\u003e\n  \u003cdiv id=\"spacing-classes\" class=\"mt-4\"\u003e.mt-4\u003c/div\u003e\n  \u003cdiv id=\"spacing-classes\" class=\"mt-5\"\u003e.mt-5\u003c/div\u003e\n  \u003cdiv id=\"spacing-classes\" class=\"mt-auto\"\u003e.mt-auto\u003c/div\u003e\n  \u003chr\u003e\n  \u003ch2\u003eFloat Classes\u003c/h2\u003e\n  \u003cdiv class=\"wrapper clearfix\"\u003e\n      \u003cdiv id=\"float-classes\" class=\"float-left\"\u003e.float-left\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"wrapper clearfix\"\u003e\n      \u003cdiv id=\"float-classes\" class=\"float-right\"\u003e.float-right\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"wrapper clearfix\"\u003e\n      \u003cdiv id=\"float-classes\" class=\"float-left\"\u003e.float-left\u003c/div\u003e\n      \u003cdiv id=\"float-classes\" class=\"float-right\"\u003e.float-right\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"wrapper clearfix\"\u003e\n      \u003cdiv id=\"float-classes\" class=\"float-none\" style=\"float: right;\"\u003e.float-none\u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003ch2\u003eShadow Classes\u003c/h2\u003e\n  \u003cdiv class=\"shadow-none p-3 mb-5 bg-light rounded\"\u003eNo shadow\u003c/div\u003e\n  \u003cdiv class=\"shadow-sm p-3 mb-5 bg-white rounded\"\u003eSmall shadow\u003c/div\u003e\n  \u003cdiv class=\"shadow p-3 mb-5 bg-white rounded\"\u003eRegular shadow\u003c/div\u003e\n  \u003cdiv class=\"shadow-lg p-3 mb-5 bg-white rounded\"\u003eLarger shadow\u003c/div\u003e\n  \u003chr\u003e\n  \u003ch2\u003eSizing Classes\u003c/h2\u003e\n  \u003cdiv id=\"sizing-classes\" class=\"w-50 p-3\"\u003ew-50 p-3 (Width 50%)\u003c/div\u003e\n  \u003cdiv id=\"sizing-classes\" class=\"w-75 p-3\"\u003ew-75 p-3 (Width 75%)\u003c/div\u003e\n  \u003cdiv id=\"sizing-classes\" class=\"w-100 p-3\"\u003ew-100 p-3 (Width 100%)\u003c/div\u003e\n  \u003cdiv id=\"sizing-classes\" class=\"w-auto p-3\"\u003ew-auto p-3 (Width auto)\u003c/div\u003e\n  \u003chr\u003e\n  \u003ch2\u003eVertical Alignment Classes\u003c/h2\u003e\n  \u003ch5\u003eWith inline elements:\u003c/h5\u003e\n  \u003cp\u003e\n      \u003cspan class=\"align-baseline\"\u003ebaseline\u003c/span\u003e\n      \u003cspan class=\"align-top\"\u003etop\u003c/span\u003e\n      \u003cspan class=\"align-middle\"\u003emiddle\u003c/span\u003e\n      \u003cspan class=\"align-bottom\"\u003ebottom\u003c/span\u003e\n      \u003cspan class=\"align-text-top\"\u003etext-top\u003c/span\u003e\n      \u003cspan class=\"align-text-bottom\"\u003etext-bottom\u003c/span\u003e\n  \u003c/p\u003e\n  \u003chr\u003e\n  \u003ch5\u003eWith table cells:\u003c/h5\u003e\n  \u003ctable class=\"table-bordered\" style=\"height: 100px;\"\u003e\n      \u003ctbody\u003e\n          \u003ctr\u003e\n              \u003ctd class=\"align-baseline\"\u003ebaseline\u003c/td\u003e\n              \u003ctd class=\"align-top\"\u003etop\u003c/td\u003e\n              \u003ctd class=\"align-middle\"\u003emiddle\u003c/td\u003e\n              \u003ctd class=\"align-bottom\"\u003ebottom\u003c/td\u003e\n              \u003ctd class=\"align-text-top\"\u003etext-top\u003c/td\u003e\n              \u003ctd class=\"align-text-bottom\"\u003etext-bottom\u003c/td\u003e\n          \u003c/tr\u003e\n      \u003c/tbody\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n\n20. ## Modals\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/modals.jpeg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eModals\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003c!-- Modals --\u003e\n\n  \u003cdiv id=\"myModal\" class=\"modal\" tabindex=\"-1\"\u003e\n      \u003c!-- sets width, horizontal-alignment, and vertical alignment\n      .modal-sm: small,\n      .modal-lg: large,\n      .modal-xl: extra-large\n      .modal-dialog-centered: vertically centers,\n      .modal-dialog-scrollable: make modal scrollable,\n      *Grids can be used inside modals\n      --\u003e\n      \u003cdiv class=\"modal-dialog modal-sm\"\u003e\n          \u003c!-- sets sytles: text, background, borders, round corners, etc... --\u003e\n          \u003cdiv class=\"modal-content\"\u003e\n              \u003cdiv class=\"modal-header\"\u003e\n                  \u003ch5 class=\"modal-title\"\u003eConfirmation\u003c/h5\u003e\n                  \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"modal\"\u003e\u0026times;\u003c/button\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"modal-body\"\u003e\n                  \u003cp\u003eDo you want to save changes to this document before closing?\u003c/p\u003e\n                  \u003cp class=\"text-secondary\"\u003e\u003csmall\u003eIf you don't save, your changes will be lost.\u003c/small\u003e\u003c/p\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"modal-footer\"\u003e\n                  \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\"\u003eCancel\u003c/button\u003e\n                  \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eSave changes\u003c/button\u003e\n              \u003c/div\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003c!-- to trigger modal --\u003e\n  \u003ca href=\"#myModal\" class=\"btn btn-lg btn-primary\" data-toggle=\"modal\"\u003eLaunch Demo Modal\u003c/a\u003e\n  \u003chr\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n21. ## Dropdowns\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/dropdown.jpeg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eDropdown\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003c!-- Drop Down menus --\u003e\n  \u003cdiv class=\"dropdown\"\u003e\n      \u003ca href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"\u003eDropdown\u003c/a\u003e\n      \u003cdiv class=\"dropdown-menu\"\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eAction\u003c/a\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eAnother action\u003c/a\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003c!-- Dropup menu --\u003e\n  \u003cdiv class=\"btn-group dropup\"\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\"\u003eDropup\u003c/button\u003e\n      \u003cdiv class=\"dropdown-menu\"\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eAction\u003c/a\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eAnother action\u003c/a\u003e\n          \u003cdiv class=\"dropdown-divider\"\u003e\u003c/div\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eSeparated link\u003c/a\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Dropleft menu --\u003e\n  \u003cdiv class=\"btn-group dropleft\"\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\"\u003eDropleft\u003c/button\u003e\n      \u003cdiv class=\"dropdown-menu\"\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eAction\u003c/a\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eAnother action\u003c/a\u003e\n          \u003cdiv class=\"dropdown-divider\"\u003e\u003c/div\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eSeparated link\u003c/a\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Dropright menu --\u003e\n  \u003cdiv class=\"btn-group dropright\"\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\"\u003eDropright\u003c/button\u003e\n      \u003cdiv class=\"dropdown-menu\"\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eAction\u003c/a\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eAnother action\u003c/a\u003e\n          \u003cdiv class=\"dropdown-divider\"\u003e\u003c/div\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eSeparated link\u003c/a\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- dropdown with headers --\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\"\u003eProducts\u003c/button\u003e\n      \u003cdiv class=\"dropdown-menu\"\u003e\n          \u003cdiv class=\"dropdown-header\"\u003eELECTRONICS\u003c/div\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eMobiles\u003c/a\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eTablets\u003c/a\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eLaptops\u003c/a\u003e\n          \u003cdiv class=\"dropdown-header\"\u003eFASHION\u003c/div\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eClothing\u003c/a\u003e\n          \u003ca href=\"#\" class=\"dropdown-item\"\u003eSunglasses\u003c/a\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n22. ## Alerts\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/alerts.jpg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eAlerts\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003c!-- Alerts --\u003e\n  \u003c!-- Success Alert --\u003e\n  \u003cdiv class=\"alert alert-success alert-dismissible fade show\"\u003e\n      \u003cstrong\u003eSuccess!\u003c/strong\u003e Your message has been sent successfully.\n      \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"alert\"\u003e\u0026times;\u003c/button\u003e\n  \u003c/div\u003e\n  \u003c!-- Error Alert --\u003e\n  \u003cdiv class=\"alert alert-danger alert-dismissible fade show\"\u003e\n      \u003cstrong\u003eError!\u003c/strong\u003e A problem has been occurred while submitting your data.\n      \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"alert\"\u003e\u0026times;\u003c/button\u003e\n  \u003c/div\u003e\n  \u003c!-- Warning Alert --\u003e\n  \u003cdiv class=\"alert alert-warning alert-dismissible fade show\"\u003e\n      \u003cstrong\u003eWarning!\u003c/strong\u003e There was a problem with your network connection.\n      \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"alert\"\u003e\u0026times;\u003c/button\u003e\n  \u003c/div\u003e\n  \u003c!-- Info Alert --\u003e\n  \u003cdiv class=\"alert alert-info alert-dismissible fade show\"\u003e\n      \u003cstrong\u003eInfo!\u003c/strong\u003e Please read the comments carefully.\n      \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"alert\"\u003e\u0026times;\u003c/button\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Primary Alert --\u003e\n  \u003cdiv class=\"alert alert-primary alert-dismissible fade show\"\u003e\n      \u003cstrong\u003ePrimary!\u003c/strong\u003e This is a simple primary alert box.\n      \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"alert\"\u003e\u0026times;\u003c/button\u003e\n  \u003c/div\u003e\n  \u003c!-- Secondary Alert --\u003e\n  \u003cdiv class=\"alert alert-secondary alert-dismissible fade show\"\u003e\n      \u003cstrong\u003eSecondary!\u003c/strong\u003e This is a simple secondary alert box.\n      \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"alert\"\u003e\u0026times;\u003c/button\u003e\n  \u003c/div\u003e\n  \u003c!-- Dark Alert --\u003e\n  \u003cdiv class=\"alert alert-dark alert-dismissible fade show\"\u003e\n      \u003cstrong\u003eDark!\u003c/strong\u003e This is a simple dark alert box.\n      \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"alert\"\u003e\u0026times;\u003c/button\u003e\n  \u003c/div\u003e\n  \u003c!-- Light Alert --\u003e\n  \u003cdiv class=\"alert alert-light alert-dismissible fade show\"\u003e\n      \u003cstrong\u003eLight!\u003c/strong\u003e This is a simple light alert box.\n      \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"alert\"\u003e\u0026times;\u003c/button\u003e\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003c!-- Additional information --\u003e\n  \u003cdiv class=\"alert alert-warning alert-dismissible fade show\"\u003e\n      \u003ch4 class=\"alert-heading\"\u003e\u003ci class=\"fa fa-warning\"\u003e\u003c/i\u003e Warning!\u003c/h4\u003e\n      \u003cp\u003ePlease enter a valid value in all the required fields before proceeding. If you need any help just place the mouse pointer above info icon next to the form field.\u003c/p\u003e\n      \u003chr\u003e\n      \u003cp class=\"mb-0\"\u003eOnce you have filled all the details, click on the 'Next' button to continue.\u003c/p\u003e\n      \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"alert\"\u003e\u0026times;\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n23. ## Accordian\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/accordian.jpg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eAccordian\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003c!-- Accordian --\u003e\n  \u003cdiv class=\"accordion\" id=\"myAccordion\"\u003e\n      \u003cdiv class=\"card\"\u003e\n          \u003cdiv class=\"card-header\" id=\"headingOne\"\u003e\n              \u003ch2 class=\"mb-0\"\u003e\n                  \u003cbutton type=\"button\" class=\"btn btn-link\" data-toggle=\"collapse\" data-target=\"#collapseOne\"\u003e1. What is HTML?\u003c/button\u003e\n              \u003c/h2\u003e\n          \u003c/div\u003e\n          \u003cdiv id=\"collapseOne\" class=\"collapse\" aria-labelledby=\"headingOne\" data-parent=\"#myAccordion\"\u003e\n              \u003cdiv class=\"card-body\"\u003e\n                  \u003cp\u003eHTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. \u003ca href=\"https://www.tutorialrepublic.com/html-tutorial/\" target=\"_blank\"\u003eLearn more.\u003c/a\u003e\u003c/p\u003e\n              \u003c/div\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n          \u003cdiv class=\"card-header\" id=\"headingTwo\"\u003e\n              \u003ch2 class=\"mb-0\"\u003e\n                  \u003cbutton type=\"button\" class=\"btn btn-link collapsed\" data-toggle=\"collapse\" data-target=\"#collapseTwo\"\u003e2. What is Bootstrap?\u003c/button\u003e\n              \u003c/h2\u003e\n          \u003c/div\u003e\n          \u003cdiv id=\"collapseTwo\" class=\"collapse show\" aria-labelledby=\"headingTwo\" data-parent=\"#myAccordion\"\u003e\n              \u003cdiv class=\"card-body\"\u003e\n                  \u003cp\u003eBootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. \u003ca href=\"https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/\" target=\"_blank\"\u003eLearn more.\u003c/a\u003e\u003c/p\u003e\n              \u003c/div\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n          \u003cdiv class=\"card-header\" id=\"headingThree\"\u003e\n              \u003ch2 class=\"mb-0\"\u003e\n                  \u003cbutton type=\"button\" class=\"btn btn-link collapsed\" data-toggle=\"collapse\" data-target=\"#collapseThree\"\u003e3. What is CSS?\u003c/button\u003e\n              \u003c/h2\u003e\n          \u003c/div\u003e\n          \u003cdiv id=\"collapseThree\" class=\"collapse\" aria-labelledby=\"headingThree\" data-parent=\"#myAccordion\"\u003e\n              \u003cdiv class=\"card-body\"\u003e\n                  \u003cp\u003eCSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. \u003ca href=\"https://www.tutorialrepublic.com/css-tutorial/\" target=\"_blank\"\u003eLearn more.\u003c/a\u003e\u003c/p\u003e\n              \u003c/div\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n24. ## Carousal\n    ![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/carousal.jpeg)  \n\u003cdetails\u003e\n\u003csummary\u003eView code\u003c/summary\u003e\n    \n```html\n\u003ch1\u003eCarousal\u003c/h1\u003e\n\u003cdiv class=\"container-fluid\"\u003e \u003c!-- Acts as the wrapper for the page content--\u003e\n  \u003c!-- Carousel --\u003e\n  \u003cdiv id=\"myCarousel\" class=\"carousel slide\" data-ride=\"carousel\"\u003e\n      \u003c!-- Carousel indicators --\u003e\n      \u003col class=\"carousel-indicators\"\u003e\n          \u003cli data-target=\"#myCarousel\" data-slide-to=\"0\" class=\"active\"\u003e\u003c/li\u003e\n          \u003cli data-target=\"#myCarousel\" data-slide-to=\"1\"\u003e\u003c/li\u003e\n          \u003cli data-target=\"#myCarousel\" data-slide-to=\"2\"\u003e\u003c/li\u003e\n      \u003c/ol\u003e\n      \u003c!-- Wrapper for carousel items --\u003e\n      \u003cdiv class=\"carousel-inner bg-primary\"\u003e\n          \u003cdiv class=\"carousel-item active text-center\"\u003e\n              \u003cimg src=\"images/avatar.svg\" height=300px alt=\"First Slide\"\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"carousel-item text-center\"\u003e\n              \u003cimg src=\"images/avatar.svg\" height=300px alt=\"Second Slide\"\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"carousel-item text-center\"\u003e\n              \u003cimg src=\"images/avatar.svg\" height=300px alt=\"Third Slide\"\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n      \u003c!-- Carousel controls --\u003e\n      \u003ca class=\"carousel-control-prev\" href=\"#myCarousel\" data-slide=\"prev\"\u003e\n          \u003cspan class=\"carousel-control-prev-icon\"\u003e\u003c/span\u003e\n      \u003c/a\u003e\n      \u003ca class=\"carousel-control-next\" href=\"#myCarousel\" data-slide=\"next\"\u003e\n          \u003cspan class=\"carousel-control-next-icon\"\u003e\u003c/span\u003e\n      \u003c/a\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n    \n\u003c/details\u003e\n\n\n### Details\nCreated with the help of [www.tutorialrepublic.com](https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frasbeetech%2Fbootstrap-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frasbeetech%2Fbootstrap-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frasbeetech%2Fbootstrap-test/lists"}