{"id":30107081,"url":"https://github.com/benignware/bootstrap-device-utilities","last_synced_at":"2025-08-10T01:33:03.654Z","repository":{"id":32499319,"uuid":"36080031","full_name":"benignware/bootstrap-device-utilities","owner":"benignware","description":"Bootstrap Responsive Utilities based on device resolution","archived":false,"fork":false,"pushed_at":"2015-07-05T22:34:56.000Z","size":8200,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2023-08-12T18:37:42.201Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benignware.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":"2015-05-22T15:35:25.000Z","updated_at":"2023-08-12T18:37:42.202Z","dependencies_parsed_at":"2022-09-05T09:00:27.637Z","dependency_job_id":null,"html_url":"https://github.com/benignware/bootstrap-device-utilities","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"purl":"pkg:github/benignware/bootstrap-device-utilities","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fbootstrap-device-utilities","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fbootstrap-device-utilities/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fbootstrap-device-utilities/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fbootstrap-device-utilities/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benignware","download_url":"https://codeload.github.com/benignware/bootstrap-device-utilities/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fbootstrap-device-utilities/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269663300,"owners_count":24455801,"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-08-09T02:00:10.424Z","response_time":111,"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":"2025-08-10T01:32:17.283Z","updated_at":"2025-08-10T01:33:03.617Z","avatar_url":"https://github.com/benignware.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bootstrap-device-utilities\n\u003e Bootstrap Responsive Utilities based on device resolution\n\nThis bootstrap css-extension lets you control visibility of elements based on device screen dimensions by adding `visible-device-*` and `hidden-device-*` helpers.\n\nDisplaying content dependent on device resolution is especially useful for optimizing large background-images.\nWhile image elements cannot be prevented from loading once they're added to the document, css-background-images wrapped in an hidden element will [not load in most commonly used browsers](http://timkadlec.com/2012/04/media-query-asset-downloading-results/).\nBeing fully aware of the client's resolution and also because of being pure css, which offers the best possible performance, this technique is preferred over server-side- or javascript-solutions.\n\nMaking use of standard viewport-based helpers would force different images to be loaded on window-resize which is not suitable for the purpose of optimization.\nFor example, with standard bootstrap breakpoints applied at `768px`, `992px` and `1200px`, an ipad of `768x1024` will be `sm` in portrait-, but `md` in landscape-orientation.\n\nIn contrast to viewport, device dimensions are fixed at the maximum resolution.\nIn order to always match the entire screen, bootstrap-device-utilities also take device-height into account. This way, images can be easily delivered at individual, screen-fitting sizes. \n\nThe package contains a less and a sass-version as well as a compiled css-distribution.\n\n## Basic Usage\n\nDisplay content based on device resolution:\n```html\n\u003cdiv class=\"visible-device-lg\"\u003eLarge screen\u003c/div\u003e\n\u003cdiv class=\"visible-device-md\"\u003eMedium screen\u003c/div\u003e\n\u003cdiv class=\"visible-device-sm\"\u003eSmall screen\u003c/div\u003e\n\u003cdiv class=\"visible-device-xs\"\u003eExtra small screen\u003c/div\u003e\n```\n\nHide content based on device resolution:\n```html\n\u003cdiv class=\"hidden-device-lg\"\u003eNot a large screen\u003c/div\u003e\n\u003cdiv class=\"hidden-device-md\"\u003eNot a medium screen\u003c/div\u003e\n\u003cdiv class=\"hidden-device-sm\"\u003eNot a small screen\u003c/div\u003e\n\u003cdiv class=\"hidden-device-xs\"\u003eNot an extra small screen\u003c/div\u003e\n```\n\n\n## Advanced Usage\n\nDeliver background-images dependent on device resolution:\n```html\n\u003cdiv class=\"background\"\u003e\n  \u003cdiv class=\"visible-device-lg visible-device-md visible-device-sm\"\u003e\n    \u003cdiv style=\"background-image: url('images/flowers_lg.jpg');\"\u003e \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"visible-device-xs\"\u003e\n    \u003cdiv style=\"background-image: url('images/flowers_xs.jpg');\"\u003e \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\nbody, html {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n}\n\n.background \u003e div \u003e div {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenignware%2Fbootstrap-device-utilities","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenignware%2Fbootstrap-device-utilities","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenignware%2Fbootstrap-device-utilities/lists"}