{"id":13707473,"url":"https://github.com/twbs/bootstrap-npm-starter","last_synced_at":"2025-10-01T20:32:06.853Z","repository":{"id":37420875,"uuid":"256327195","full_name":"twbs/bootstrap-npm-starter","owner":"twbs","description":"Starter template for new building with Bootstrap 4 in npm projects.","archived":true,"fork":false,"pushed_at":"2023-03-30T19:06:20.000Z","size":1094,"stargazers_count":1228,"open_issues_count":0,"forks_count":464,"subscribers_count":66,"default_branch":"main","last_synced_at":"2024-10-29T23:59:58.860Z","etag":null,"topics":["bootstrap","bootstrap-template","bootstrap4","sass"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/twbs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":"twbs","open_collective":"bootstrap"}},"created_at":"2020-04-16T20:52:07.000Z","updated_at":"2024-10-27T01:55:23.000Z","dependencies_parsed_at":"2023-09-24T09:18:00.252Z","dependency_job_id":null,"html_url":"https://github.com/twbs/bootstrap-npm-starter","commit_stats":{"total_commits":75,"total_committers":6,"mean_commits":12.5,"dds":0.5866666666666667,"last_synced_commit":"2258953be2d3bed2edfdee796aa7da9a550b3faf"},"previous_names":[],"tags_count":7,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twbs%2Fbootstrap-npm-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twbs%2Fbootstrap-npm-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twbs%2Fbootstrap-npm-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twbs%2Fbootstrap-npm-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twbs","download_url":"https://codeload.github.com/twbs/bootstrap-npm-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234706883,"owners_count":18874595,"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-template","bootstrap4","sass"],"created_at":"2024-08-02T22:01:32.484Z","updated_at":"2025-10-01T20:32:01.466Z","avatar_url":"https://github.com/twbs.png","language":"HTML","funding_links":["https://github.com/sponsors/twbs","https://opencollective.com/bootstrap"],"categories":["HTML","Bootstrap"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\".github/logo.png\" width=\"300\" height=\"175\" alt=\"Bootstrap npm logo\"\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eBootstrap npm starter template\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003eCreate new Bootstrap-powered npm projects in no time.\u003c/p\u003e\n\n## About\n\n`bootstrap-npm-starter` is a GitHub template repository for creating new Bootstrap 4 based npm projects, maintained by Bootstrap co-author @mdo. You can also use it as your own Bootstrap prototyping sandbox. For Bootstrap 5 examples, see [our new `twbs/examples` repo](https://github.com/twbs/examples).\n\n[![CI](https://github.com/twbs/bootstrap-npm-starter/actions/workflows/ci.yml/badge.svg)](https://github.com/twbs/bootstrap-npm-starter/actions/workflows/ci.yml?query=branch%3Amain)\n\n## Repo template\n\nSetup as a starter template, you can easily generate a new GitHub repository. From the repository homepage, click the `Use this template` button.\n\n## What's included\n\n- Single HTML page (`index.html`) to demonstrate how to include Bootstrap.\n- Includes [Bootstrap](https://getbootstrap.com) (currently using v4.6.2) source files via npm.\n- Includes [Bootstrap Icons](https://icons.getbootstrap.com) (v1.10.3), which includes over 1,800 icons available as SVGs and web fonts.\n- npm scripts (see `package.json`) for compiling and autoprefixing Sass, watching for changes, and starting a local server with live reload.\n- Example stylesheet (`scss/starter.scss`) highlighting two ways to include and customize Bootstrap.\n- Example JavaScript file (`assets/js/starter.js`) showing how to import all of Bootstrap, or just the parts you need.\n\n## Usage\n\nBe sure to have [Node.js](https://nodejs.org/) installed before proceeding. **We recommend only using Node's LTS releases, which is currently at v18.x.**\n\n```shell\n# Clone the repo\ngit clone https://github.com/twbs/bootstrap-npm-starter\ncd bootstrap-npm-starter\n\n# Install dependencies\nnpm i\n\n# Compile Sass\nnpm run css-compile\n\n# Start server and watch Sass\nnpm start\n\n# Watch Sass for changes (uses nodemon)\nnpm run watch\n\n# Start local server\nnpm run server\n\n# Watches Sass for changes and starts a local server\nnpm start\n```\n\nFor the most straightforward development, open Terminal and run `npm start`.\n\nOpen \u003chttp://localhost:3000\u003e to see the page in action.\n\n## Scripts\n\nThe following npm scripts are available to you in this starter repo. With the exception of `npm start` and `npm test`, the remaining scripts can be run from your command line with `npm run scriptName`.\n\n| Script | Description |\n| --- | --- |\n| `server` | Starts a local server (\u003chttp://localhost:3000\u003e) for development with live reloads |\n| `watch` | Automatically recompiles CSS as it watches the `scss` directory for changes |\n| `css` | Runs `css-compile` and `css-prefix` |\n| `css-compile` | Compiles source Sass into CSS |\n| `css-lint` | Runs [Stylelint](https://stylelint.io) against source Sass for code quality |\n| `css-prefix` | Runs [Autoprefixer](https://github.com/postcss/autoprefixer) on the compiled CSS |\n| `css-purge` | Runs [PurgeCSS](https://purgecss.com) to remove CSS that is unused by `index.html` |\n| `test` | Runs `css-lint` and `css`, in sequential order |\n\n## Advanced usage\n\nTake this starter repository to another level with some built-in addons that you can enable and customize.\n\n### Optimizing CSS\n\nBefore you start to use tools that remove Bootstrap styling like [PurgeCSS](#purgecss), you can make some broad optimizations by only including the stylesheets you think you'll need.\n\nLook to the `scss/starter.scss` file for your two options of including all of Bootstrap, or a subset of our styles and components. By default we've only imported the stylesheets that Bootstrap requires plus those of the components we're planning to use.\n\nUncomment specific lines as needed, then recompile to use them.\n\n### Optimizing JS\n\nSimilar to optimizing CSS, we publish individual scripts for each of our plugins. This allows you to import only what you need, versus the entire bundle and dependencies. For example, if you don't plan on using dropdowns, tooltips, or popovers, you can safely omit the Popper.js depdendency. Bootstrap 4 requires jQuery though, so you won't be able to safely remove that until v5 launches.\n\nSee the `js/starter.js` file for an example of how to import all of Bootstrap's JS or just the individual pieces. By default we've only imported our modal JavaScript since we have no need for anything else.\n\nYou can add more options here, or import the entire `bootstrap-bundle.min.js` file, to get all JavaScript plugins and Popper.js.\n\n### PurgeCSS\n\n[PurgeCSS](https://purgecss.com/) is a [PostCSS](https://postcss.org) plugin that removes unused CSS based on your site's HTML. It finds rulesets that are unused by your HTML and removes them, ensuring only what's needed is sent to your site's visitors while improving file size and performance.\n\nWe've included a single npm script that runs PurgeCSS against our single `index.html` file to remove unused styles from `assets/css/starter.css`.\n\nTo purge your CSS, run `npm run css-purge` from the command line. This executes the following:\n\n```shell\nnpm purgecss --css assets/css/starter.css --content index.html --output assets/css/\n```\n\nPurgeCSS is a PostCSS plugin and [can be configured](https://purgecss.com/configuration.html) to your exact needs with a little extra effort, including additional [command line options](https://purgecss.com/CLI.html).\n\n## Actions CI\n\nWe've included some simple GitHub Actions in this template repo. When you generate your new project from here, you'll have the same tests that run whenever a pull request is created. We've included Actions for the following:\n\n- Stylelint for your CSS\n\nWhen your repository is generated, you won't see anything in the Actions tab until you create a new pull request. You can customize these Actions, add new ones, or remove them outright if you wish.\n\n[Learn more about GitHub Actions](https://github.com/features/actions), [read the Actions docs](https://help.github.com/en/actions), or [browse the Actions Marketplace](https://github.com/marketplace/actions).\n\n### Stylelint\n\nStylelint is included, as is Bootstrap's default Stylelint config, [stylelint-config-twbs-bootstrap](https://github.com/twbs/stylelint-config-twbs-bootstrap). This is the same linter configuration we use in the main Bootstrap project. It's run via the `npm test` command, which is invoked in our `ci.yml` Actions workflow file.\n\nAt the root of the repo, `.stylelintignore` is used to list files that we ignore when linting and `.stylelintrc` is where we tell Stylelint to use the Bootstrap config. The former is recommended based on your specific needs, while the latter is required.\n\n## Copyright\n\n\u0026copy; @mdo 2020-2023 and licensed MIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwbs%2Fbootstrap-npm-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwbs%2Fbootstrap-npm-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwbs%2Fbootstrap-npm-starter/lists"}