Customize
Assuming you’re using a package manager like npm, you’ll have a file structure that looks like this:
your-project/
16 | ├── scss/
17 | │ └── custom.scss
18 | └── node_modules/
19 | │ └── bootstrap/
20 | │ ├── js/
21 | │ └── scss/
22 | │ └── use-bootstrap-tag/
23 | │ ├── dist/
24 | │ └── scss/
25 | └── index.html
26 | In your custom.scss, you’ll import Bootstrap’s source Sass files. You have two options: include all of Bootstrap, or pick the parts you need.
// Custom.scss
27 | // Option A: Include all of Bootstrap
28 |
29 | // Include any default variable overrides here (though functions won't be available)
30 |
31 | @import "../node_modules/bootstrap/scss/bootstrap";
32 | @import "../node_modules/use-bootstrap-tag/scss/use-bootstrap-tag";
33 |
34 | // Then add additional custom code here
35 | // Custom.scss
36 | // Option B: Include parts of Bootstrap
37 |
38 | // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
39 | @import "../node_modules/bootstrap/scss/functions";
40 |
41 | // 2. Include any default variable overrides here
42 |
43 | // 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
44 | @import "../node_modules/bootstrap/scss/variables";
45 | @import "../node_modules/bootstrap/scss/variables-dark";
46 |
47 | // 4. Include any default map overrides here
48 |
49 | // 5. Include remainder of required parts
50 | @import "../node_modules/bootstrap/scss/maps";
51 | @import "../node_modules/bootstrap/scss/mixins";
52 | @import "../node_modules/bootstrap/scss/root";
53 |
54 | // 6. Optionally include any other parts as needed
55 | @import "../node_modules/bootstrap/scss/utilities";
56 | @import "../node_modules/bootstrap/scss/reboot";
57 | @import "../node_modules/bootstrap/scss/type";
58 | @import "../node_modules/bootstrap/scss/images";
59 | @import "../node_modules/bootstrap/scss/containers";
60 | @import "../node_modules/bootstrap/scss/grid";
61 | @import "../node_modules/bootstrap/scss/helpers";
62 |
63 | // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
64 | @import "../node_modules/bootstrap/scss/utilities/api";
65 |
66 | // 8. Include use-bootstrap-tag
67 | @import "../node_modules/use-bootstrap-tag/scss/use-bootstrap-tag";
68 |
69 | // 9. Add additional custom code here
70 | By default, components inherit their styles from the default Bootstrap theme. Therefore, any changes made to Bootstrap will automatically affect the styling of these components as well.
Read more about customize bootstrap styles at https://getbootstrap.com/docs/5.3/customize/sass/.
use-bootstrap-tag
Tag input for Bootstrap 5.
Features
- Custom separator: Set a specific delimiter character between tag elements.
- Enable/disable duplicates: Toggle the allowance of duplicate tags.
- Custom transformation: Define personalized modifications to input tag entries.
- Max limit: Set a maximum limit of tags that can be added.
- Sizing: Adjustable sizing to match user preferences or layouts.
- Validation: Reflects validation states visually to align with Bootstrap's form validationfeedback.
Repository
https://github.com/use-bootstrap/use-bootstrap-tagLicense
MIT
Install
To install this library, you can use npm for package management, the CDN for direct inclusion, or manually download it from the GitHub releases page.
-
Install
use-bootstrap-tagin your Node.js powered apps with the npm package:npm install use-bootstrap-tag -
After installation, you can import the library into your project as follows:
import 'use-bootstrap-tag/dist/use-bootstrap-tag.css' 17 | import UseBootstrapTag from 'use-bootstrap-tag'
You can use use-bootstrap-tag directly via CDN:
<link href="https://cdn.jsdelivr.net/npm/use-bootstrap-tag@2.2.2/dist/use-bootstrap-tag.min.css" rel="stylesheet">
18 | <script src="https://cdn.jsdelivr.net/npm/use-bootstrap-tag@2.2.2/dist/use-bootstrap-tag.min.js"></script>Example
<!doctype html>
19 | <html lang="en">
20 | <head>
21 | <meta charset="utf-8">
22 | <meta name="viewport" content="width=device-width, initial-scale=1">
23 | <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
24 | <link href="https://cdn.jsdelivr.net/npm/use-bootstrap-tag@2.2.2/dist/use-bootstrap-tag.min.css" rel="stylesheet">
25 | <title>Example</title>
26 | </head>
27 | <body>
28 | <div class="container pt-4">
29 | <input type="text" class="form-control" value="html,css,js" id="example">
30 | </div>
31 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
32 | <script src="https://cdn.jsdelivr.net/npm/use-bootstrap-tag@2.2.2/dist/use-bootstrap-tag.min.js"></script>
33 | <script>
34 | UseBootstrapTag(document.getElementById('example'))
35 | </script>
36 | </body>
37 | </html>Visit the GitHub releases page to download the latest version
Methods
| Name | Params | Returns | Example |
|---|---|---|---|
addValue | string | array | void | |
removeValue | string | array | void | |
getValue | null | string | |
getValues | null | array | |
17 |
39 |
40 |
--------------------------------------------------------------------------------
/src/components/Layout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import '@fontsource/hind-siliguri/latin.css'
3 | import '@fontsource/inter-tight/latin.css'
4 | import 'bootstrap/dist/css/bootstrap.min.css'
5 | import '../lib/use-bootstrap-tag.scss'
6 | import '../style.scss'
7 | import pkg from '../../package.json'
8 | import Pagination from './Pagination.astro'
9 | interface Props {
10 | title?: string
11 | }
12 | const props = Astro.props
13 | const pathname = Astro.url.pathname
14 |
15 | const links = [
16 | {
17 | href: '/',
18 | text: 'Home',
19 | },
20 | {
21 | href: '/install.html',
22 | text: 'Install',
23 | },
24 | {
25 | href: '/demo.html',
26 | text: 'Demo',
27 | },
28 | {
29 | href: '/methods.html',
30 | text: 'Methods',
31 | },
32 | {
33 | href: '/customize.html',
34 | text: 'Customize',
35 | },
36 | ]
37 | ---
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
18 |
29 |
38 |
30 |
37 |
31 |
33 |
34 |
36 |
61 |
85 |
103 |
104 |
105 |
86 |
102 |
87 |
100 |
101 |
106 |
108 |
109 |
110 |
111 |
113 |
114 |
115 |
--------------------------------------------------------------------------------
/src/components/Pagination.astro:
--------------------------------------------------------------------------------
1 | ---
2 | interface Props {
3 | links: {
4 | href: string
5 | text: string
6 | }[]
7 | }
8 | const props = Astro.props
9 | const links = props.links
10 | const pathname = Astro.url.pathname
11 |
12 | let prevLink = null as null | { href: any; text: any }
13 | for (let i = 0; i < links.length; i++) {
14 | if (links[i].href === pathname) {
15 | if (i > 0) {
16 | prevLink = links[i - 1]
17 | }
18 | break
19 | }
20 | }
21 |
22 | let nextLink = null as null | { href: any; text: any }
23 | for (let i = 0; i < links.length; i++) {
24 | if (links[i].href === pathname) {
25 | if (i < links.length - 1) {
26 | nextLink = links[i + 1]
27 | }
28 | break
29 | }
30 | }
31 | ---
32 |
33 |
73 |
--------------------------------------------------------------------------------
/src/components/customize/CustomizeA.scss:
--------------------------------------------------------------------------------
1 | // Custom.scss
2 | // Option A: Include all of Bootstrap
3 |
4 | // Include any default variable overrides here (though functions won't be available)
5 |
6 | @import "../node_modules/bootstrap/scss/bootstrap";
7 | @import "../node_modules/use-bootstrap-tag/scss/use-bootstrap-tag";
8 |
9 | // Then add additional custom code here
10 |
--------------------------------------------------------------------------------
/src/components/customize/CustomizeB.scss:
--------------------------------------------------------------------------------
1 | // Custom.scss
2 | // Option B: Include parts of Bootstrap
3 |
4 | // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
5 | @import "../node_modules/bootstrap/scss/functions";
6 |
7 | // 2. Include any default variable overrides here
8 |
9 | // 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
10 | @import "../node_modules/bootstrap/scss/variables";
11 | @import "../node_modules/bootstrap/scss/variables-dark";
12 |
13 | // 4. Include any default map overrides here
14 |
15 | // 5. Include remainder of required parts
16 | @import "../node_modules/bootstrap/scss/maps";
17 | @import "../node_modules/bootstrap/scss/mixins";
18 | @import "../node_modules/bootstrap/scss/root";
19 |
20 | // 6. Optionally include any other parts as needed
21 | @import "../node_modules/bootstrap/scss/utilities";
22 | @import "../node_modules/bootstrap/scss/reboot";
23 | @import "../node_modules/bootstrap/scss/type";
24 | @import "../node_modules/bootstrap/scss/images";
25 | @import "../node_modules/bootstrap/scss/containers";
26 | @import "../node_modules/bootstrap/scss/grid";
27 | @import "../node_modules/bootstrap/scss/helpers";
28 |
29 | // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
30 | @import "../node_modules/bootstrap/scss/utilities/api";
31 |
32 | // 8. Include use-bootstrap-tag
33 | @import "../node_modules/use-bootstrap-tag/scss/use-bootstrap-tag";
34 |
35 | // 9. Add additional custom code here
36 |
--------------------------------------------------------------------------------
/src/components/customize/CustomizeStructure.txt:
--------------------------------------------------------------------------------
1 | your-project/
2 | ├── scss/
3 | │ └── custom.scss
4 | └── node_modules/
5 | │ └── bootstrap/
6 | │ ├── js/
7 | │ └── scss/
8 | │ └── use-bootstrap-tag/
9 | │ ├── dist/
10 | │ └── scss/
11 | └── index.html
12 |
--------------------------------------------------------------------------------
/src/components/demo/AllowDuplicates.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
--------------------------------------------------------------------------------
/src/components/demo/Basic.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
--------------------------------------------------------------------------------
/src/components/demo/CustomSeparator.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
--------------------------------------------------------------------------------
/src/components/demo/Disabled.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
--------------------------------------------------------------------------------
/src/components/demo/Label.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
--------------------------------------------------------------------------------
/src/components/demo/MaxLimit.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
--------------------------------------------------------------------------------
/src/components/demo/Methods.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
50 |
--------------------------------------------------------------------------------
/src/components/demo/NoInputOnblur.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
--------------------------------------------------------------------------------
/src/components/demo/Placeholder.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
--------------------------------------------------------------------------------
/src/components/demo/Sizing.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
12 |
--------------------------------------------------------------------------------
/src/components/demo/TransformTags.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
--------------------------------------------------------------------------------
/src/components/demo/Validation.astro:
--------------------------------------------------------------------------------
1 |
9 |
10 |
30 |
31 |
32 | Server-side
33 |
34 |
43 |
--------------------------------------------------------------------------------
/src/components/demo/Variants.astro:
--------------------------------------------------------------------------------
1 |
35 |
36 |
38 | This field is required.
37 |
39 |
40 |
42 | Looks good!
41 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
16 |
--------------------------------------------------------------------------------
/src/components/demo/XPosition.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
13 |
--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// Customize
11 |Assuming you’re using a package manager like npm, you’ll have a file structure that looks like this:
12 |In your custom.scss, you’ll import Bootstrap’s source Sass files. You have two options: include all of Bootstrap, or pick the parts you need.
By default, components inherit their styles from the default Bootstrap theme. Therefore, any changes made to Bootstrap will automatically affect the styling of these components as well.
17 |Read more about customize bootstrap styles at https://getbootstrap.com/docs/5.3/customize/sass/.
18 |Demo
87 |
88 | {
89 | demo.map((item) => (
90 |
98 |
91 |
92 |
94 |
95 | ))
96 | }
97 | {pkg.name}
26 |{pkg.description}.
27 |
28 | {badges.map((badge) => 
)}
29 |
30 | 31 |
Features
32 |-
33 |
- Custom separator: Set a specific delimiter character between tag elements. 34 |
- Enable/disable duplicates: Toggle the allowance of duplicate tags. 35 |
- Custom transformation: Define personalized modifications to input tag entries. 36 |
- Max limit: Set a maximum limit of tags that can be added. 37 |
- Sizing: Adjustable sizing to match user preferences or layouts. 38 |
- Validation: Reflects validation states visually to align with Bootstrap's form validationfeedback. 39 |
41 |
Repository
42 | {pkg.repository} 43 |44 |
License
45 |{pkg.license}
46 |
21 |
22 |
23 |
24 | ${cdnJs}
25 |
28 |
29 | `
30 | ---
31 |
32 | Install
34 |To install this library, you can use npm for package management, the CDN for direct inclusion, or manually download it from the GitHub releases page.
35 | 46 |
47 |
69 |
48 |
59 | -
49 |
-
50 |
Install
51 |{pkg.name}in your Node.js powered apps with the npm package:52 |
53 | -
54 |
After installation, you can import the library into your project as follows:
55 |56 |
57 |
60 |
65 | You can use {pkg.name} directly via CDN:
Example
63 |
66 |
68 | Visit the GitHub releases page to download the latest version
67 |Methods
14 |
15 |
16 |
17 |
63 |
64 | | Name | 19 |Params | 20 |Returns | 21 |Example | 22 |
|---|---|---|---|
addValue |
27 | string | array |
28 | void |
29 |
30 | |
34 |
removeValue |
37 | string | array |
38 | void |
39 |
40 | |
44 |
getValue |
47 | null |
48 | string |
49 |
50 | |
52 |
getValues |
55 | null |
56 | array |
57 |
58 | |
60 |