{"id":15101546,"url":"https://github.com/learnwithfair/bootstrap-documentation","last_synced_at":"2026-01-24T10:36:05.622Z","repository":{"id":237051689,"uuid":"793681118","full_name":"learnwithfair/bootstrap-documentation","owner":"learnwithfair","description":"bootstrap-documentation with [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]","archived":false,"fork":false,"pushed_at":"2024-04-29T19:14:35.000Z","size":184,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T11:13:37.351Z","etag":null,"topics":["bootstrap","bootstrap4","bootstrap5","learn-with-fair","learnwithfair","rahatul-rabbi","rahatulrabbi","web-development"],"latest_commit_sha":null,"homepage":"","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/learnwithfair.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":"2024-04-29T17:05:44.000Z","updated_at":"2025-01-01T18:30:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"2e0e4f30-8ba6-4749-b680-d3c2c4df7aee","html_url":"https://github.com/learnwithfair/bootstrap-documentation","commit_stats":null,"previous_names":["learnwithfair/bootstrap-documentation"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/learnwithfair/bootstrap-documentation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fbootstrap-documentation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fbootstrap-documentation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fbootstrap-documentation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fbootstrap-documentation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/learnwithfair","download_url":"https://codeload.github.com/learnwithfair/bootstrap-documentation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fbootstrap-documentation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28725374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-24T10:24:43.181Z","status":"ssl_error","status_checked_at":"2026-01-24T10:24:36.112Z","response_time":89,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["bootstrap","bootstrap4","bootstrap5","learn-with-fair","learnwithfair","rahatul-rabbi","rahatulrabbi","web-development"],"created_at":"2024-09-25T18:25:16.780Z","updated_at":"2026-01-24T10:36:05.605Z","avatar_url":"https://github.com/learnwithfair.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## BOOTSTRAP-5 DOCUMENTATION\n\nThanks for visiting my GitHub account!\n\n\u003cimg src = '/images/bootstrap-icon.jpg' height=\"200px\" width=\"180px\"/\u003e **Bootstrap** is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components [more](https://www.w3schools.com/bootstrap/bootstrap_get_started.asp) Or, [Click](https://getbootstrap.com/)\n\nOr, [Click](https://github.com/learnwithfair/web-development-api/tree/main/HTML%2BCSS%2BJS/bootstrap-html)\n\n## Source Code (Download)\n[Click Here](https://mega.nz/folder/RGFiUApD#PoKIVCwF8IkQhE2PHw1XxQ)\n\n## Required Software (Download)\n\n- VS Code, Download -\u003ehttps://code.visualstudio.com/download\n\n### Prerequisites\n\n- HTML\n- CSS\n\n\n## How to use Bootstrap?\n\n+ Initialize in the Header Section For Bootstrap\n\n```\n   \u003c!-- Bootstrap Start  --\u003e\n    \u003clink\n      href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css\"\n      rel=\"stylesheet\"\n      integrity=\"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN\"\n      crossorigin=\"anonymous\"\n    /\u003e\n     \u003c!-- Bootstrap End  --\u003e\n```\n+ Initialize in the Header Section For Icon\n\n```\n    \u003c!-- For Icon  --\u003e\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js\" crossorigin=\"anonymous\"\u003e\n    \u003c/script\u003e\n```\n\n\n+ Initialize in the Footer Section For Bootstrap\n```\n   \u003c!-- Bootstrap Start  --\u003e\n    \u003cscript\n      src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js\"\n      integrity=\"sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL\"\n      crossorigin=\"anonymous\"\n    \u003e\u003c/script\u003e\n    \u003c!-- For Popper  --\u003e\n    \u003cscript\n      src=\"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js\"\n      integrity=\"sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r\"\n      crossorigin=\"anonymous\"\n    \u003e\u003c/script\u003e\n    \u003cscript\n      src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js\"\n      integrity=\"sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+\"\n      crossorigin=\"anonymous\"\n    \u003e\u003c/script\u003e\n    \u003c!-- Bootstrap End  --\u003e\n```\n\n### BS4 vs BS5\n\n- support IE 10 and 11\n- more colors added in bootstrap 5\n- card-deck class is not supported anymore\n- jumbotron not supported in bs5\n- jQuery is removed and vanila js has taken place in bs5\n- bootstrap 5 has own SVG icons\n- form elements such as buttons, checkboxes used to look - different based on OS and browser now it remains same\n- breakpoints: now 6 break-points xs, sm, md, lg, xl, xxl\n\n- \u003cdiv class=\"row bg-primary gx-3 gy-4 g-4\"\u003e \u003c/div\u003e\n\n### [0. welcome to Bootstrap4 and 5](https://youtu.be/Wl6Q472fNCc)\n\n### [1. Introduction to Bootstrap](https://youtu.be/SzaWRb-Mm_M)\n\n#### 1.1 What is Bootstrap?\n\n- Most powerful and popular Front end framework.\n\n#### 1.2 Why Bootstrap?\n\n- It includes HTML, CSS based design for buttons, navigation etc.\n- Easier web development\n  - create navbar, alert boxes, different layout so easily\n- Create responsive web page easily\n- save time\n- open source\n\n### [2. Create a bootstrap webpage](https://youtu.be/B7z7_LOCvrs)\n\n- create a basic html file with 6 heading tags\n- How to add bootstrap to your project?\n  - add css cdn to the head of html file : `\u003clink href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\" crossorigin=\"anonymous\"\u003e `\n  - add js cdn inside the body: ` \u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e`\n\n### [3. Containers and grid](https://youtu.be/JVGWXp5uw7o)\n\n- breakpoints: xs \u003c 576px | sm \u003e=576px | md \u003e=768px | lg \u003e=992 | xl \u003e=1200px | xxl \u003e=1400px\n- .container: for x-small it will take 100%; but for other breakpoints it will take maximum not full width of viewport\n- .container-fluid\n- .container-{breakpoint}; example- .container-md\n- example\n\n  ```html\n  \u003cdiv class=\"container\"\u003e\n    \u003ch1\u003eRahatul Rabbi\u003c/h1\u003e\n    \u003cp\u003eBorn To Teach.\u003c/p\u003e\n\n    \u003ch2\u003eAbout Me\u003c/h2\u003e\n    \u003cp\u003e\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta,\n      repudiandae laboriosam? Odit repudiandae beatae eius modi sapiente eveniet\n      exercitationem illum.\n    \u003c/p\u003e\n  \u003c/div\u003e\n  ```\n\n- built with flexbox layout\n- .row\n- .col, .col-{breakpoints}; breakpoints are: xs, sm, md, lg, xl, xxl\n- responsive grid\n- example:\n  ````html\n  \u003cdiv class=\"row\"\u003e\n    \u003ch2\u003eMy Services\u003c/h2\u003e\n    \u003cdiv class=\"col-md-4 col-md-6\"\u003e\n      \u003ch3\u003eWeb development\u003c/h3\u003e\n      \u003cp\u003eLorem, ipsum dolor sit amet consectetur adipisicing elit.\u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-md-4 col-md-6\"\u003e\n      \u003ch3\u003eWeb development\u003c/h3\u003e\n      \u003cp\u003eLorem, ipsum dolor sit amet consectetur adipisicing elit.\u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-md-4 col-md-6\"\u003e\n      \u003ch3\u003eWeb development\u003c/h3\u003e\n      \u003cp\u003eLorem, ipsum dolor sit amet consectetur adipisicing elit.\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  ```html\n  ````\n\n### [4. bootstrap 4 vs bootstrap5](https://youtu.be/dMU3R1dWqo4)\n\n### [5. colors and spacing - Margin, padding](https://youtu.be/OpxU0T_Pa4w)\n\n- colors: primary(blue), success(green), info(light blue), warning(orange), danger(red), secondary(grey), white, dark, light\n- bg-colorName\n- text-colorName\n- p-0 (no padding), p-1(0.25rem), p-2(0.5rem), p-3(1rem), p-4(1.5rem) to p-5\n- pl-value; pr-value, pt-value; pb-value; px-value; py-value;\n- responsive padding: p-3, p-lg-5\n- use m for margin\n\n### [6. border and image](https://youtu.be/oPlPz2gf5OY)\n\n- border, border-colorName, rounded-left, rounded-circle\n- responsive image: img-fluid\n- thumbnail image: img-thumbnail\n- aligning-image: float start, float-end\n- centering image: mx-auto d-block or make the parent div text-center\n\n### [7. Text and font](https://youtu.be/AbhMm6TYNKg)\n\n- text-left, text-right, text-center, text-justify\n- responsive text-alignment: text-sm-left text-md-center\n- text-lowercase, text-uppercase, text-capitalize\n- text-decoration-none\n\n### [8. dismissible alert](https://youtu.be/jJnr3kvxmgU)\n\n- example\n  ```html\n  \u003cdiv class=\"alert alert-danger alert-dismissible\" role=\"alert\"\u003e\n    \u003cbutton\n      class=\"btn-close\"\n      data-bs-dismiss=\"alert\"\n      aria-label=\"Close\"\n    \u003e\u003c/button\u003e\n    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente, fuga!\n  \u003c/div\u003e\n  ```\n\n### [9. blockquote and abbreviations](https://youtu.be/GggXq0Dh-Jc)\n\n- example\n\n  ```html\n\n  ```\n\n### [10. button, button group, list group](https://youtu.be/rU9glyS3J6o)\n\n- btn, btn-link, btn-group\n- btn-colorName; example: btn-primary, btn-light\n- btn-outline-colorName\n- button modifiers: btn-lg, btn-sm, btn-block, btn-group-lg, disabled\n- example\n\n  ```html\n\n  ```\n\n### [11. collapse and pagination](https://youtu.be/pKrfwnZ2Rxk)\n\n- example\n\n  ```html\n  \u003c!-- collapse example --\u003e\n  \u003ca href=\"#demo\" data-bs-toggle=\"collapse\"\u003elearn more\u003c/a\u003e\n  \u003cbutton\n    class=\"btn btn-primary\"\n    type=\"button\"\n    data-bs-toggle=\"collapse\"\n    data-bs-target=\"#demo\"\n    aria-expanded=\"false\"\n    aria-controls=\"demo\"\n  \u003e\n    learn more\n  \u003c/button\u003e\n  \u003cdiv class=\"collapse\" id=\"demo\"\u003e\n    \u003cp\u003e\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Id dolorem sed\n      quisquam repudiandae sequi voluptatibus, aperiam aliquam adipisci nam\n      maiores quia unde necessitatibus veritatis eligendi in laboriosam, officia\n      porro? Explicabo.\n    \u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003c!-- pagination example --\u003e\n  \u003cfooter\u003e\n    \u003cul class=\"pagination py-3 justify-content-center\"\u003e\n      \u003cli class=\"page-item\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e1\u003c/a\u003e\u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e2\u003c/a\u003e\u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e3\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/footer\u003e\n  ```\n\n### [12. Navigation menu](https://youtu.be/ZbAvtMpEzcA)\n\n- example\n\n  ```html\n  \u003c!-- nav example --\u003e\n  \u003cul class=\"nav justify-content-center py-3 bg-primary\"\u003e\n    \u003cli class=\"nav-item\"\u003e\n      \u003ca class=\"nav-link text-white text-uppercase active\" href=\"#\"\u003eHome\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"nav-item\"\u003e\n      \u003ca class=\"nav-link text-white text-uppercase\" href=\"#\"\u003eTutorial\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"nav-item\"\u003e\n      \u003ca class=\"nav-link text-white text-uppercase\" href=\"#\"\u003eGallery\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"nav-item\"\u003e\n      \u003ca class=\"nav-link text-white text-uppercase\" href=\"#\"\u003eContact\u003c/a\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n  ```\n\n### [13. Toggleable dynamic tab and pill](https://youtu.be/VWxSH4zjF8c)\n\n### [14. Navbar](https://youtu.be/Exq0vXXe3DM)\n\n### [15. Card](https://youtu.be/hXNglSpEv5Q)\n\n- example\n\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-lg-3\"\u003e\n    \u003cdiv class=\"card\"\u003e\n      \u003cimg\n        src=\"http://www.studywithanis.com/wp-content/uploads/2018/01/ICT-Cover.jpg\"\n        alt=\"hsc ict\"\n      /\u003e\n      \u003cdiv class=\"card-body\"\u003e\n        \u003ch4 class=\"card-title\"\u003eCard Title\u003c/h4\u003e\n        \u003cp class=\"card-text\"\u003ecard text is here. add your description\u003c/p\u003e\n        \u003ca href=\"#\" class=\"card-link stretched-link\" target=\"_blank\"\n          \u003evisit the link\u003c/a\n        \u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### [16. Media objects](https://youtu.be/cqEvL_kIbTE)\n\n### [17. Table](https://youtu.be/74Ge1I0FzBk)\n\n- we can use table-colorName on table, tr, td\n- Use .table-striped to add zebra-striping to any table row within the \u003ctbody\u003e.\n- example\n\n```html\n          \u003ctable class=\"table table-bordered table-hover text-center table-striped\"\u003e\n        \u003ccaption\u003e\n          My Education\n        \u003c/caption\u003e\n        \u003cthead style=\"background-color: darkseagreen\"\u003e\n          \u003ctr\u003e\n            \u003cth scope=\"col\"\u003eQualification\u003c/th\u003e\n            \u003cth scope=\"col\"\u003eInstitution\u003c/th\u003e\n            \u003cth scope=\"col\"\u003ePassing Year\u003c/th\u003e\n            \u003cth scope=\"col\"\u003eGrade\u003c/th\u003e\n          \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n          \u003ctr class=\"table-primary\"\u003e\n            \u003cth scope=\"row\"\u003eSSC\u003c/th\u003e\n            \u003ctd\u003eSingerKatch High School and College\u003c/td\u003e\n            \u003ctd\u003e2006\u003c/td\u003e\n            \u003ctd rowspan=\"2\"\u003e3.44 / 5.00\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr class=\"table-secondary\"\u003e\n            \u003cth scope=\"row\"\u003eHSC\u003c/td\u003e\n            \u003ctd\u003eSingerKatch High School and College\u003c/td\u003e\n            \u003ctd\u003e2008\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003cth scope=\"row\"\u003eBSc in CSE\u003c/td\u003e\n            \u003ctd\u003eLeading University\u003c/td\u003e\n            \u003ctd\u003e2017\u003c/td\u003e\n            \u003ctd\u003e3.92 / 4.00\u003c/td\u003e\n          \u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n```\n\n### [18. Form ](https://youtu.be/eDE7TndaKeM)\n\n- form controls create block level and allows us to style input and textarea with custom sizing, designing and more.\n- sizing: form-control, form-control-lg, form-control-sm\n\n- example\n\n```html\n     \u003cdiv id=\"contact-me\" class=\"p-3\"\u003e\n      \u003ch2 class=\"text-center\"\u003eContact\u003c/h2\u003e\n      \u003cform action=\"\"\u003e\n\n        \u003c!-- name here  --\u003e\n       \u003cdiv class=\"mb-3\"\u003e\n          \u003clabel for=\"fullname\" class=\"form-label\"\u003efullname: \u003c/label\u003e\n          \u003cinput type=\"text\" id=\"fullname\" name=\"fullname\" class=\"form-control\"\u003e\n       \u003c/div\u003e\n\n       \u003c!-- email here  --\u003e\n        \u003cdiv class=\"mb-3\"\u003e\n          \u003clabel for=\"email\" class=\"form-label\"\u003eemail: \u003c/label\u003e\n          \u003cinput type=\"email\" id=\"email\" name=\"email\" class=\"form-control\"\u003e\n          \u003cdiv id=\"emailHelp\" class=\"form-text\"\u003eWe'll never share your email with anyone else.\u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003c!-- password here  --\u003e\n        \u003cdiv class=\"mb-3\"\u003e\n          \u003clabel for=\"password\" class=\"form-label\"\u003epassword: \u003c/label\u003e\n          \u003cinput type=\"password\" id=\"password\" name=\"password\" class=\"form-control\"\u003e\n          \u003cdiv id=\"passwordHelp\" class=\"form-text\"\u003eMust be 8-20 characters long.\u003c/div\u003e\n        \u003c/div\u003e\n\n       \u003c!-- color selector here  --\u003e\n        \u003cdiv class=\"mb-3\"\u003e\n            \u003clabel for=\"exampleColorInput\" class=\"form-label\"\u003eColor picker\u003c/label\u003e\n            \u003cinput type=\"color\" class=\"form-control-color\" id=\"exampleColorInput\" value=\"#563d7c\" title=\"Choose your color\"\u003e\n        \u003c/div\u003e\n\n        \u003c!-- dropdown menu here  --\u003e\n        \u003cdiv class=\"mb-3\"\u003e\n            \u003cselect class=\"form-select\" aria-label=\"department\"\u003e\n               \u003coption selected\u003eCSE\u003c/option\u003e\n               \u003coption value=\"1\"\u003eEEE\u003c/option\u003e\n               \u003coption value=\"2\"\u003eLLB\u003c/option\u003e\n            \u003c/select\u003e\n        \u003c/div\u003e\n\n        \u003c!-- checkbox here  --\u003e\n         \u003cdiv class=\"mb-3\"\u003e\n          \u003cdiv class=\"form-check\"\u003e\n            \u003cinput class=\"form-check-input\" type=\"checkbox\" id=\"terms\"\u003e\n            \u003clabel class=\"form-check-label\" for=\"terms\"\u003e\n              Accept terms and conditions\n            \u003c/label\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n\n\n        \u003c!-- radio button  --\u003e\n         \u003cdiv class=\"mb-3\"\u003e\n          \u003cdiv class=\"form-check form-check-inline\"\u003e\n            \u003cinput class=\"form-check-input\" type=\"radio\" id=\"male\" name=\"gender\"\u003e\n            \u003clabel class=\"form-check-label\" for=\"male\"\u003e\n              male\n            \u003c/label\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"form-check form-check-inline\"\u003e\n            \u003cinput class=\"form-check-input\" type=\"radio\" id=\"male\" name=\"gender\"\u003e\n            \u003clabel class=\"form-check-label\" for=\"female\"\u003e\n              female\n            \u003c/label\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n\n\n        \u003c!-- form-floating labels example; placeholder is required  --\u003e\n\n            \u003cdiv class=\"form-floating mb-3\"\u003e\n              \u003cinput type=\"email\" class=\"form-control\" id=\"emailInput\" placeholder=\"name@example.com\"\u003e\n              \u003clabel for=\"emailInput\"\u003eEmail address\u003c/label\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"form-floating\"\u003e\n              \u003ctextarea class=\"form-control\" placeholder=\"Leave a comment here\" id=\"floatingTextarea\"\u003e\u003c/textarea\u003e\n              \u003clabel for=\"floatingTextarea\"\u003eComments\u003c/label\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n\n          \u003c!-- form grid example  --\u003e\n          \u003cdiv class=\"row\"\u003e\n            \u003cdiv class=\"col\"\u003e\n              \u003cinput type=\"text\" class=\"form-control\" placeholder=\"First name\" aria-label=\"First name\"\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"col\"\u003e\n              \u003cinput type=\"text\" class=\"form-control\" placeholder=\"Last name\" aria-label=\"Last name\"\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n\n          \u003cbutton class=\"btn btn-primary\" type=\"submit\"\u003eSubmit\u003c/button\u003e\n        \u003c/div\u003e\n      \u003c/form\u003e\n```\n\n### [19. Carousel](https://youtu.be/f6nCsa6Zbjg)\n\n### [20. Badge, progress and tooltip](https://youtu.be/D-rPnaM0agw)\n\n- example\n\n  ```html\n  \u003ch2\u003e\n    Bootstrap5 video \u003cspan class=\"badge bg-secondary rounded-pill\"\u003eNew\u003c/span\u003e\n  \u003c/h2\u003e\n\n  \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003e\n    Notifications \u003cspan class=\"badge bg-secondary\"\u003e4\u003c/span\u003e\n  \u003c/button\u003e\n\n  \u003cbutton\n    type=\"button\"\n    class=\"btn btn-secondary\"\n    data-bs-toggle=\"tooltip\"\n    data-bs-placement=\"right\"\n    title=\"by clicking sign up you will be registered\"\n  \u003e\n    sign up\n  \u003c/button\u003e\n\n  \u003cdiv class=\"progress mt-3\"\u003e\n    \u003cdiv\n      class=\"progress-bar bg-success w-75\"\n      role=\"progressbar\"\n      aria-valuenow=\"75\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n    \u003e\n      75%\n    \u003c/div\u003e\n  \u003c/div\u003e\n  ```\n\n### [21. List group]()\n\n- example\n\n  ```html\n  \u003c!-- list can have link and button  --\u003e\n  \u003cul class=\"list-group\"\u003e\n    \u003cli class=\"list-group-item active\"\u003eAn item\u003c/li\u003e\n    \u003ca href=\"#\" class=\"list-group-item list-group-item-action\"\n      \u003eA second link item\u003c/a\n    \u003e\n    \u003cbutton type=\"button\" class=\"list-group-item list-group-item-action\"\u003e\n      A third button item\n    \u003c/button\u003e\n    \u003cli class=\"list-group-item\"\u003eA fourth item\u003c/li\u003e\n    \u003cli class=\"list-group-item\"\u003eAnd a fifth one\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003c!-- list, badge  --\u003e\n  \u003cul class=\"list-group\"\u003e\n    \u003cli\n      class=\"list-group-item d-flex justify-content-between align-items-center\"\n    \u003e\n      Books\n      \u003cspan class=\"badge bg-primary rounded-pill\"\u003e10\u003c/span\u003e\n    \u003c/li\u003e\n    \u003cli\n      class=\"list-group-item d-flex justify-content-between align-items-center\"\n    \u003e\n      Pens\n      \u003cspan class=\"badge bg-primary rounded-pill\"\u003e5\u003c/span\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n  ```\n\n### [22. float and svg icons](https://youtu.be/-BP8r0vMOXU)\n\n- bootstrap svg icons - https://icons.getbootstrap.com/\n- example\n\n  ```html\n  \u003cdiv class=\"clearfix\"\u003e\n    \u003cdiv class=\"float-start w-50\"\u003e\n      \u003cp\u003e\n        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,\n        architecto, totam harum eaque commodi dignissimos alias veniam tenetur\n        maxime, sapiente nisi facere ipsa saepe inventore.\n      \u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"float-end w-50\"\u003e\n      \u003cp\u003e\n        \u003ci class=\"bi bi-123\"\u003e\u003c/i\u003e\n        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,\n        architecto, totam harum eaque commodi dignissimos alias veniam tenetur\n        maxime, sapiente nisi facere ipsa saepe inventore.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cbutton class=\"btn btn-primary\"\u003e\n    \u003csvg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      fill=\"currentColor\"\n      class=\"bi bi-alarm\"\n      viewBox=\"0 0 16 16\"\n    \u003e\n      \u003cpath\n        d=\"M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z\"\n      /\u003e\n      \u003cpath\n        d=\"M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z\"\n      /\u003e\n    \u003c/svg\u003e\n    Alarm\n  \u003c/button\u003e\n  ```\n\n### [23. position and display](https://youtu.be/qknEBRJBAM0)\n\n- example\n\n  ```html\n  \u003c!-- // display: none, block, inline, inline-block, flex, grid, table --\u003e\n\n  \u003c!-- \u003cbutton class=\"d-none\"\u003eclick me 1\u003c/button\u003e\n    \u003cbutton class=\"d-block\"\u003eclick me 2\u003c/button\u003e\n  \n    \u003cdiv class=\"bg-success d-inline-block\"\u003e\n      \u003cp\u003eLorem ipsum dolor sit amet consectetur adipisicing elit. A culpa\u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"bg-primary d-inline-block\"\u003e\n      \u003cp\u003e\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus\n        tempore in qui. Quasi, quas non?\n      \u003c/p\u003e\n    \u003c/div\u003e --\u003e\n\n  \u003c!-- positioning: static, fixed, sticky, absolute, relative --\u003e\n\n  \u003cdiv class=\"bg-success position-relative\" style=\"height: 200px\"\u003e\n    \u003cbutton class=\"position-absolute start-50 top-50 translate-middle\"\u003e\n      click me\n    \u003c/button\u003e\n  \u003c/div\u003e\n  ```\n\n### [24. flex]()\n\n- example\n\n```html\n\u003c!-- responsive flex items --\u003e\n\u003cdiv\n  class=\"card-container d-flex flex-sm-column flex-md-row bg-success p-3\"\n  \u003c!--\n\u003e\n  \u003cdiv class=\"card w-25\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card w-25\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card w-25\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- horizontal alignment  --\u003e\n\u003c!-- justify-content-value; here value can be start, end, center, between, around, evenly --\u003e\n\u003cdiv\n  class=\"card-container d-flex flex-sm-column flex-md-row bg-success p-3 justify-content-evenly\"\n\u003e\n  \u003cdiv class=\"card w-25\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card w-25\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card w-25\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- vertical alignment --\u003e\n\u003c!-- align-items-value; here value can be start,end,center, stretch --\u003e\n\n\u003cdiv\n  class=\"card-container d-flex flex-sm-column flex-md-row bg-success p-3 align-items-center\"\n  style=\"height: 100vh\"\n  \u003c!--\n\u003e\n  \u003cdiv class=\"card w-25\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card w-25\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card w-25\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- horizontal and vertical alignment together --\u003e\n\n\u003cdiv\n  class=\"card-container d-flex flex-sm-column flex-md-row bg-primary p-3 justify-content-center align-items-center\"\n  style=\"height: 100vh\"\n  \u003c!--\n\u003e\n  \u003cdiv class=\"card w-25 m-1\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card w-25 m-1\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card w-25 m-1\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- order of flex items --\u003e\n\u003cdiv\n  class=\"card-container d-flex flex-sm-column flex-md-row bg-primary p-3 justify-content-center align-items-center\"\n  style=\"height: 100vh\"\n  \u003c!--\n\u003e\n  \u003cdiv class=\"card w-25 m-1 order-3\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title1\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card w-25 m-1 order-1\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title2\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card w-25 m-1 order-2\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title3\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- align-self: start / end/ center / stretched --\u003e\n\u003cdiv\n  class=\"card-container d-flex flex-sm-column flex-md-row bg-primary p-3 justify-content-center align-items-center\"\n  style=\"height: 100vh\"\n  \u003c!--\n\u003e\n  \u003cdiv class=\"card w-25 m-1 align-self-start\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title1\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card w-25 m-1\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title2\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"card w-25 m-1 align-self-end\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n      \u003ch4 class=\"card-title\"\u003ecard title3\u003c/h4\u003e\n      \u003cp class=\"card-text\"\u003e\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### [25. Modal]()\n\n- example\n\n```html\n\u003c!-- modal example  --\u003e\n\u003c!-- Button trigger modal --\u003e\n\u003cbutton\n  type=\"button\"\n  class=\"btn btn-primary\"\n  data-bs-toggle=\"modal\"\n  data-bs-target=\"#exampleModal\"\n\u003e\n  Launch demo modal\n\u003c/button\u003e\n\n\u003c!-- Modal --\u003e\n\u003cdiv class=\"modal fade\" id=\"exampleModal\"\u003e\n  \u003cdiv class=\"modal-dialog\"\u003e\n    \u003cdiv class=\"modal-content\"\u003e\n      \u003cdiv class=\"modal-header\"\u003e\n        \u003ch5 class=\"modal-title\" id=\"exampleModalLabel\"\u003eModal title\u003c/h5\u003e\n        \u003cbutton\n          type=\"button\"\n          class=\"btn-close\"\n          data-bs-dismiss=\"modal\"\n          aria-label=\"Close\"\n        \u003e\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-body\"\u003esome text is here\u003c/div\u003e\n      \u003cdiv class=\"modal-footer\"\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\u003e\n          Close\n        \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```\n\n\n\n## Follow Me\n\n\u003cimg src =\"https://www.edigitalagency.com.au/wp-content/uploads/Facebook-logo-blue-circle-large-transparent-png.png\" height=\"15px\" width=\"15px\"/\u003e [Facebook](http://facebook.com/learnwithfair),   \u003cimg src =\"https://image.similarpng.com/very-thumbnail/2021/10/Youtube-icon-design-on-transparent-background-PNG.png\" height=\"20px\" width=\"20px\"/\u003e  [Youtube](http://youtube.com/@learnwithfair),   \u003cimg src =\"https://i.pinimg.com/originals/fa/ea/02/faea02f412415becfb4939d2b6431c28.jpg\" height=\"15px\" width=\"15px\"/\u003e    [Instagram](http://instagram.com/learnwithfair) \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearnwithfair%2Fbootstrap-documentation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearnwithfair%2Fbootstrap-documentation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearnwithfair%2Fbootstrap-documentation/lists"}