{"id":16797696,"url":"https://github.com/annmariew/dash-bootstrap-cheatsheet","last_synced_at":"2025-04-11T00:12:45.646Z","repository":{"id":40580931,"uuid":"406907445","full_name":"AnnMarieW/dash-bootstrap-cheatsheet","owner":"AnnMarieW","description":"A guide for using Bootstrap 5 classes in Dash Bootstrap Components V1","archived":false,"fork":false,"pushed_at":"2022-11-27T19:20:40.000Z","size":169,"stargazers_count":19,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-11T00:12:35.407Z","etag":null,"topics":["bootstrap","plotly-dash"],"latest_commit_sha":null,"homepage":"","language":"Python","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/AnnMarieW.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-15T19:55:10.000Z","updated_at":"2025-02-01T13:16:14.000Z","dependencies_parsed_at":"2023-01-22T21:31:17.262Z","dependency_job_id":null,"html_url":"https://github.com/AnnMarieW/dash-bootstrap-cheatsheet","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/AnnMarieW%2Fdash-bootstrap-cheatsheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnMarieW%2Fdash-bootstrap-cheatsheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnMarieW%2Fdash-bootstrap-cheatsheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnMarieW%2Fdash-bootstrap-cheatsheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnnMarieW","download_url":"https://codeload.github.com/AnnMarieW/dash-bootstrap-cheatsheet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248317729,"owners_count":21083530,"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","plotly-dash"],"created_at":"2024-10-13T09:23:09.521Z","updated_at":"2025-04-11T00:12:45.627Z","avatar_url":"https://github.com/AnnMarieW.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dash-bootstrap-cheatsheet\n\nThis handy interactive cheatsheet makes it easy to use the Bootstrap 5 classes with your Dash app\nmade with the latest version of *dash-bootstrap-components* V1.0\n\n### See it live at https://dashcheatsheet.pythonanywhere.com/\n\n### Note - this is a WIP. If you have any comments or suggestions or just want to give some :heart: Please open an issue.\n\n## Background\n\n\n\nIf you are upgrading from `dash-bootstrap-components` v0.13 (which uses Bootstrap 4) you will find lots of cool new features – but also some breaking changes. This is mainly because Bootstrap 5 is a major rewrite of the Bootstrap project. Not only are there changes to some of the components, but there are also many new and renamed utility classes.\n\nOne example is Bootstrap 5 now supports RTL, so classes are renamed “start” and “end” instead of “left” and “right”. This means the new way to set left or right margin is className=\"ms-2 me-4\" rather than className=\"ml-2 mr-4\". There are also many new things like the opacity classes, and classes that make it easier to make components like: image\n\nFor more information see\n - `dash-bootstrap-components`  [V1 announcement](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/5)\n  -  [Bootstrap Migration Guide](https://getbootstrap.com/docs/5.0/migration/)\n - `dash-bootstrap-components` [Migration Guide](https://dbc-v1.herokuapp.com/migration-guide/)\n\nI hope this Cheatsheet makes it easier for you to use dbc V1 and Bootstrap 5 in your Dash app.\n\n---\n-\n---\n\n\n\n![cheatsheet](https://user-images.githubusercontent.com/72614349/134268914-10dc5211-80b2-4b36-95b4-0515d27d70e8.gif)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fannmariew%2Fdash-bootstrap-cheatsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fannmariew%2Fdash-bootstrap-cheatsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fannmariew%2Fdash-bootstrap-cheatsheet/lists"}