A Bootstrap version 5.3 BC Government look-and-feel featuring:
- The BC Sans typeface
- Compatibility with pure Bootstrap markup
The project is a successor to the previous Gov-4.0-Bootstrap-theme Gov-2.0-Bootstrap-Skeleton and mygovbc-bootstrap-theme. We combined the best of all projects and leverage the latest Bootstrap version.
-
You can directly use the minified CSS and JS files in your project. The minified CSS file to link can be found via this path:
dist/css/bootstrap-theme.min.cssTo ensure dropdowns, tooltips, and popovers function properly, you can import the minified JS file into your project. which can be found via this path:
dist/js/bootstrap-theme.min.jsThese files can be added to your project's
<head>section:<head> ... <script defer="defer" src="js/bootstrap-theme.min.js"></script> <link href="css/bootstrap-theme.min.css" rel="stylesheet"> </head>
-
This section describes how to change the theme or remove unneeded CSS
-
You'll need the following tools installed on your device:
- NodeJS 20 LTS+ with NPM 10+ to build
-
After your tools are in place, you should install some packages. In the working directory:
git clone https://github.com/bcgov/bootstrap-v5-theme.git cd bootstrap-v5-theme npm install -
To build the styles, JavaScript and other assets, use:
npm run build
Or for continuous building and real-time updates as you make changes:
npm start
-
-
The CHANGELOG outlines the majority of classes and changes needed for migration, allowing you to easily refer to and perform search and replace where necessary.
If you need to add or modify utilities, you can consult the official bootstrap migration guide for a comprehensive list of changes.
Refer to the official Bootstrap documentation to learn about extending or enhancing this theme.
Tooling and build follow the same steps as SCSS To Modify Variables/Themes section
https://www.npmjs.com/package/@bcgov/bootstrap-v5-theme
If you would like to update the project and would like to push your changes to the npm registry, the following will be useful.
To push to the npm registry, you must ensure that the version number has been updated to reflect any of the changes that you’ve made. Upon following semantic versioning, and updating the version number in package.json you can then publish the package in your own namespace.
- Ensure you are logged into your npm account. To log in via the terminal, run the following:
npm login- upon successful completion you will see the following:
Logged in on https://registry.npmjs.org/.-
Now you can publish your package
- Run the following command in your termnial
npm publish --access=publicIf you are publishing to a namespace, you will have to ensure that --acess=public is included in your run command as packages for an org are private by default
Note: You can test your changes locally by changing the name in the package.json to @<your-namespace>/bootstrap-v5-theme and publishing there. Once you are satisfied, you can republish to the @bcgov org.
If Bootstrap has a minor update and you wish to update the minified CSS and JS files, do the following:
- Run
npm run buildin order to build the needed assests. - Mark a new release on GitHub
- Publish the updated dist folder to NPM JS Registry as a new NPM package version