{"id":18841267,"url":"https://github.com/dmhendricks/bootstrap-grid-css","last_synced_at":"2025-04-05T14:04:49.661Z","repository":{"id":58240031,"uuid":"51206156","full_name":"dmhendricks/bootstrap-grid-css","owner":"dmhendricks","description":"The grid and responsive utilities classes extracted from the Bootstrap 4 framework, compiled into CSS.","archived":false,"fork":false,"pushed_at":"2018-09-28T20:28:32.000Z","size":97,"stargazers_count":167,"open_issues_count":2,"forks_count":164,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-29T13:05:47.039Z","etag":null,"topics":["bootstrap","bootstrap-grid","css-grid","grid","grid-layout"],"latest_commit_sha":null,"homepage":"https://dmhendricks.github.io/demo/bootstrap-grid-css/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dmhendricks.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":"2016-02-06T14:44:30.000Z","updated_at":"2024-11-06T18:15:43.000Z","dependencies_parsed_at":"2022-08-31T03:01:55.340Z","dependency_job_id":null,"html_url":"https://github.com/dmhendricks/bootstrap-grid-css","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmhendricks%2Fbootstrap-grid-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmhendricks%2Fbootstrap-grid-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmhendricks%2Fbootstrap-grid-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmhendricks%2Fbootstrap-grid-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmhendricks","download_url":"https://codeload.github.com/dmhendricks/bootstrap-grid-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247345850,"owners_count":20924102,"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","bootstrap-grid","css-grid","grid","grid-layout"],"created_at":"2024-11-08T02:50:34.688Z","updated_at":"2025-04-05T14:04:49.640Z","avatar_url":"https://github.com/dmhendricks.png","language":"CSS","readme":"[![Developer](https://img.shields.io/badge/developer-Daniel%20M.%20Hendricks-lightgrey.svg?colorB=9900cc )](https://www.danhendricks.com?utm_source=github.com\u0026utm_medium=campaign\u0026utm_content=button\u0026utm_campaign=dmhendricks%2Fbootstrap-grid-css)\n[![Release](https://img.shields.io/github/release/dmhendricks/bootstrap-grid-css.svg)](https://github.com/dmhendricks/bootstrap-grid-css/releases)\n[![GitHub License](https://img.shields.io/badge/license-MIT-yellow.svg)](https://raw.githubusercontent.com/dmhendricks/bootstrap-grid-css/master/LICENSE)\n[![GitHub Downloads](https://img.shields.io/github/downloads/dmhendricks/bootstrap-grid-css/total.svg?label=GitHub%20downloads)](https://github.com/dmhendricks/bootstrap-grid-css/releases)\n[![NPM Downloads](https://img.shields.io/npm/dt/bootstrap-grid-only-css.svg?label=npm%20downloads)](https://www.npmjs.com/package/bootstrap-grid-only-css?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=button\u0026utm_campaign=dmhendricks%2Fbootstrap-grid-css)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://paypal.me/danielhendricks)\n[![Twitter](https://img.shields.io/twitter/url/https/github.com/dmhendricks/bootstrap-grid-css.svg?style=social)](https://twitter.com/danielhendricks)\n\n# bootstrap-grid.css\n\n**Original Copyright:** (c) 2011-2018 Twitter, Inc.\n\n### :pushpin: [View Demo](https://dmhendricks.github.io/demo/bootstrap-grid-css/)\n\n## Purpose\n\nThere are times when you only want to use the excellent Bootstrap grid functionality but don't want the extra classes and typography changes included, often when asked to work on existing client sites that do not include any responsive frameworks and you just want to get the changes done quickly and responsively. With Bootstrap 4, extracting the grid functionality is easy.\n\n### Included Features\n\n* Grid framework\n* Responsive Utilities (ported from alpha)\n* `.img-fluid` class (formerly `.img-responsive` in Bootstrap 3)\n* `clearfix` utility\n\n## Installation\n\n### NPM\n\n```bash\nnpm install bootstrap-grid-only-css --save\n```\n\n### Bower Installation\n\n```bash\nbower install bootstrap4-grid-only\n```\n\n## Usage\n\nUnlike traditional Bootstrapped, the grid must be wrapped with the `.bootstrap-wrapper` class in an attempt to minimize potential conflicts with other libraries.\n\nSimply download the appropriate CSS file and include it in your HTML header (you only need one):\n* `bootstrap-grid.css` - The expanded version\n* `bootstrap-grid.min.css` - The minified version\n\nDocumentation for the [grid system](https://getbootstrap.com/docs/4.1/layout/grid/) may be found on the [Bootstrap web site](https://getbootstrap.com/).\n\n### Linking Stylesheets\n\nAdd the following to the head of your web page:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/css/bootstrap-grid.min.css\" /\u003e\n```\n\n#### CDN: jsDelivr\n\nSupports both HTTP and HTTPS.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"//cdn.jsdelivr.net/gh/dmhendricks/bootstrap-grid-css@4.1.3/dist/css/bootstrap-grid.min.css\" /\u003e\n```\n\n### Basic Usage Example\n\n```html\n\u003cdiv class=\"bootstrap-wrapper\"\u003e\n\t\u003cdiv class=\"container\"\u003e\n\t\t\u003cdiv class=\"row\"\u003e\n\t\t\t\u003cdiv class=\"col-md-4\"\u003e.col-md-4\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-md-4\"\u003e.col-md-4\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-md-4\"\u003e.col-md-4\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\t\u003cdiv class=\"row hidden-sm-down\"\u003e \u003c!-- Hidden on small screens --\u003e\n\t\t\t\u003cdiv class=\"col-md-6\"\u003e.col-md-6\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-md-6\"\u003e.col-md-6\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\nSee the [demo](https://dmhendricks.github.io/demo/bootstrap-grid-css/) for more information.\n\n## Custom Build Tutorial\n\nYou can make your own custom build of Bootstrap by downloading the source, making changes to the SCSS files and compiling.\n\nHere is how to accomplish what I have done here:\n\n1. Download and extract the Bootstrap [source files](https://github.com/twbs/bootstrap/)\n2. Modify the SCSS files as desired. For example, to generate this build I added the `.bootstrap-wrapper` class to `scss/bootstrap-grid.scss` (lines 23 and 50), included the responsive utilities (line 43) and `.img-fluid` class (line 48). I also ported the `scss/utilities/_visibility.scss` [responsive utilities](http://v4-alpha.getbootstrap.com/layout/responsive-utilities/) that were found in alpha for convenience.\n3. Once you are done making your changes, use a program like [Koala](http://koala-app.com/) or [Scout](http://scout-app.io/) to compile the SCSS files into usable CSS files. If you have Gulp and npm installed, you can simply run the command: `gulp styles`\n","funding_links":["https://paypal.me/danielhendricks"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmhendricks%2Fbootstrap-grid-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmhendricks%2Fbootstrap-grid-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmhendricks%2Fbootstrap-grid-css/lists"}