{"id":19742139,"url":"https://github.com/merkle-open/react-bootstrap-grid-component","last_synced_at":"2025-04-30T06:30:58.056Z","repository":{"id":39560002,"uuid":"168714465","full_name":"merkle-open/react-bootstrap-grid-component","owner":"merkle-open","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-03T16:17:53.000Z","size":3500,"stargazers_count":8,"open_issues_count":24,"forks_count":2,"subscribers_count":12,"default_branch":"master","last_synced_at":"2023-03-12T06:43:24.075Z","etag":null,"topics":["bootstrap","component","grid","react"],"latest_commit_sha":null,"homepage":null,"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/merkle-open.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-02-01T15:04:02.000Z","updated_at":"2021-05-30T10:10:11.000Z","dependencies_parsed_at":"2023-02-01T07:45:30.798Z","dependency_job_id":null,"html_url":"https://github.com/merkle-open/react-bootstrap-grid-component","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merkle-open%2Freact-bootstrap-grid-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merkle-open%2Freact-bootstrap-grid-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merkle-open%2Freact-bootstrap-grid-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merkle-open%2Freact-bootstrap-grid-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/merkle-open","download_url":"https://codeload.github.com/merkle-open/react-bootstrap-grid-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224201528,"owners_count":17272592,"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","component","grid","react"],"created_at":"2024-11-12T01:29:21.008Z","updated_at":"2024-11-12T01:29:21.705Z","avatar_url":"https://github.com/merkle-open.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Bootstrap Grid Component\n\nReact Bootstrap Grid is a made to make your life easier while using Bootstrap Grid inside your\nReact project. Main concepts of the grid have been transformed into react components such as Container, Row and\nColumn. By adding attributes that are defined bellow you can easily implement the grid to your liking or given\nspecification.\n\n## Installation\n\nInstall react-bootstrap-grid-component\n``\nnpm install react-bootstrap-grid-component\n``\n\n## Components\n\n### Container\n\nA Container should always wrap Rows as children. \n\n#### Usage\n\n```tsx\nimport 'bootstrap/scss/bootstrap.scss';\nimport 'react-bootstrap-grid-component/dist/sizingbreakpoints.scss';\nimport { Container } from \"react-bootstrap-grid-component/dist/Container\";\nimport { Column } from \"react-bootstrap-grid-component/dist/Column\";\nimport { Row } from \"react-bootstrap-grid-component/dist/Row\";\n\n\u003cContainer\u003e\n    \u003cRow\u003e\n        \u003cColumn /\u003e\n    \u003c/Row\u003e\n\u003c/Container\u003e\n```\n\n#### Properties\n\nThe only property that this component support is the isFlud which when is defined sets the .container-fuild class\non the wrapping tag\n\n```tsx\n/**\n *  https://getbootstrap.com/docs/4.1/layout/grid/#how-it-works\n */\nisFluid?: boolean\n```\n\n### Row\n\n#### Usage\n\n```tsx\nimport 'bootstrap/scss/bootstrap.scss';\nimport 'react-bootstrap-grid-component/dist/sizingbreakpoints.scss';\nimport { Container } from \"react-bootstrap-grid-component/dist/Container\";\nimport { Column } from \"react-bootstrap-grid-component/dist/Column\";\nimport { Row } from \"react-bootstrap-grid-component/dist/Row\";\n\n\u003cContainer\u003e\n    \u003cRow\u003e\n        \u003cColumn /\u003e\n    \u003c/Row\u003e\n\u003c/Container\u003e\n```\n\n#### Properties\n\n```tsx\n/**\n * https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment\n */\nverticalAlignment?: \"center\" | \"baseline\";\n/**\n * https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment\n */\nhorizontalAlignment?: \"start\" | \"center\" | \"between\" | \"end\";\n/**\n   * https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters\n   */\n  noGutters?: boolean;\n/**\n  * Rows must contain only columns to prevent negative margin issues\n  */\nchildren: Array\u003cReact.ReactElement\u003cColumn\u003e\u003e | React.ReactElement\u003cColumn\u003e;\n```\n\n### Column\n\n```tsx\nimport 'bootstrap/scss/bootstrap.scss';\nimport 'react-bootstrap-grid-component/dist/sizingbreakpoints.scss';\nimport { Container } from \"react-bootstrap-grid-component/dist/Container\";\nimport { Column } from \"react-bootstrap-grid-component/dist/Column\";\nimport { Row } from \"react-bootstrap-grid-component/dist/Row\";\n\n\u003cContainer\u003e\n    \u003cRow\u003e\n    \u003cColumn size=\"6\"\u003e\n        \u003cdiv\u003eContent\u003c/div\u003e\n    \u003c/Column\u003e\n    \u003cColumn size={{xs:12,md:6}}\u003e\n        \u003cdiv\u003eContent\u003c/div\u003e\n    \u003c/Column\u003e\n    \u003c/Row\u003e\n\u003c/Container\u003e\n```\n#### Properties\n\n```tsx\ndirection?: \"row\" | \"col\";\n\nsize?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\nverticalAlignment?: \"top\" | \"center\" | \"bottom\" | \"justify\";\n\nhorizontalAlignment?: \"left\" | \"right\" | \"center\" | \"stretch\";\n\noffset?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\norder?:  0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | \"first\" | \"last\";\n```\n\nNote: If you set size to be equal to 0 the column will disappear\n\n## Additional CSS\n\n[./src/components/sizingbreakpoints.scss](./src/components/sizingbreakpoints.scss)\n\nThis SCSS-File extending the [Bootstrap default width declaration](https://getbootstrap.com/docs/4.0/utilities/sizing/) (h-w-25, h-w-50, h-w-75, h-w-100) with breakpoints.\n\n### Prefixes\n\nIf you want to override some of the default classes of the  bootstrap grid, use prefixes. \nThere are prefixes for container, rows and columns\n\nDepending if you want to apply changes globaly or only in one/couple of components then define\nthe prefix on top of desired page\n\n```tsx\nimport prefixes from 'react-bootstrap-grid-component/dist/PrefixManager';\n\nprefixes.container | prefixes.column | prefixes.row = 'h-';\n```\n\n```scss\n$helper-css-prefix: \"h-\";\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerkle-open%2Freact-bootstrap-grid-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmerkle-open%2Freact-bootstrap-grid-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerkle-open%2Freact-bootstrap-grid-component/lists"}