{"id":13339144,"url":"https://github.com/kdcloudy/BootstrapBoilerplates","last_synced_at":"2025-03-11T12:31:20.161Z","repository":{"id":128588646,"uuid":"283536734","full_name":"kdcloudy/BootstrapBoilerplates","owner":"kdcloudy","description":"Quick and basic starters code for basic static layouts in HTML/CSS such as signup forms, grids, gradients and basic neumorphic designs.","archived":false,"fork":false,"pushed_at":"2020-07-30T12:25:26.000Z","size":23,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-24T00:22:52.877Z","etag":null,"topics":["bootstrap","cheatsheet","ui-design"],"latest_commit_sha":null,"homepage":"","language":null,"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/kdcloudy.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":"2020-07-29T15:33:21.000Z","updated_at":"2020-07-30T12:25:29.000Z","dependencies_parsed_at":"2023-04-21T09:35:24.607Z","dependency_job_id":null,"html_url":"https://github.com/kdcloudy/BootstrapBoilerplates","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdcloudy%2FBootstrapBoilerplates","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdcloudy%2FBootstrapBoilerplates/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdcloudy%2FBootstrapBoilerplates/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdcloudy%2FBootstrapBoilerplates/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kdcloudy","download_url":"https://codeload.github.com/kdcloudy/BootstrapBoilerplates/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243034845,"owners_count":20225414,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","cheatsheet","ui-design"],"created_at":"2024-07-29T19:19:19.151Z","updated_at":"2025-03-11T12:31:20.147Z","avatar_url":"https://github.com/kdcloudy.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# BootstrapBoilerplates\nQuick and basic starters code for basic static layouts in HTML/CSS such as signup forms, grids, gradients using Bootstrap. This is for delivering a quick testable, clean UI while you can still focus on your backend and before you jump to React or Vue.\n\n## Dependencies:\n`link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\u0026display=swap\"\nlink href=\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css\" rel=\"stylesheet\"`\n\n### A Login Jumbotron card\nCSS:\n```\n.basic-card{\n    height: 90%;\n    width: 60%;\n    position: absolute;\n    top: 65%;\n    left: 50%;\n    padding:1%;\n    transform: translate(-50%, -50%);\n    border-radius: 10px 10px;\n    background: #e0e5ec;\n    display: flex;\n    justify-content: center; \n}\n```\n\n### Gradients\nCSS:\n(Add this to any class or body for full gradient background)\n \n `background-image: linear-gradient(to bottom right, #2EC866, #0E141E);`\n \n### Gradient Text\nCSS:\n\n```\n#gradtext{\n    background: linear-gradient(to bottom right, #E73C7E, #EE7752);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n\n}\n```\n\n\n### Basic Dark Navbar:\nHTML:\n``` \n\u003c!-- Navbar --\u003e\n\u003cnav class=\"navbar fixed-top navbar-expand-lg navbar-dark bg-dark scrolling-navbar\"\u003e\n          \u003cdiv class=\"container\"\u003e\n    \n            \u003c!-- Brand --\u003e\n            \u003ca class=\"navbar-brand\" href=\"/\"\u003e\n              \u003cimg src=\"#\" height=\"60\" width=\"200\" alt=\"\"\u003e\n            \u003c/a\u003e\n    \n            \u003c!-- Links --\u003e\n            \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\"\u003e\n    \n              \u003c!-- Left --\u003e\n              \u003cul class=\"navbar-nav mr-auto\"\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link\" href=\"#\"\u003eHome\u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link\" href=\"#\"\u003eExplore\u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link\" href=\"#\"\u003eDownload\u003c/a\u003e\n                \u003c/li\u003e\n            \n              \u003c/ul\u003e\n    \n              \u003c!-- Right --\u003e\n              \u003cul class=\"navbar-nav nav-flex-icons\"\u003e\n              \n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link\" href=\"#\" target=\"_blank\"\u003eLogin\u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link\" href=\"#\" target=\"_blank\"\u003eSign Up\u003c/a\u003e\n                \u003c/li\u003e\n               \n              \n              \u003c/ul\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/nav\u003e\n```\n     \n### Neumorphic UI:\n\n```\nbody{\n    background: #e0e5ec;\n}\n\n\n.neu-components{\n    box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6),\n    -9px -9px 16px rgba(255, 255, 255, 0.5);\n    border: 0;\n    background: #e0e5ec;\n    border-radius: 10px;\n    padding: 10px;\n}\n```\n\n### Basic Sign up Form\n\n```\n \u003cform class=\"form-container\" action=\"#\"\u003e\n                            \u003cp class=\"h4 mb-4 text-center\"\u003eSign Up\u003c/p\u003e\n                            \n                            \u003cinput type=\"text\" name=\"name\" id=\"defaultLoginFormtext\" class=\"form-control mb-4\" placeholder=\"Your name\" required\u003e\n                            \u003cinput type=\"text\" name=\"username\" id=\"defaultLoginFormtext\" class=\"form-control mb-4\" placeholder=\"E-Mail\" required\u003e\n                            \u003cinput type=\"password\" name=\"password\" id=\"defaultLoginFormPassword\" class=\"form-control mb-4\" placeholder=\"Password\" required\u003e\n                            \u003clabel for=\"sel1\"\u003eGender:\u003c/label\u003e\n                            \u003cdiv class=\"radio\"\u003e\n                              \u003clabel\u003e\u003cinput type=\"radio\" name=\"optradio\" checked\u003eMale\u003c/label\u003e\n                            \u003c/div\u003e\n                            \u003cdiv class=\"radio\"\u003e\n                              \u003clabel\u003e\u003cinput type=\"radio\" name=\"optradio\"\u003eFemale\u003c/label\u003e\n                            \u003c/div\u003e\n                            \u003cdiv class=\"radio disabled\"\u003e\n                              \u003clabel\u003e\u003cinput type=\"radio\" name=\"optradio\" disabled\u003ePrefer not to say\u003c/label\u003e\n                          \n                            \u003c/div\u003e\n                            \u003cdiv class=\"form-group\"\u003e\n                                \u003clabel for=\"sel1\"\u003eSelect Difficulty Level\u003c/label\u003e\n                                \u003cselect class=\"form-control\" id=\"sel1\"\u003e\n                                  \u003coption\u003eBeginner\u003c/option\u003e\n                                  \u003coption\u003eIntermediate\u003c/option\u003e\n                                  \u003coption\u003ePro\u003c/option\u003e\n                                \u003c/select\u003e\n                              \u003c/div\u003e\n\n                             \n                              \u003clabel for=\"birthday\"\u003eBirthday:\u003c/label\u003e\n                              \u003cinput type=\"date\" id=\"birthday\" name=\"birthday\" class=\"form-control mb-4\"\u003e\n                            \n\n                              \u003cdiv class=\"checkbox\"\u003e\n                                \u003clabel\u003e\u003cinput type=\"checkbox\" value=\"\"\u003eEnroll me part of the newsletter\u003c/label\u003e\n                              \u003c/div\u003e\n                              \u003cdiv class=\"checkbox\"\u003e\n                                \u003clabel\u003e\u003cinput type=\"checkbox\" value=\"\"\u003eI accept to the terms of the end user license agreement.\u003c/label\u003e\n                              \u003c/div\u003e\n                              \n                            \u003cbutton class=\"btn btn-info btn-black btn-block my-4\" type=\"submit\"\u003eCreate Account\u003c/button\u003e\n                            \u003cbutton class=\"btn btn-info btn-red btn-block my-4\" type=\"reset\"\u003eReset\u003c/button\u003e\n                        \n                            \u003cdiv class=\"text-center\"\u003e\n                                \u003cp\u003eAlready a member?\n                                    \u003ca href=\"/login\"\u003eLogin now\u003c/a\u003e\n                                \u003c/p\u003e\n                        \u003c/form\u003e\n```\n\n\n\n### Bootstrap Grid Sample:\nTwo columns taking 6 units, one row.\n```\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-6\"\u003e\n    \u003cdiv class=\"grid\"\u003e\n       \u003cdiv class=\"content\"\u003e\n    \u003c!-- \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.\u003c/p\u003e --\u003e\n    \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"col-6\"\u003e\n    \u003cdiv class=\"content\"\u003e\n    \u003c!-- \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.\u003c/p\u003e --\u003e\n    \u003c/div\u003e\n   \u003c/div\u003e\n \u003c/div\u003e\n ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkdcloudy%2FBootstrapBoilerplates","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkdcloudy%2FBootstrapBoilerplates","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkdcloudy%2FBootstrapBoilerplates/lists"}