{"id":22350397,"url":"https://github.com/planetoftheweb/bootstrap4layouts","last_synced_at":"2025-07-30T06:31:47.162Z","repository":{"id":44289542,"uuid":"125056643","full_name":"planetoftheweb/bootstrap4layouts","owner":"planetoftheweb","description":"A Template for Bootstrap 4 based on my Bootstrap 4 Layouts course on LinkedIn Learning","archived":false,"fork":false,"pushed_at":"2023-01-04T22:29:22.000Z","size":1386,"stargazers_count":49,"open_issues_count":7,"forks_count":31,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-06T03:11:08.295Z","etag":null,"topics":["bootstrap","bootstrap-template","bootstrap4","design","layouts","template","themes"],"latest_commit_sha":null,"homepage":"http://www.raybo.org/bootstrap4layouts/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/planetoftheweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-13T13:33:17.000Z","updated_at":"2023-08-07T08:21:06.000Z","dependencies_parsed_at":"2023-02-02T22:15:15.433Z","dependency_job_id":null,"html_url":"https://github.com/planetoftheweb/bootstrap4layouts","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/planetoftheweb/bootstrap4layouts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetoftheweb%2Fbootstrap4layouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetoftheweb%2Fbootstrap4layouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetoftheweb%2Fbootstrap4layouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetoftheweb%2Fbootstrap4layouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/planetoftheweb","download_url":"https://codeload.github.com/planetoftheweb/bootstrap4layouts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetoftheweb%2Fbootstrap4layouts/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267822339,"owners_count":24149601,"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","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"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":["bootstrap","bootstrap-template","bootstrap4","design","layouts","template","themes"],"created_at":"2024-12-04T11:11:33.739Z","updated_at":"2025-07-30T06:31:46.703Z","avatar_url":"https://github.com/planetoftheweb.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n![Bootstrap 4 Layouts](screenshot.png)\n\n# Bootstrap 4 layouts\n\nThis repository is a template for building responsive websites for Bootstrap 4. It provides a quick template for getting started with different layouts. It's based on a course I built for LinkedIn learning called [Bootstrap 4 Layouts: Responsive Single-Page Design](https://www.linkedin.com/learning/bootstrap-4-layouts-responsive-single-page-design/creating-a-bootstrap-4-layout?u=104). If you want to see a demo of the layouts, check out: [raybo.org/bootstrap4layouts/](http://www.raybo.org/bootstrap4layouts/)\n\nThere are several different layouts available:\n\n- Column Based\n- Media\n- Grid\n- Carousel\n- Nested\n- Icons\n- Floater\n- Cards\n\n## Structure of Layouts\n\nEach is designed to showcase a different aspect of how Bootstrap Layouts work. Here's a code sample from the Floater Layout:\n\n```\n  \u003carticle id=\"page-floater\" class=\"page-section vertical-padding\"\u003e\n\n    \u003csection class=\"layout-floater container text-reverse\"\u003e\n      \u003cdiv class=\"row align-items-center justify-content-center\"\u003e\n\n        \u003cdiv class=\"col-8 col-md-4 img-container\"\u003e\n          \u003cimg class=\"layout-image img-fluid\" src=\"http://planetoftheweb.com/i/phone.svg\" alt=\"Photo Sample\"\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"col-10 col-md-6 align-self-center\"\u003e\n          \u003cdiv class=\"my-5 text-center text-md-left pl-md-5\"\u003e\n            \u003ch2 class=\"layout-title\"\u003eFloater Title\u003c/h2\u003e\n            \u003cp class=\"layout-text \"\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga ex delectus sunt natus doloremque praesentium\n              aspernatur, totam tempora officia, sed fugit? Libero voluptatem nulla mollitia, amet dolor iste magni.\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n\n      \u003c/div\u003e\n    \u003c/section\u003e\n\n  \u003c/article\u003e\n```\n\nEach layout is in it's own `\u003carticle\u003e` tag, which begins a layout and has an id with the `page-` prefix.\nMost layouts (not the floater layout) also have an optional `\u003cheader\u003e`. They sholuld be self explanatory.\n\nI'd love to see some Pull Requests with additional layouts.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplanetoftheweb%2Fbootstrap4layouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplanetoftheweb%2Fbootstrap4layouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplanetoftheweb%2Fbootstrap4layouts/lists"}