{"id":13588652,"url":"https://github.com/ownbee/bootstrap-grid-card","last_synced_at":"2026-01-16T14:46:24.464Z","repository":{"id":88300386,"uuid":"334448958","full_name":"ownbee/bootstrap-grid-card","owner":"ownbee","description":"Bootstrap grid in Lovelace UI","archived":false,"fork":false,"pushed_at":"2024-07-15T00:05:05.000Z","size":1600,"stargazers_count":46,"open_issues_count":11,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-08T06:35:11.627Z","etag":null,"topics":["bootstrap","bootstrap-grid-card","card","custom-cards","grid","hass","homeassistant","layout","lovelace"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/ownbee.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-30T15:44:51.000Z","updated_at":"2025-02-01T22:22:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"0c40fdc0-231b-458e-a5dd-f15928cb851b","html_url":"https://github.com/ownbee/bootstrap-grid-card","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/ownbee/bootstrap-grid-card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ownbee%2Fbootstrap-grid-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ownbee%2Fbootstrap-grid-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ownbee%2Fbootstrap-grid-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ownbee%2Fbootstrap-grid-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ownbee","download_url":"https://codeload.github.com/ownbee/bootstrap-grid-card/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ownbee%2Fbootstrap-grid-card/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28479401,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T11:59:17.896Z","status":"ssl_error","status_checked_at":"2026-01-16T11:55:55.838Z","response_time":107,"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","bootstrap-grid-card","card","custom-cards","grid","hass","homeassistant","layout","lovelace"],"created_at":"2024-08-01T15:06:50.774Z","updated_at":"2026-01-16T14:46:24.441Z","avatar_url":"https://github.com/ownbee.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/custom-components/hacs)\n[![Stable](https://img.shields.io/github/release/idittansikte/bootstrap-grid-card.svg)](https://github.com/idittansikte/bootstrap-grid-card/releases/latest)\n[![Community Forum](https://img.shields.io/badge/community-forum-brightgreen.svg)](https://community.home-assistant.io/t/lovelace-bootstrap-grid-card/274738)\n\nbootstrap-grid-card\n===================\n\nAre you looking for a way to get control over your lovelace layout on all your platforms with a\nsmall configuration footprint? Or maybe just a fan of [bootstrap grid\nsystem](https://getbootstrap.com/docs/5.1/layout/grid/)? Then this card is for you.\n\nI wanted a very specific layout on my wall-mounted tablet to fit everything I needed without having\nto scroll too much. When I had made that, the same layout became unusable on my phone and very\nnon-optimal on my big PC screen. I did not want to maintain multiple views that basically provided the\nsame things but with different layouts and I could not find any existing solution that was simple\nand enough customizable.\n\nThis card loads `bootstrap-grid.css` into lovelace and provides an easy way of configuring cards\nwith different bootstrap grid classes in yaml. With bootstrap, you can configure cards to take up\ndifferent size depending on screen size:\n\n![](lovelace.gif)\n\n## Installation\n\n### HACS (recommended)\n\nThis card is available in [HACS](https://hacs.xyz/) (Home Assistant Community Store). \u003csmall\u003e_HACS\nis a third party community store and is not included in Home Assistant out of the box._\u003c/small\u003e\n\nThis card should pop up if you search for \"*bootstrap-grid-card*\" in HACS. Remember adding the card\nto resources (described by HACS instructions while installing).\n\n### Manual install\n\n1. Download and copy `bootstrap-grid-card.js` from [latest\n   release](https://github.com/idittansikte/bootstrap-grid-card/releases/latest) into\n   `\u003chome-assistant\u003e/www` directory. _Alternatively follow build instructions further down under\n   \"Development\"._\n\n2. Add card to resources in `\u003chome-assistant\u003e/configuration.yaml`:\n\n    ```yaml\n    lovelace:\n      ...\n      resources:\n        ...\n        - url: /local/bootstrap-grid-card.js\n          type: module\n\n    ```\n\n## Usage\n\nIf you don't know how to use [bootstrap grid\nsystem](https://getbootstrap.com/docs/5.1/layout/grid/), I strongly suggest you to read about it\nbefore continuing. This guide will assume the reader has basic knowledge of bootstrap grids.\n\nSimple example configuration:\n\n```yaml\ntitle: My view\npanel: true  # !!!!!\ncards:\n  - type: \"custom:bootstrap-grid-card\"\n    cards:\n       - type: row\n         cards:\n            - type: button\n              class: \"col-xs-12 col-md-6 col-xxl-3\"\n              name: Button 1\n            - type: button\n              class: \"col-xs-12 col-md-6 col-xxl-3\"\n              name: Button 2\n            - type: button\n              class: \"col-xs-12 col-md-6 col-xxl-3\"\n              name: Button 3\n            - type: button\n              class: \"col-xs-12 col-md-6 col-xxl-3\"\n              name: Button 4\n       - type: row\n         class: \"justify-content-center\"\n         cards:\n            - type: entity\n              class: \"col-xs-12 col-md-3 col-xxl-4\"\n              entity: sun.sun\n            - type: weather-forecast\n              class: \"col-xs-12 col-md-8 col-xxl-10\"\n              entity: weather.home\n```\n\n\u003e Note: `panel: false` is not tested and probably not what you want.\n\nThe default bootstrap breakpoints are used. It is not possible to change these without recompiling\nthe bootstrap sass files which is not supported in this card.\n\n```css\n$grid-breakpoints: (\n  xs: 0,\n  sm: 576px,\n  md: 768px,\n  lg: 992px,\n  xl: 1200px,\n  xxl: 1400px\n)\n```\n\n## Options\n\n```yaml\n# [Required, type: string]\ntype: custom:bootstrap-grid-card\n\n# List of cards.\n#\n# [required, type: list]\ncards:\n\n# Class of the div that surrounds the grid.\n#\n# [optional, type: string, default: 'container-fluid']\nclass: \"container-fluid\"\n\n# Use paddings and margins on rows and columns that looks like Lovelace default\n# style. If set to *False*, you'll get whatever bootstrap uses as default.\n#\n# [optional, type: bool, default: True]\nuse_hass_style_gutter: True\n\n# Custom space between cards. Only used if 'use_hass_style_gutter' is enabled.\n#\n# [optional, type: string, default: \"4px\"]\nhass_style_gutter_size: \"4px\"\n\n# Custom padding of the container (panel).\n#\n# [optional, type: string, default: Whatever bootstrap sets]\ncontainer_padding:\n\n# String that will be appended to all rows class attribute.\n#\n# [optional, type: string, default: \"\"]\nglobal_row_class: \"\"\n\n# String that will be appended to all columns class attribute.\n#\n# [optional, type: string, default: \"\"]\nglobal_col_class: \"\"\n```\n\n## Rows and columns\n\nThe bootstrap-grid-card provides two custom card types: `row` and `col` to be used in the `cards`\nlist of `bootstrap-grid-card`, `row` and `col` card.\n\nThe `type: row` and `type: col` card will wrap their `cards` list in a div with the `row` and `col`\nclass respectively.\n\nA normal card (e.g. `type: button`) in the `cards` list of `row` or `col`, will always get the class\n`col*`. So there is no need of adding a `type: col` around a single card.\n\n\n### Row options\n\n```yaml\n# [required, type: string]\ntype: row\n\n# Class attribute of this column. Will always have the 'row' class which can't\n# be overridden.\n#\n# Example: \"justify-content-center\"\n#\n# [optional, type: string]\nclass:\n\n# List of cards.\n#\n# [required, type: list]\ncards:\n```\n\n### Column options\n\n```yaml\n# [required, type: string]\ntype: col\n\n# Class attribute of this column.\n#\n# Example: \"col-xs-12 col-sm-5 col-md-4 col-lg-3\"\n#\n# [optional, type: string]\nclass:\n\n# List of cards.\n#\n# [required, type: list]\ncards:\n```\n\n## Nesting rows and columns\n\nIt is possible to nest rows and columns any number of times as long there are no\nnon-`bootstrap-grid-card`´s in between. For example, it will not work if you put a `row` card in a\n`horizontal-stack` card.\n\nMore advanced example:\n\n```yaml\n  # ...\n  - type: row\n    class: justify-content-md-center\n    cards:\n      - type: button\n        class: \"col-12 col-sm-12 col-md-6 col-lg-5\"\n        # ...\n      - type: button\n        class: \"col-12 col-sm-12 col-md-3 col-lg-3\"\n        # ...\n      - type: col # Nesting start\n        class: \"col-12 col-sm-12 col-md-3 col-lg-3\"\n        cards:\n          - type: row\n            cards:\n              - type: thermostat\n                # Use default class \"col\".\n                # ...\n              - type: markdown\n                # Use default class \"col\".\n                # ...\n\n```\n\n## Development\n\n```bash\n# First time to install all deps\nnpm install\n\n# Build card\nnpm run build\n\n# Copy to home assistance www folder\ncp dist/bootstrap-grid-card.js \u003chome_assistant\u003e/config/www/bootstrap-grid-card.js\n\n# Add the .js file in resources described in the manual install instructions above.\n\n# In lovelace UI: clear cache, reload resources and reload page\n```\n\n\u003e Alternatively follow instructions further down under \"Development\".","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fownbee%2Fbootstrap-grid-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fownbee%2Fbootstrap-grid-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fownbee%2Fbootstrap-grid-card/lists"}