https://github.com/mintplayer/mintplayer-ng-bootstrap
Bootstrap library for angular
https://github.com/mintplayer/mintplayer-ng-bootstrap
angular bootstrap
Last synced: 28 days ago
JSON representation
Bootstrap library for angular
- Host: GitHub
- URL: https://github.com/mintplayer/mintplayer-ng-bootstrap
- Owner: MintPlayer
- Created: 2021-09-03T11:06:13.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-03-23T15:06:16.000Z (about 1 year ago)
- Last Synced: 2025-05-05T04:17:50.335Z (11 months ago)
- Topics: angular, bootstrap
- Language: TypeScript
- Homepage: https://bootstrap.mintplayer.com
- Size: 21.5 MB
- Stars: 2
- Watchers: 1
- Forks: 3
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @mintplayer/ng-bootstrap
# Demo
A complete demo application with all components is showcased [here](https://bootstrap.mintplayer.com)
## Version info
| License | Build status | Code coverage |
|--------------|--------------|---------------|
| [](https://opensource.org/licenses/Apache-2.0) | [](https://github.com/MintPlayer/mintplayer-ng-bootstrap/actions/workflows/publish-master.yml) | [](https://codecov.io/gh/MintPlayer/mintplayer-ng-bootstrap) |
| Package | Version |
|------------------------------|---------|
| @mintplayer/ng-animations | [](https://badge.fury.io/js/%40mintplayer%2Fng-animations) |
| @mintplayer/ng-click-outside | [](https://badge.fury.io/js/%40mintplayer%2Fng-click-outside) |
| @mintplayer/ng-focus-on-load | [](https://badge.fury.io/js/%40mintplayer%2Fng-focus-on-load) |
| @mintplayer/ng-bootstrap | [](https://badge.fury.io/js/%40mintplayer%2Fng-bootstrap) |
| @mintplayer/ng-qr-code | [](https://badge.fury.io/js/%40mintplayer%2Fng-qr-code) |
## Installation
npm i @mintplayer/ng-bootstrap
This should also install the peerDependencies in your project.
Now you should import the `bootstrap` stylesheet in the application. To do so, you have 2 options:
Update your `angular.json`:
"styles": [
"@mintplayer/ng-bootstrap/bootstrap.scss",
"src/styles.scss"
],
Or add the stylesheet in your `styles.scss`
@import '@mintplayer/ng-bootstrap/bootstrap.scss';
## Components
All components are showcased in the angular app included in the project. You can simply run
npm start -- --open
to discover them.
## Docker image
Alternatively you can run the docker image which is published on GitHub Container Registry
docker run -p 4200:80 ghcr.io/mintplayer/mintplayer-ng-bootstrap:master
and visit [http://localhost:4200](http://localhost:4200).
## Fonts
The `` uses fonts from bootstrap-icons which need to be included in the application. Since there's no `"assets"` field in an angular library its project configuration, we seem to have no other option than to explicitly tell the application to include them.
`angular.json` / `project.json`
{
"projects": {
...,
"xxx": {
...,
"architect": {
"build": {
"options": {
...,
"assets": [
...,
{
"glob": "*.woff|*.woff2",
"input": "node_modules/bootstrap-icons/font/fonts",
"output": "/fonts"
}
]
}
}
}
}
}
}
## VS Code snippets
This workspace contains several code snippets for [VS Code](https://code.visualstudio.com).
They are distributed on the [MarketPlace](https://marketplace.visualstudio.com/items?itemName=MintPlayer.mintplayer-ng-bootstrap-snippets) and can be installed by searching for **ng-bootstrap snippets for VS Code**
[](libs/mintplayer-ng-bootstrap-snippets/images/marketplace.png)
## Discover yourself
Make sure you have [NodeJS](https://nodejs.org/en/download/) installed.
Then run following commands
git clone https://github.com/MintPlayer/mintplayer-ng-bootstrap
npm i
npm start -- --open
## Features
- Uses `@angular/cdk/overlay`
- Uses per-component styles. Only non-generic bootstrap styles are bundled in the main bundle
- Carousel: supports touch-events
- Noscript support for **Navbar** and **Carousel**, requires `@angular/universal`