Showing preview only (2,888K chars total). Download the full file or copy to clipboard to get everything.
Repository: coreui/coreui-free-bootstrap-admin-template
Branch: main
Commit: 684f37a23b70
Files: 141
Total size: 2.7 MB
Directory structure:
gitextract_al_e0b_v/
├── .babelrc.js
├── .browserslistrc
├── .cursorrules
├── .editorconfig
├── .gitattributes
├── .github/
│ ├── CONTRIBUTING.md
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ ├── config.yml
│ │ └── feature_request.md
│ ├── ISSUE_TEMPLATE.md
│ ├── SUPPORT.md
│ └── stale.yml
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── .stylelintignore
├── .stylelintrc
├── ARCHITECTURE.md
├── DEVELOPMENT.md
├── LICENSE
├── README.md
├── build/
│ ├── change-version.mjs
│ ├── postcss.config.mjs
│ ├── pug.mjs
│ └── vendors.mjs
├── eslint.config.mjs
├── nodemon.json
├── package.json
└── src/
├── assets/
│ └── favicon/
│ ├── browserconfig.xml
│ └── manifest.json
├── js/
│ ├── charts.js
│ ├── color-modes.js
│ ├── colors.js
│ ├── config.js
│ ├── main.js
│ ├── popovers.js
│ ├── toasts.js
│ ├── tooltips.js
│ └── widgets.js
├── pug/
│ ├── _layout/
│ │ ├── default.pug
│ │ └── pages.pug
│ ├── _mixins/
│ │ ├── breadcrumb.pug
│ │ ├── callout-custom.pug
│ │ ├── callout.pug
│ │ ├── docs-components.pug
│ │ └── example.pug
│ ├── _partials/
│ │ ├── banner.pug
│ │ ├── docs-icons.pug
│ │ ├── footer.pug
│ │ ├── head.pug
│ │ ├── header.pug
│ │ ├── scripts.pug
│ │ └── sidebar.pug
│ └── views/
│ ├── 404.pug
│ ├── 500.pug
│ ├── base/
│ │ ├── accordion.pug
│ │ ├── breadcrumb.pug
│ │ ├── cards.pug
│ │ ├── carousel.pug
│ │ ├── collapse.pug
│ │ ├── list-group.pug
│ │ ├── navs-tabs.pug
│ │ ├── pagination.pug
│ │ ├── placeholders.pug
│ │ ├── popovers.pug
│ │ ├── progress.pug
│ │ ├── spinners.pug
│ │ ├── tables.pug
│ │ └── tooltips.pug
│ ├── blank.pug
│ ├── buttons/
│ │ ├── button-group.pug
│ │ ├── buttons.pug
│ │ └── dropdowns.pug
│ ├── charts.pug
│ ├── colors.pug
│ ├── forms/
│ │ ├── checks-radios.pug
│ │ ├── floating-labels.pug
│ │ ├── form-control.pug
│ │ ├── input-group.pug
│ │ ├── layout.pug
│ │ ├── range.pug
│ │ ├── select.pug
│ │ └── validation.pug
│ ├── icons/
│ │ ├── coreui-icons-brand.pug
│ │ ├── coreui-icons-flag.pug
│ │ └── coreui-icons-free.pug
│ ├── index.pug
│ ├── login.pug
│ ├── notifications/
│ │ ├── alerts.pug
│ │ ├── badge.pug
│ │ ├── modals.pug
│ │ └── toasts.pug
│ ├── register.pug
│ ├── typography.pug
│ └── widgets.pug
├── scss/
│ ├── examples.scss
│ ├── style.scss
│ └── vendors/
│ └── simplebar.scss
└── views/
├── 404.html
├── 500.html
├── base/
│ ├── accordion.html
│ ├── breadcrumb.html
│ ├── cards.html
│ ├── carousel.html
│ ├── collapse.html
│ ├── list-group.html
│ ├── navs-tabs.html
│ ├── pagination.html
│ ├── placeholders.html
│ ├── popovers.html
│ ├── progress.html
│ ├── spinners.html
│ ├── tables.html
│ └── tooltips.html
├── blank.html
├── buttons/
│ ├── button-group.html
│ ├── buttons.html
│ └── dropdowns.html
├── charts.html
├── colors.html
├── forms/
│ ├── checks-radios.html
│ ├── floating-labels.html
│ ├── form-control.html
│ ├── input-group.html
│ ├── layout.html
│ ├── range.html
│ ├── select.html
│ └── validation.html
├── icons/
│ ├── coreui-icons-brand.html
│ ├── coreui-icons-flag.html
│ └── coreui-icons-free.html
├── index.html
├── login.html
├── notifications/
│ ├── alerts.html
│ ├── badge.html
│ ├── modals.html
│ └── toasts.html
├── register.html
├── typography.html
└── widgets.html
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc.js
================================================
module.exports = {
presets: [
[
'@babel/preset-env',
{
loose: true,
bugfixes: true,
modules: false
}
]
]
};
================================================
FILE: .browserslistrc
================================================
# https://github.com/browserslist/browserslist#readme
>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11
================================================
FILE: .cursorrules
================================================
# CoreUI Free Bootstrap Admin Template - AI Context
## Project Overview
This is a Bootstrap 5 admin dashboard template built with CoreUI components. It uses Pug templating, Sass for styles, and vanilla JavaScript for interactivity.
## Critical Rules
### Component Library
- **ALWAYS use CoreUI Bootstrap components**: https://coreui.io/bootstrap/docs/
- **NEVER use Tailwind CSS** - this project uses Bootstrap 5 and custom Sass
- Use CoreUI's CSS classes and JavaScript components from `@coreui/coreui` package
- Reference the official CoreUI docs for component syntax and options
### Technology Stack
- **HTML Generation**: Pug templates (NOT raw HTML)
- **Styling**: Sass/SCSS with Bootstrap 5 (NO Tailwind)
- **JavaScript**: Vanilla JS with ES6 modules (NO frameworks like React/Vue)
- **Build System**: npm scripts with Babel, PostCSS, and custom build scripts
## Code Conventions
### JavaScript
- **No semicolons** - enforced by ESLint
- **2-space indentation**
- **ES6 modules** with import/export
- **Strict mode** enabled
- Use `/* global VariableName */` for external libraries
- Follow XO ESLint config with Unicorn plugin rules
### File Structure
```
src/
├── js/ # JavaScript modules (keep small and focused)
├── scss/ # Sass stylesheets (imports Bootstrap and CoreUI)
├── pug/ # Pug templates (source of truth for HTML)
│ ├── _layout/ # Base layouts
│ ├── _partials/ # Reusable components
│ ├── _mixins/ # Pug mixins
│ └── views/ # Page templates
├── assets/ # Images, icons, static files
└── views/ # Compiled HTML (auto-generated, don't edit)
```
### Pug Templates
- Use `extends ../_layout/default.pug` for new pages
- Override blocks: `block content`, `block scripts`
- Use mixins from `_mixins/` for common patterns
- Follow existing naming conventions for consistency
### CSS/Sass
- Use Bootstrap utilities first before custom CSS
- Use CSS custom properties (CSS variables) for theming
- Use Bootstrap/CoreUI class naming conventions (e.g., `.sidebar`, `.header`, `.card-title`)
- Support dark mode via `[data-coreui-theme="dark"]`
- **Never use**: `border-radius`, `transition`, `calc()` directly (Stylelint enforced)
### Naming Conventions
- **Files**: kebab-case (e.g., `color-modes.js`, `_header.pug`)
- **CSS classes**: Bootstrap/CoreUI conventions (e.g., `.btn-primary`, `.card-header`)
- **JavaScript variables**: camelCase
- **Constants**: UPPER_SNAKE_CASE
## Development Workflow
### Adding New Pages
1. Create Pug template in `src/pug/views/`
2. Extend base layout: `extends ../_layout/default.pug`
3. Add page-specific styles in `src/scss/` if needed
4. Add page-specific JS in `src/js/` if needed
5. Run `npm start` to compile and preview
### Adding New Components
1. **First check CoreUI docs**: https://coreui.io/bootstrap/docs/
2. Use CoreUI component markup in Pug files
3. Import required CoreUI JS modules if needed
4. Style using CoreUI/Bootstrap classes, not custom CSS
5. Create Pug mixin in `src/pug/_mixins/` for reusable patterns
### Build Commands
- `npm start` - Development with live reload
- `npm run build` - Production build
- `npm run watch-css` - Watch Sass changes
- `npm run watch-js` - Watch JavaScript changes
- `npm run watch-pug` - Watch Pug changes
## Code Quality
### Linting
- **JavaScript**: ESLint with XO config (flat config format)
- **Styles**: Stylelint with Bootstrap config
- **Formatting**: Prettier for HTML output
- Run `npm run lint` before committing
### Comments and Documentation
- **JSDoc required** for all functions with parameters
- Explain "why", not "what"
- Document complex template logic in Pug files
- Add file-level comments explaining module purpose
### Git Commits
Follow semantic commit format:
- `feat:` - New feature
- `fix:` - Bug fix
- `docs:` - Documentation changes
- `style:` - Code style changes (formatting)
- `refactor:` - Code refactoring
- `test:` - Test additions/changes
- `chore:` - Build/tooling changes
## Common Patterns
### Chart Integration
```javascript
/* global Chart */
import { getStyle } from '@coreui/utils'
const chart = new Chart(ctx, {
type: 'line',
data: { /* ... */ },
options: { /* ... */ }
})
```
### Theme Switching
```javascript
import { ColorModeStorageManager } from '@coreui/coreui/js/color-modes'
document.addEventListener('ColorSchemeChange', () => {
// React to theme changes
})
```
### Pug Mixin Usage
```pug
include _mixins/breadcrumb
+breadcrumb(['Home', 'Components', 'Buttons'])
```
## AI Assistance Guidelines
### When AI Should
- Use CoreUI Bootstrap components from official docs
- Generate Pug templates, not raw HTML
- Follow existing patterns in the codebase
- Add JSDoc comments to new JavaScript functions
- Respect ESLint/Stylelint rules
- Suggest npm scripts for tasks
### When AI Should NOT
- Use Tailwind CSS classes
- Use React/Vue/Angular components
- Edit compiled files in `dist/` or `src/views/`
- Add unnecessary dependencies
- Break existing build pipeline
- Ignore linting errors
## External Dependencies
### Core Libraries
- `@coreui/coreui` - CoreUI component library
- `chart.js` - Charts and graphs
- `simplebar` - Custom scrollbars
### Build Tools
- `sass` - CSS preprocessor
- `@babel/core` - JavaScript transpiler
- `pug` - HTML templating
- `postcss` - CSS post-processing
- `browser-sync` - Live reload server
## Browser Support
Defined in `.browserslistrc`:
- Last 1 major version of modern browsers
- Chrome, Firefox, Edge, Safari
- iOS Safari, Chrome Android
## Resources
- CoreUI Docs: https://coreui.io/bootstrap/docs/
- Chart.js Docs: https://www.chartjs.org/
- Pug Docs: https://pugjs.org/
## Project Maintainer Notes
- License: MIT
- Version: 5.3.0
- Repository: https://github.com/coreui/coreui-free-bootstrap-admin-template
================================================
FILE: .editorconfig
================================================
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
[*.pug]
trim_trailing_whitespace = false
================================================
FILE: .gitattributes
================================================
# Enforce Unix newlines
* text=auto eol=lf
# Don't diff or textually merge source maps
*.map binary
================================================
FILE: .github/CONTRIBUTING.md
================================================
# Contributing to CoreUI
Looking to contribute something to CoreUI? **Here's how you can help.**
Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved.
Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue or assessing
patches and features.
## Using the issue tracker
The [issue tracker](https://github.com/coreui/coreui-free-bootstrap-admin-template/issues) is
the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests)
and [submitting pull requests](#pull-requests), but please respect the following
restrictions:
* Please **do not** use the issue tracker for personal support requests.
* Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
Use [GitHub's "reactions" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments)
instead.
## Bug reports
A bug is a _demonstrable problem_ that is caused by the code in the repository.
Good bug reports are extremely helpful, so thanks!
Guidelines for bug reports:
0. **Validate and lint your code** — to ensure your problem isn't caused by a simple error in your own code.
1. **Use the GitHub issue search** — check if the issue has already been reported.
2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` or development branch in the repository.
3. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example. [This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template.
A good bug report shouldn't leave others needing to chase you up for more
information. Please try to be as detailed as possible in your report. What is
your environment? What steps will reproduce the issue? What browser(s) and OS
experience the problem? Do other browsers show the bug differently? What
would you expect to be the outcome? All these details will help people to fix
any potential bugs.
Example:
> Short and descriptive example bug report title
>
> A summary of the issue and the browser/OS environment in which it occurs. If
> suitable, include the steps required to reproduce the bug.
>
> 1. This is the first step
> 2. This is the second step
> 3. Further steps, etc.
>
> `<url>` - a link to the reduced test case
>
> Any other information you want to share that is relevant to the issue being
> reported. This might include the lines of code that you have identified as
> causing the bug, and potential solutions (and your opinions on their
> merits).
## Feature requests
Feature requests are welcome. Before opening a feature request, please take a
moment to find out whether your idea fits with the scope and aims of the
project. It's up to *you* to make a strong case to convince the project's
developers of the merits of this feature. Please provide as much detail
and context as possible.
## Pull requests
Good pull requests—patches, improvements, new features—are a fantastic
help. They should remain focused in scope and avoid containing unrelated
commits.
**Please ask first** before embarking on any significant pull request (e.g.
implementing features, refactoring code, porting to a different language),
otherwise you risk spending a lot of time working on something that the
project's developers might not want to merge into the project.
Adhering to the following process is the best way to get your work
included in the project:
1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,
and configure the remotes:
```bash
# Clone your fork of the repo into the current directory
git clone https://github.com/<your-username>/coreui.git
# Navigate to the newly cloned directory
cd coreui
# Assign the original repo to a remote called "upstream"
git remote add upstream https://github.com/coreui/coreui.git
```
2. If you cloned a while ago, get the latest changes from upstream:
```bash
git checkout master
git pull upstream master
```
3. Create a new topic branch (off the main project development branch) to
contain your feature, change, or fix:
```bash
git checkout -b <topic-branch-name>
```
4. Commit your changes in logical chunks. Please adhere to these [git commit
message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
or your code is unlikely to be merged into the main project. Use Git's
[interactive rebase](https://help.github.com/articles/interactive-rebase)
feature to tidy up your commits before making them public.
5. Locally merge (or rebase) the upstream development branch into your topic branch:
```bash
git pull [--rebase] upstream master
```
6. Push your topic branch up to your fork:
```bash
git push origin <topic-branch-name>
```
7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
with a clear title and description against the `master` branch.
**IMPORTANT**: By submitting a patch, you agree to allow the project owners to
license your work under the terms of the [MIT License](LICENSE).
### Semantic Git commit messages
Inspired by Sparkbox's awesome article on
[semantic commit messages](http://seesparkbox.com/foundry/semantic_commit_messages).
Please use following commit message format.
* chore (updating npm tasks etc; no production code change) -> ```git test -m 'chore: commit-message-here'```
* docs (changes to documentation) -> ```git commit -m 'docs: commit-message-here'```
* feat (new feature) -> ```git commit -m 'feat: commit-message-here'```
* fix (bug fix) -> ```git commit -m 'fix: commit-message-here'```
* refactor (refactoring production code) -> ```git commit -m 'refactor: commit-message-here'```
* style (formatting, missing semi colons, etc; no code change) -> ```git commit -m 'style: commit-message-here'```
* test (adding missing tests, refactoring tests; no production code change) -> ```git test -m 'refactor: commit-message-here'```
## Code guidelines
### HTML
[Adhere to the Code Guide.](http://codeguide.co/#html)
- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.
### CSS
[Adhere to the Code Guide.](http://codeguide.co/#css)
- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast).
- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines) for more details.
### JS
- No semicolons (in client-side JS)
- 2 spaces (no tabs)
- strict mode
- "Attractive"
- Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](http://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](http://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.
## License
By contributing your code, you agree to license your contribution under the [MIT License](LICENSE).
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
custom: "https://coreui.io/pricing?support=bootstrap"
open_collective: coreui
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Tell us about a bug you may have identified in CoreUI.
title: ''
labels: ''
assignees: ''
---
Before opening:
- [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-bootstrap-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue)
- [Validate](https://html5.validator.nu/) any HTML to avoid common problems
- Read the [contributing guidelines](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/.github/CONTRIBUTING.md)
Bug reports must include:
- Operating system and version (Windows, macOS, Android, iOS)
- Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser)
- A [reduced test case](https://css-tricks.com/reduced-test-cases/) or suggested fix using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/)
================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
contact_links:
- name: Ask a question
url: https://community.coreui.io/
about: Ask and discuss questions with other CoreUI community members
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for a new feature in CoreUI.
title: ''
labels: feature
assignees: ''
---
Before opening:
- [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-bootstrap-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue)
- Read the [contributing guidelines](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/.github/CONTRIBUTING.md)
Feature requests must include:
- As much detail as possible for what we should add and why it's important to Bootstrap
- Relevant links to prior art, screenshots, or live demos whenever possible
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
Before opening an issue:
- [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-bootstrap-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue)
- Prepare a [reduced test case](https://css-tricks.com/reduced-test-cases/) for any bugs
- Read the [contributing guidelines](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/.github/CONTRIBUTING.md)
When asking general "how to" questions:
- Please do not open an issue here
When reporting a bug, include:
- Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile)
- Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
- Reduced test cases and potential fixes using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/)
When suggesting a feature, include:
- As much detail as possible for what we should add and why it's important to CoreUI Admin Template
- Relevant links to prior art, screenshots, or live demos whenever possible
================================================
FILE: .github/SUPPORT.md
================================================
### Bug reports
See the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports.
### How-to
For general troubleshooting or help getting started:
- Join [the official community](https://community.coreui.io/).
- Ask and explore Stack Overflow with the [`coreui`](https://stackoverflow.com/questions/tagged/coreui) tag.
================================================
FILE: .github/stale.yml
================================================
# Number of days of inactivity before an issue becomes stale
daysUntilStale: 360
# Number of days of inactivity before a stale issue is closed
daysUntilClose: 7
# Issues with these labels will never be considered stale
exemptLabels:
- pinned
- security
# Label to use when marking an issue as stale
staleLabel: wontfix
# Comment to post when marking an issue as stale. Set to `false` to disable
markComment: >
This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs. Thank you
for your contributions.
# Comment to post when closing a stale issue. Set to `false` to disable
closeComment: false
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# eslint cache
.eslintcache
# Numerous always-ignore extensions
*.diff
*.err
*.log
*.orig
*.rej
*.swo
*.swp
*.vi
*.zip
*~
# OS or Editor folders
._*
.cache
.DS_Store
.idea
.project
.settings
.tmproj
*.esproj
*.sublime-project
*.sublime-workspace
nbproject
Thumbs.db
/.vscode/
# Komodo
.komodotools
*.komodoproject
# Folders to ignore
/node_modules/
/dist/
================================================
FILE: .prettierignore
================================================
# Ignore artifacts:
build
coverage
#ignore source
src
================================================
FILE: .prettierrc.json
================================================
{
"overrides": [
{
"files": "*.html",
"options": { "parser": "html" }
}
]
}
================================================
FILE: .stylelintignore
================================================
**/*.min.css
**/dist/
**/vendor/
================================================
FILE: .stylelintrc
================================================
{
"extends": [
"stylelint-config-twbs-bootstrap"
],
"reportInvalidScopeDisables": true,
"reportNeedlessDisables": true,
"overrides": [
{
"files": "**/*.scss",
"rules": {
"declaration-property-value-disallowed-list": {
"border": "none",
"outline": "none"
},
"function-disallowed-list": [
"calc",
"lighten",
"darken"
],
"property-disallowed-list": [
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"transition"
],
"scss/dollar-variable-default": [
true,
{
"ignore": "local"
}
],
"scss/selector-no-union-class-name": true
}
}
]
}
================================================
FILE: ARCHITECTURE.md
================================================
# Architecture Documentation
## Project Purpose
CoreUI Free Bootstrap Admin Template is a professional admin dashboard template built on Bootstrap 5 and CoreUI components. It provides a ready-to-use foundation for building admin panels, dashboards, and web applications with a clean, modern interface.
**Key Characteristics:**
- Server-side templating approach (Pug → HTML)
- Bootstrap 5 + CoreUI component library
- Vanilla JavaScript (no framework dependencies)
- Multi-page application (MPA) architecture
- Static file generation with build-time compilation
## High-Level Architecture
```
┌─────────────────────────────────────────────────────┐
│ Source Files │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Pug │ │ Sass │ │ JS │ │
│ │Templates │ │ Styles │ │ Modules │ │
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ │
│ │ │ │ │
└───────┼─────────────┼─────────────┼─────────────────┘
│ │ │
▼ ▼ ▼
┌─────────────────────────────────────────────────────┐
│ Build Pipeline │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Pug │ │PostCSS + │ │ Babel │ │
│ │Compiler │ │ Sass │ │Transpiler│ │
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ │
│ │ │ │ │
└───────┼─────────────┼─────────────┼─────────────────┘
│ │ │
▼ ▼ ▼
┌─────────────────────────────────────────────────────┐
│ Distribution Files │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ HTML │ │ CSS │ │ JS │ │
│ │ Files │ │ (minified)│ │(bundled) │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ (served via browser-sync or web server) │
└─────────────────────────────────────────────────────┘
```
## Technology Stack
### Frontend
- **HTML Generation**: Pug 3.0.3 (template engine)
- **CSS Framework**: Bootstrap 5.3.x
- **Component Library**: CoreUI 5.x (@coreui/coreui)
- **Icons**: CoreUI Icons (@coreui/icons)
- **JavaScript**: Vanilla ES6+ (no framework)
- **Charts**: Chart.js 4.x
- **Scrollbars**: SimpleBar 6.x
### Build Tools
- **Package Manager**: npm
- **CSS Processing**: Sass 1.97.0 → PostCSS → Autoprefixer
- **JS Transpilation**: Babel 7.28.x with preset-env
- **Task Runner**: npm scripts with npm-run-all
- **File Watching**: Nodemon
- **Live Server**: Browser-sync 3.0.4
### Code Quality
- **Linting**: ESLint 9.x (flat config) with XO + Unicorn
- **Style Linting**: Stylelint 16.x with Bootstrap config
- **Formatting**: Prettier 3.7.4
- **Editor Config**: .editorconfig for consistency
## Directory Structure
```
coreui-free-bootstrap-admin-template/
│
├── src/ # Source files (edit these)
│ ├── pug/ # Pug templates (HTML source)
│ │ ├── _layout/ # Base layout templates
│ │ │ └── default.pug # Main layout with sidebar/header
│ │ ├── _partials/ # Reusable components
│ │ │ ├── _header.pug # Top navigation bar
│ │ │ ├── _sidebar.pug # Left sidebar navigation
│ │ │ ├── _footer.pug # Page footer
│ │ │ └── _breadcrumb.pug # Breadcrumb navigation
│ │ ├── _mixins/ # Pug helper mixins
│ │ │ ├── breadcrumb.pug # Breadcrumb generator
│ │ │ ├── callout.pug # Alert/callout boxes
│ │ │ └── example.pug # Code example displays
│ │ └── views/ # Page templates
│ │ ├── dashboard.pug # Main dashboard page
│ │ ├── base/ # UI base components
│ │ ├── buttons/ # Button examples
│ │ ├── forms/ # Form components
│ │ ├── icons/ # Icon libraries
│ │ ├── notifications/ # Alerts, toasts, modals
│ │ ├── pages/ # Auth pages (login, register)
│ │ └── ...
│ │
│ ├── scss/ # Sass stylesheets
│ │ ├── style.scss # Main stylesheet entry
│ │ ├── style-rtl.scss # RTL (right-to-left) styles
│ │ └── examples.scss # Demo/example page styles
│ │
│ ├── js/ # JavaScript modules
│ │ ├── main.js # Main entry point
│ │ ├── charts.js # Chart.js configurations
│ │ ├── color-modes.js # Dark/light theme switcher
│ │ ├── tooltips.js # Tooltip initialization
│ │ ├── popovers.js # Popover initialization
│ │ └── ...
│ │
│ ├── assets/ # Static assets
│ │ ├── brand/ # Logo files
│ │ ├── favicon/ # Favicon files
│ │ └── img/ # Images
│ │
│ └── views/ # Compiled HTML (auto-generated)
│ └── *.html # Do NOT edit these manually
│
├── dist/ # Production build output
│ ├── css/ # Minified CSS
│ ├── js/ # Transpiled JS
│ ├── assets/ # Copied assets
│ ├── vendors/ # Third-party libraries
│ └── *.html # Production HTML files
│
├── build/ # Build scripts
│ ├── pug.mjs # Pug compilation script
│ ├── postcss.config.mjs # PostCSS configuration
│ ├── vendors.mjs # Vendor file bundling
│ └── change-version.mjs # Version management
│
├── node_modules/ # npm dependencies (ignored)
│
└── Configuration files
├── package.json # Dependencies and scripts
├── .editorconfig # Editor settings
├── eslint.config.mjs # ESLint flat config
├── .prettierrc.json # Prettier formatting
├── .stylelintrc # Stylelint rules
├── .browserslistrc # Target browsers
├── .babelrc.js # Babel transpiler config
└── .cursorrules # AI context (Cursor IDE)
```
## Build Pipeline Details
### Development Mode (`npm start`)
1. **Clean**: Remove old compiled files
2. **Compile Pug**: `src/pug/**/*.pug` → `src/views/*.html`
3. **Compile Sass**: `src/scss/*.scss` → `dist/css/*.css` (expanded, autoprefixed)
4. **Transpile JS**: `src/js/*.js` → `dist/js/*.js` (Babel with source maps)
5. **Copy Assets**: `src/assets/**/*` → `dist/assets/`
6. **Build Vendors**: Bundle third-party libraries
7. **Watch Files**: Monitor changes and recompile
8. **Browser-sync**: Live reload server on http://localhost:3000
### Production Build (`npm run build`)
1. **All development steps**
2. **Minify CSS**: Compress stylesheets with cssnano
3. **Minify JS**: Already transpiled by Babel
4. **Optimize Assets**: Copy optimized files
5. **Generate zip**: Create distribution package
### File Watching
```
npm run watch # Watch all file types
npm run watch-pug # Watch Pug templates only
npm run watch-css # Watch Sass files only
npm run watch-js # Watch JavaScript files only
```
Each watch task uses **nodemon** to monitor file changes and trigger appropriate compilation.
## Data Flow
### Page Rendering Flow
```
1. Browser Request
└─> /index.html
2. Server Response
└─> Serve dist/index.html (static file)
3. HTML Loads Resources
├─> dist/css/style.css (Bootstrap + CoreUI + custom styles)
├─> dist/js/main.js (app initialization)
└─> dist/vendors/*.js (Chart.js, SimpleBar, etc.)
4. JavaScript Execution
├─> Initialize CoreUI components
├─> Set up event listeners
├─> Configure charts (if on dashboard)
└─> Enable tooltips/popovers
5. User Interaction
└─> JavaScript handles UI updates (no page reload)
```
### Theme Switching Flow
```
1. User clicks theme toggle button
└─> color-modes.js listens for click
2. ColorModeStorageManager updates preference
├─> Save to localStorage
└─> Update [data-coreui-theme] attribute
3. CSS custom properties respond
└─> Variables change (--cui-primary-bg, --cui-text-color, etc.)
4. ColorSchemeChange event fires
└─> Charts re-render with new theme colors
```
### Chart Rendering Flow
```
1. charts.js module loads
└─> import Chart from 'chart.js/auto'
2. DOM ready
└─> Find chart canvas elements
3. Fetch data (or use inline data)
└─> Random data generator for demo
4. Create Chart.js instance
├─> Configure chart type (line, bar, pie, etc.)
├─> Apply theme colors from CSS variables
└─> Set responsive options
5. Theme changes
└─> Re-initialize charts with new colors
```
## Component Organization
### Pug Template Hierarchy
```
default.pug (base layout)
├─> _header.pug (navigation bar)
├─> _sidebar.pug (side navigation)
├─> block content
│ └─> dashboard.pug (page content)
├─> block scripts (page-specific JS)
└─> _footer.pug (page footer)
```
**Block System:**
- `block content`: Main page content area
- `block scripts`: Page-specific JavaScript includes
- Each view extends the layout and overrides blocks
### CSS Architecture
```
style.scss
├─> Import Bootstrap 5
├─> Import CoreUI components
├─> Import custom variables
└─> Import custom component styles
Theme System:
[data-coreui-theme="light"] # Light mode (default)
[data-coreui-theme="dark"] # Dark mode
[data-coreui-theme="auto"] # System preference
```
**CSS Custom Properties:**
- `--cui-primary`, `--cui-secondary`, etc. (colors)
- `--cui-bg`, `--cui-text-color` (backgrounds/text)
- `--cui-border-color`, `--cui-shadow` (UI elements)
### JavaScript Module Pattern
Each JS file in `src/js/` is an ES6 module:
```javascript
// Import dependencies
import { Something } from '@coreui/coreui'
// Define functionality
const doSomething = () => { /* ... */ }
// Initialize on DOM ready
document.addEventListener('DOMContentLoaded', () => {
doSomething()
})
// Export if needed (most files use side effects only)
```
## Key Dependencies
### Runtime Dependencies
| Package | Purpose | Used In |
|---------|---------|---------|
| `@coreui/coreui` | UI component library | All pages |
| `@coreui/icons` | Icon library | Icon pages |
| `chart.js` | Charts and graphs | Dashboard |
| `simplebar` | Custom scrollbars | Sidebar |
| `@coreui/utils` | Utility functions | Theme switching |
### Build Dependencies
| Package | Purpose |
|---------|---------|
| `sass` | CSS preprocessing |
| `@babel/core` | JavaScript transpilation |
| `pug` | HTML templating |
| `postcss` | CSS post-processing |
| `autoprefixer` | Vendor prefix automation |
| `browser-sync` | Development server |
| `eslint` | JavaScript linting |
| `stylelint` | CSS linting |
## Browser Support
Defined in `.browserslistrc`:
```
>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Edge >= 79
Safari >= 12
iOS >= 12
```
Modern browsers with ES6+ support (Babel handles transpilation for older browsers if needed).
## Deployment
### Static Hosting (Recommended)
1. Run `npm run build`
2. Deploy `dist/` folder to:
- Netlify
- Vercel
- GitHub Pages
- AWS S3 + CloudFront
- Any static file server
### Traditional Web Server
1. Run `npm run build`
2. Copy `dist/` contents to web root
3. Configure server to serve `index.html` as default
4. Set proper MIME types for CSS/JS files
### Docker (Optional)
```dockerfile
FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
EXPOSE 80
```
## Performance Considerations
### CSS Optimization
- Sass compilation removes unused styles
- PostCSS autoprefixer adds only necessary prefixes
- Minification in production build
- CSS is render-blocking (loaded in `<head>`)
### JavaScript Optimization
- Babel transpiles only necessary polyfills (preset-env)
- Source maps for debugging (development only)
- Modules loaded as separate files (no bundler)
- Deferred script loading where possible
### Asset Optimization
- SVG icons (scalable, small file size)
- Favicon in multiple formats for compatibility
- Images in `src/assets/` should be optimized before adding
## Security Considerations
### Content Security Policy (CSP)
Template includes inline scripts and styles. For strict CSP:
1. Extract inline scripts to external files
2. Use nonces or hashes for required inline scripts
3. Update CSP headers accordingly
### XSS Prevention
- Pug automatically escapes HTML by default
- Use `!= html` only for trusted content
- Sanitize user input on server-side (if adding backend)
### Dependency Management
- Regularly update npm dependencies
- Run `npm audit` to check for vulnerabilities
- Pin major versions in `package.json`
## Extensibility
### Adding New Pages
1. Create `src/pug/views/my-page.pug`
2. Extend layout: `extends ../_layout/default.pug`
3. Override content block:
```pug
block content
.container-lg.px-4
h1 My Page Title
p Page content here
```
4. Run `npm start` to compile
5. Access at `/my-page.html`
### Adding New Components
1. Check CoreUI docs: https://coreui.io/bootstrap/docs/
2. Copy component markup to Pug file
3. Convert HTML to Pug syntax (use html2pug.com if needed)
4. Import required JavaScript:
```javascript
import { Modal } from '@coreui/coreui'
```
5. Initialize component in page-specific JS
### Adding New Styles
1. Edit `src/scss/style.scss` or create new partial
2. Import Bootstrap/CoreUI variables to reuse:
```scss
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
```
3. Use CSS custom properties for theme compatibility
4. Run `npm run css` to compile
### Integrating Backend APIs
This template is frontend-only. To add backend:
1. **Fetch API** for AJAX requests:
```javascript
fetch('/api/endpoint')
.then(response => response.json())
.then(data => updateUI(data))
```
2. **Authentication**: Implement token-based auth
- Store JWT in localStorage/sessionStorage
- Add Authorization header to requests
- Redirect to login on 401 responses
3. **State Management**: For complex apps, consider:
- Vanilla JS with custom events
- Lightweight state library (Zustand, Nano Stores)
- Full framework migration (React, Vue, etc.)
## Common Issues and Solutions
### Pug Compilation Errors
- **Error**: "Cannot find module"
- **Fix**: Check Pug include/extend paths (relative to file)
### Sass Compilation Errors
- **Error**: "Undefined variable"
- **Fix**: Import Bootstrap/CoreUI variables before using
### JavaScript Errors
- **Error**: "X is not defined"
- **Fix**: Add `/* global X */` comment or import module
### Live Reload Not Working
- **Error**: Browser-sync not updating
- **Fix**: Check if `watch` scripts are running, restart `npm start`
### Build Fails
- **Error**: npm scripts fail
- **Fix**: Delete `node_modules/` and `dist/`, run `npm install`, then `npm run build`
## Resources
- **CoreUI Bootstrap Docs**: https://coreui.io/bootstrap/docs/
- **Bootstrap 5 Docs**: https://getbootstrap.com/docs/5.3/
- **Pug Documentation**: https://pugjs.org/
- **Chart.js Documentation**: https://www.chartjs.org/
- **Sass Documentation**: https://sass-lang.com/documentation/
## Changelog
See [releases](https://github.com/coreui/coreui-free-bootstrap-admin-template/releases) for version history and updates.
================================================
FILE: DEVELOPMENT.md
================================================
# Development Guide
This guide provides practical information for developers working on the CoreUI Free Bootstrap Admin Template.
## Table of Contents
- [Getting Started](#getting-started)
- [Project Structure](#project-structure)
- [Development Workflow](#development-workflow)
- [Adding New Features](#adding-new-features)
- [Working with Components](#working-with-components)
- [Styling Guidelines](#styling-guidelines)
- [JavaScript Patterns](#javascript-patterns)
- [Testing Your Changes](#testing-your-changes)
- [Common Tasks](#common-tasks)
- [Troubleshooting](#troubleshooting)
## Getting Started
### Prerequisites
- Node.js 16+ and npm
- Basic knowledge of HTML, CSS (Sass), and JavaScript
- Familiarity with Pug templating (optional but helpful)
- Text editor or IDE (VS Code recommended)
### Initial Setup
1. Clone the repository:
```bash
git clone https://github.com/coreui/coreui-free-bootstrap-admin-template.git
cd coreui-free-bootstrap-admin-template
```
2. Install dependencies:
```bash
npm install
```
3. Start development server:
```bash
npm start
```
4. Open your browser to [http://localhost:3000](http://localhost:3000)
The development server includes live reload - changes to Pug, Sass, or JavaScript files will automatically refresh the browser.
## Project Structure
```
src/
├── pug/ # HTML templates (edit these, not HTML files!)
│ ├── _layout/ # Base page layouts
│ ├── _partials/ # Reusable components (header, sidebar, footer)
│ ├── _mixins/ # Pug helper functions
│ └── views/ # Individual page templates
├── scss/ # Stylesheets
│ └── style.scss # Main stylesheet (imports Bootstrap + CoreUI)
├── js/ # JavaScript modules
│ ├── main.js # Dashboard charts
│ ├── color-modes.js # Theme switcher
│ └── *.js # Other page-specific scripts
└── assets/ # Images, icons, static files
```
**Important**: Always edit source files in `src/`, never the compiled files in `dist/` or `src/views/`.
## Development Workflow
### File Watching
The `npm start` command runs multiple watchers in parallel:
- **Pug watcher**: Compiles `.pug` files to HTML
- **Sass watcher**: Compiles `.scss` files to CSS
- **JS watcher**: Transpiles JavaScript with Babel
- **Browser-sync**: Live reload server
### Individual Watchers
Run specific watchers if you're only working on one file type:
```bash
npm run watch-pug # Watch Pug templates only
npm run watch-css # Watch Sass files only
npm run watch-js # Watch JavaScript files only
```
### Build for Production
```bash
npm run build
```
This creates optimized files in the `dist/` directory ready for deployment.
## Adding New Features
### Adding a New Page
1. **Create Pug template** in `src/pug/views/`:
```pug
//- src/pug/views/my-new-page.pug
extends ../_layout/default.pug
block content
.container-lg.px-4
.row
.col-12
h1 My New Page
p Welcome to my new page!
```
2. **Compile the template**:
```bash
npm run pug
```
This creates `src/views/my-new-page.html`
3. **View in browser**:
Navigate to [http://localhost:3000/my-new-page.html](http://localhost:3000/my-new-page.html)
4. **Add to navigation** (optional):
Edit `src/pug/_partials/_sidebar.pug` to add a menu link
### Adding Page-Specific JavaScript
1. **Create JS file** in `src/js/`:
```javascript
// src/js/my-feature.js
/**
* My Feature Module
*
* Description of what this module does
*/
/**
* Initialize the feature
*/
const initMyFeature = () => {
console.log('My feature initialized')
}
// Run on DOM ready
document.addEventListener('DOMContentLoaded', () => {
initMyFeature()
})
```
2. **Include in your Pug template**:
```pug
block scripts
script(src='js/my-feature.js')
```
3. **Compile**:
```bash
npm run js
```
### Adding Page-Specific Styles
1. **Create partial** in `src/scss/`:
```scss
// src/scss/_my-feature.scss
.my-feature {
padding: 1rem;
background-color: var(--cui-body-bg);
&__title {
color: var(--cui-primary);
}
}
```
2. **Import in main stylesheet**:
```scss
// src/scss/style.scss
@import "my-feature";
```
3. **Compile**:
```bash
npm run css
```
## Working with Components
### Using CoreUI Components
**Always use CoreUI Bootstrap components** from the official documentation: https://coreui.io/bootstrap/docs/
#### Example: Adding a Modal
1. **Find component in CoreUI docs**: https://coreui.io/bootstrap/docs/components/modal/
2. **Convert HTML to Pug** (use https://html2pug.com if needed):
```pug
//- Modal Button
button.btn.btn-primary(type='button' data-coreui-toggle='modal' data-coreui-target='#myModal')
| Launch Modal
//- Modal
.modal.fade#myModal(tabindex='-1' aria-labelledby='myModalLabel' aria-hidden='true')
.modal-dialog
.modal-content
.modal-header
h5.modal-title#myModalLabel Modal Title
button.btn-close(type='button' data-coreui-dismiss='modal' aria-label='Close')
.modal-body
p Modal content goes here
.modal-footer
button.btn.btn-secondary(type='button' data-coreui-dismiss='modal') Close
button.btn.btn-primary(type='button') Save changes
```
3. **Initialize if needed**:
Some components require JavaScript initialization:
```javascript
import { Modal } from '@coreui/coreui'
const myModal = new Modal(document.getElementById('myModal'))
myModal.show()
```
### Creating Reusable Components
For components used across multiple pages, create a Pug mixin:
1. **Create mixin file** in `src/pug/_mixins/`:
```pug
//- src/pug/_mixins/alert.pug
mixin alert(type, message)
.alert(class=`alert-${type}` role='alert')
= message
```
2. **Use the mixin** in your pages:
```pug
include _mixins/alert
+alert('success', 'Your changes have been saved!')
+alert('danger', 'An error occurred.')
```
## Styling Guidelines
### Use Bootstrap/CoreUI Classes First
Before writing custom CSS, check if Bootstrap or CoreUI provides a utility class:
```pug
//- Good: Using utility classes
.d-flex.justify-content-between.align-items-center.mb-3
h2 Title
button.btn.btn-primary Action
//- Avoid: Custom CSS when utilities exist
.my-custom-header
h2 Title
button Action
```
### CSS Custom Properties (Variables)
Use CoreUI's CSS variables for theming:
```scss
.my-component {
color: var(--cui-body-color); // Text color (theme-aware)
background: var(--cui-body-bg); // Background color
border-color: var(--cui-border-color); // Border color
}
```
### Common CSS Variables
| Variable | Purpose |
|----------|---------|
| `--cui-primary` | Primary brand color |
| `--cui-secondary` | Secondary color |
| `--cui-success`, `--cui-danger`, etc. | Status colors |
| `--cui-body-color` | Default text color |
| `--cui-body-bg` | Default background |
| `--cui-border-color` | Border color |
### Naming Conventions
Use Bootstrap/CoreUI class naming conventions for custom styles:
```scss
.my-custom-section {
padding: 1rem;
.section-title {
font-weight: bold;
}
}
// Or extend existing CoreUI/Bootstrap components
.sidebar-custom {
background-color: var(--cui-sidebar-bg);
}
```
### Dark Mode Support
CSS variables automatically adapt to dark mode. Test both themes:
```javascript
// Switch theme programmatically for testing
localStorage.setItem('coreui-free-bootstrap-admin-template-theme', 'dark')
location.reload()
```
## JavaScript Patterns
### Module Structure
Follow this pattern for new JavaScript modules:
```javascript
/* global LibraryName */
/**
* Module Name
*
* Description of what this module does and which pages use it.
*/
/**
* Function description
* @param {type} paramName - Parameter description
* @returns {type} Return value description
*/
const myFunction = (paramName) => {
// Implementation
}
// Initialize on DOM ready
document.addEventListener('DOMContentLoaded', () => {
myFunction()
})
```
### ESLint Rules
- **No semicolons** (enforced by ESLint)
- **2-space indentation**
- **Single quotes** for strings
- Use arrow functions `() => {}` instead of `function() {}`
### Accessing CoreUI Utilities
```javascript
/* global coreui */
// Get CSS variable value
const primaryColor = coreui.Utils.getStyle('--cui-primary')
// Convert RGB to HEX
const hexColor = coreui.Utils.rgbToHex('rgb(255, 0, 0)')
```
### Working with Chart.js
```javascript
/* global Chart, coreui */
const myChart = new Chart(document.getElementById('my-chart'), {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'Sales',
data: [12, 19, 3],
borderColor: coreui.Utils.getStyle('--cui-primary'),
backgroundColor: `rgba(${coreui.Utils.getStyle('--cui-primary-rgb')}, 0.1)`
}]
},
options: {
responsive: true
}
})
// Update chart when theme changes
document.documentElement.addEventListener('ColorSchemeChange', () => {
myChart.options.scales.x.ticks.color = coreui.Utils.getStyle('--cui-body-color')
myChart.update()
})
```
## Testing Your Changes
### Visual Testing
1. **Test in both themes**:
- Click theme toggle in header
- Verify dark mode looks correct
2. **Test responsive design**:
- Resize browser window
- Test mobile view (Chrome DevTools: Cmd+Shift+M / Ctrl+Shift+M)
3. **Test in multiple browsers**:
- Chrome/Edge
- Firefox
- Safari (if on macOS)
### Code Quality Checks
Run linters before committing:
```bash
npm run lint # Run all linters
npm run lint:js # JavaScript only
npm run lint:css # Styles only
```
Fix auto-fixable issues:
```bash
npm run lint:js -- --fix
```
## Common Tasks
### Update Dependencies
```bash
npm update # Update to latest compatible versions
npm outdated # Check for outdated packages
npm audit fix # Fix security vulnerabilities
```
### Change Template Version
```bash
npm run change-version 5.4.0
```
This updates version numbers across all files.
### Create Distribution Package
```bash
npm run zip
```
Creates a `.zip` file with the production build.
### Clean Build
If you encounter build issues:
```bash
rm -rf node_modules dist
npm install
npm run build
```
## Troubleshooting
### Pug Compilation Errors
**Error**: "Cannot find module"
```
Error: src/pug/views/my-page.pug
> 1| extends ../_layout/wrong-path.pug
```
**Solution**: Check that include/extend paths are correct and relative to the current file.
### Sass Compilation Errors
**Error**: "Undefined variable $primary"
**Solution**: Import Bootstrap/CoreUI variables before using them:
```scss
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
// Now you can use variables
.my-class {
color: $primary;
}
```
### JavaScript Errors
**Error**: "ReferenceError: Chart is not defined"
**Solution**: Add global comment at top of file:
```javascript
/* global Chart */
```
### Live Reload Not Working
1. Check that `npm start` is running without errors
2. Restart the development server: `Ctrl+C` then `npm start`
3. Clear browser cache: `Cmd+Shift+R` / `Ctrl+Shift+F5`
4. Check that files are being saved in `src/` not `dist/`
### Port Already in Use
**Error**: "Port 3000 is already in use"
**Solution**: Kill the process or use a different port:
```bash
# macOS/Linux
lsof -ti:3000 | xargs kill -9
# Windows
netstat -ano | findstr :3000
taskkill /PID <PID> /F
# Or use different port
PORT=3001 npm start
```
### ESLint Errors
**Error**: "Unexpected console statement"
**Solution**: Disable ESLint for specific lines when console is needed:
```javascript
// eslint-disable-next-line no-console
console.log('Debug info')
```
Or disable for entire file (not recommended):
```javascript
/* eslint-disable no-console */
```
## Best Practices
### Do's
- ✅ Use CoreUI Bootstrap components from official docs
- ✅ Edit source files in `src/`, never compiled files
- ✅ Use CSS variables for colors and theme values
- ✅ Add JSDoc comments to all functions
- ✅ Test in both light and dark modes
- ✅ Follow existing code patterns and conventions
- ✅ Run linters before committing
- ✅ Keep JavaScript modules focused and small
### Don'ts
- ❌ Don't use Tailwind CSS (this project uses Bootstrap)
- ❌ Don't edit files in `dist/` or `src/views/` (auto-generated)
- ❌ Don't add unnecessary dependencies
- ❌ Don't use inline styles (use utility classes or Sass)
- ❌ Don't hardcode colors (use CSS variables)
- ❌ Don't ignore ESLint/Stylelint warnings
- ❌ Don't commit `node_modules/` or `dist/`
## Getting Help
- **CoreUI Documentation**: https://coreui.io/bootstrap/docs/
- **Bootstrap 5 Docs**: https://getbootstrap.com/docs/5.3/
- **Pug Documentation**: https://pugjs.org/
- **Chart.js Documentation**: https://www.chartjs.org/
- **GitHub Issues**: https://github.com/coreui/coreui-free-bootstrap-admin-template/issues
## Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines on:
- Code style and conventions
- Commit message format
- Pull request process
- Bug reporting
---
**Need more help?** Check [ARCHITECTURE.md](ARCHITECTURE.md) for technical details about the project structure and build pipeline.
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2025 creativeLabs Łukasz Holeczek.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
# CoreUI Free Bootstrap Admin Template — Built for AI-Assisted Development [](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20Bootstrap%204%20Admin%20Template%20&url=https://coreui.io&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)
[](https://opensource.org/licenses/MIT)
[](https://github.com/coreui/coreui)
[![npm package][npm-coreui-badge]][npm-coreui]
[![NPM downloads][npm-coreui-download]][npm-coreui]
[npm-coreui]: https://www.npmjs.com/package/@coreui/coreui
[npm-coreui-badge]: https://img.shields.io/npm/v/@coreui/coreui.png?style=flat-square
[npm-coreui-download]: https://img.shields.io/npm/dm/@coreui/coreui.svg?style=flat-square
[](https://coreui.io/product/free-bootstrap-admin-template/)
CoreUI Bootstrap Admin Panel Template is not another blend of 3rd parties free components and libraries. It's **the only Open Source Bootstrap Admin Dashboard Template built on the enterprise-grade hand-crafted [UI Components Library](https://github.com/coreui/coreui)** created and backed by professionals.
**CoreUI Admin Template helps you build reliable web apps faster than before.** CoreUI offers 4 versions: [Angular](https://github.com/coreui/coreui-free-angular-admin-template), [Bootstrap](https://github.com/coreui/coreui-free-bootstrap-admin-template), [React.js](https://github.com/coreui/coreui-free-react-admin-template), and [Vue.js](https://github.com/coreui/coreui-free-vue-admin-template).
Curious why I decided to create CoreUI? Please read this article: [Jack of all trades, master of none. Why Bootstrap Admin Templates suck.](https://medium.com/@lukaszholeczek/jack-of-all-trades-master-of-none-5ea53ef8a1f#.7eqx1bcd8)
## Table of Contents
* [Frameworks](#frameworks)
* [CoreUI PRO](#coreui-pro)
* [CoreUI PRO Bootstrap Admin Templates](#coreui-pro-bootstrap-admin-templates)
* [Installation](#installation)
* [Usage](#usage)
* [What's included](#whats-included)
* [AI-Friendly Development](#ai-friendly-development)
* [Documentation](#documentation)
* [Components](#components)
* [Contributing](#contributing)
* [Versioning](#versioning)
* [Creators](#creators)
* [Community](#community)
* [Support CoreUI Development](#support-coreui-development)
* [Copyright and license](#copyright-and-license)
## Frameworks
CoreUI is built on top of Bootstrap 5 and supports popular frameworks.
* [CoreUI Free Angular Admin Template](https://github.com/coreui/coreui-free-angular-admin-template)
* [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template)
* [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template)
* [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template)
## CoreUI PRO
* 💪 [CoreUI PRO Angular Admin Template](https://coreui.io/product/angular-dashboard-template/)
* 💪 [CoreUI PRO Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/)
* 💪 [CoreUI PRO Next.js Admin Template](https://coreui.io/product/next-js-dashboard-template/)
* 💪 [CoreUI PRO React Admin Template](https://coreui.io/product/react-dashboard-template/)
* 💪 [CoreUI PRO Vue Admin Template](https://coreui.io/product/vue-dashboard-template/)
## CoreUI PRO Bootstrap Admin Templates
| Default Theme | Light Theme |
| --- | --- |
| [](https://coreui.io/product/bootstrap-dashboard-template/?theme=default) | [](https://coreui.io/product/bootstrap-dashboard-template/?theme=light)|
| Modern Theme | Bright Theme |
| --- | --- |
| [](https://coreui.io/product/bootstrap-dashboard-template/?theme=modern) | [](https://coreui.io/product/bootstrap-dashboard-template/?theme=bright)|
## CoreUI Icons (522 Free icons) - Premium designed free icon set with marks in SVG, Webfont and raster formats.
CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app. Ready-to-use fonts and stylesheets that work with your favorite frameworks.
[](https://github.com/coreui/coreui-icons/)
[Download CoreUI Free Icons](https://github.com/coreui/coreui-icons/)
## Installation
### Clone repo
``` bash
# clone the repo
$ git clone https://github.com/coreui/coreui-free-bootstrap-admin-template.git my-project
# go into app's directory
$ cd my-project
# install app's dependencies
$ npm install
```
## Usage
``` bash
# serve with hot reload at localhost:3000.
$ npm start
# build for production with minification
$ npm run build
```
## What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
```
free-bootstrap-admin-template/
├── build/
├── src/
│ ├── assets/
│ │ ├── brand/
│ │ ├── favicon/
│ │ ├── icons/
│ │ ├── img/
│ ├── js/
│ ├── pug/
│ │ ├── _layout/
│ │ ├── _partial/
│ │ ├── base/
│ │ ├── buttons/
│ │ ├── icons/
│ │ ├── notifications/
│ │ ├── ...
│ │ ├── index.pug
│ │ └── ...
│ ├── scss/
│ ├── vendors/
│ └── views/
│ ├── base/
│ ├── buttons/
│ ├── css/
│ ├── icons/
│ ├── notifications/
│ ├── ...
│ ├── index.html
│ └── ...
└── package.json
```
## AI-Friendly Development
This template is optimized for AI-assisted development, making it easier to work with AI coding assistants like Cursor, Claude Code, and GitHub Copilot.
### What's Included
- **`.cursorrules`** - Comprehensive AI context file with project conventions, patterns, and guidelines
- **`ARCHITECTURE.md`** - Detailed technical documentation covering the project structure, build pipeline, and component organization
- **`DEVELOPMENT.md`** - Practical developer guide with examples and best practices
- **JSDoc Comments** - All JavaScript modules include detailed documentation with @param and @returns annotations
### Benefits
- 🤖 **Smart Code Generation** - AI understands your project uses CoreUI Bootstrap (not Tailwind CSS)
- 📚 **Better Context Awareness** - AI knows the project structure, conventions, and patterns
- ✨ **Consistent Code Style** - AI generates code following ESLint/Stylelint rules automatically
- 🚀 **Faster Development** - Less time explaining, more time building
- 💡 **Intelligent Suggestions** - AI provides relevant component examples from CoreUI documentation
### Quick Start with AI
Simply open the project in your AI-powered IDE (Cursor, VS Code with Copilot, etc.) and the AI will automatically understand:
- Project architecture and file organization
- CoreUI Bootstrap component usage
- Pug templating patterns
- Sass/SCSS styling conventions
- JavaScript module patterns
## Documentation
The documentation for the CoreUI Free Bootstrap Admin Template is hosted at our website [CoreUI](https://coreui.io/bootstrap/docs/templates/installation/)
## Components
CoreUI Bootstrap Admin Templates are built on top of CoreUI and CoreUI PRO UI components libraries, including all of these components.
- [Bootstrap Accordion](https://coreui.io/bootstrap/docs/components/accordion/)
- [Bootstrap Alert](https://coreui.io/bootstrap/docs/components/alert/)
- [Bootstrap Autocomplete](https://coreui.io/bootstrap/docs/forms/autocomplete/) **PRO**
- [Bootstrap Avatar](https://coreui.io/bootstrap/docs/components/avatar/)
- [Bootstrap Badge](https://coreui.io/bootstrap/docs/components/badge/)
- [Bootstrap Breadcrumb](https://coreui.io/bootstrap/docs/components/breadcrumb/)
- [Bootstrap Button](https://coreui.io/bootstrap/docs/components/button/)
- [Bootstrap Button Group](https://coreui.io/bootstrap/docs/components/button-group/)
- [Bootstrap Callout](https://coreui.io/bootstrap/docs/components/callout/)
- [Bootstrap Card](https://coreui.io/bootstrap/docs/components/card/)
- [Bootstrap Carousel](https://coreui.io/bootstrap/docs/components/carousel/)
- [Bootstrap Checkbox](https://coreui.io/bootstrap/docs/forms/checkbox/)
- [Bootstrap Close Button](https://coreui.io/bootstrap/docs/components/close-button/)
- [Bootstrap Calendar](https://coreui.io/bootstrap/docs/components/calendar/) **PRO**
- [Bootstrap Collapse](https://coreui.io/bootstrap/docs/components/collapse/)
- [Bootstrap Date Picker](https://coreui.io/bootstrap/docs/forms/date-picker/) **PRO**
- [Bootstrap Date Range Picker](https://coreui.io/bootstrap/docs/forms/date-range-picker/) **PRO**
- [Bootstrap Dropdown](https://coreui.io/bootstrap/docs/components/dropdown/)
- [Bootstrap Floating Labels](https://coreui.io/bootstrap/docs/forms/floating-labels/)
- [Bootstrap Footer](https://coreui.io/bootstrap/docs/components/footer/)
- [Bootstrap Header](https://coreui.io/bootstrap/docs/components/header/)
- [Bootstrap Image](https://coreui.io/bootstrap/docs/components/image/)
- [Bootstrap Input](https://coreui.io/bootstrap/docs/forms/input/)
- [Bootstrap Input Group](https://coreui.io/bootstrap/docs/forms/input-group/)
- [Bootstrap List Group](https://coreui.io/bootstrap/docs/components/list-group/)
- [Bootstrap Loading Button](https://coreui.io/bootstrap/docs/components/loading-button/) **PRO**
- [Bootstrap Modal](https://coreui.io/bootstrap/docs/components/modal/)
- [Bootstrap Multi Select](https://coreui.io/bootstrap/docs/forms/multi-select/) **PRO**
- [Bootstrap Navs & Tabs](https://coreui.io/bootstrap/docs/components/navs-tabs/)
- [Bootstrap Navbar](https://coreui.io/bootstrap/docs/components/navbar/)
- [Bootstrap Offcanvas](https://coreui.io/bootstrap/docs/components/offcanvas/)
- [Bootstrap Pagination](https://coreui.io/bootstrap/docs/components/pagination/)
- [Bootstrap Password Input](https://coreui.io/bootstrap/docs/forms/password-input/) **PRO**
- [Bootstrap Placeholder](https://coreui.io/bootstrap/docs/components/placeholder/)
- [Bootstrap Popover](https://coreui.io/bootstrap/docs/components/popover/)
- [Bootstrap Progress](https://coreui.io/bootstrap/docs/components/progress/)
- [Bootstrap Radio](https://coreui.io/bootstrap/docs/forms/radio/)
- [Bootstrap Range](https://coreui.io/bootstrap/docs/forms/range/)
- [Bootstrap Range Slider](https://coreui.io/bootstrap/docs/forms/range-slider/) **PRO**
- [Bootstrap Rating](https://coreui.io/bootstrap/docs/forms/rating/) **PRO**
- [Bootstrap Select](https://coreui.io/bootstrap/docs/forms/select/)
- [Bootstrap Sidebar](https://coreui.io/bootstrap/docs/components/sidebar/)
- [Bootstrap Spinner](https://coreui.io/bootstrap/docs/components/spinner/)
- [Bootstrap Stepper](https://coreui.io/bootstrap/docs/forms/stepper/) **PRO**
- [Bootstrap Switch](https://coreui.io/bootstrap/docs/forms/switch/)
- [Bootstrap Table](https://coreui.io/bootstrap/docs/components/table/)
- [Bootstrap Textarea](https://coreui.io/bootstrap/docs/forms/textarea/)
- [Bootstrap Time Picker](https://coreui.io/bootstrap/docs/forms/time-picker/) **PRO**
- [Bootstrap Toast](https://coreui.io/bootstrap/docs/components/toast/)
- [Bootstrap Tooltip](https://coreui.io/bootstrap/docs/components/tooltip/)
## Contributing
Please read through our [contributing guidelines](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
Editor preferences are available in the [editor config](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
## Versioning
For transparency into our release cycle and in striving to maintain backward compatibility,CoreUI Free Admin Template is maintained under [the Semantic Versioning guidelines](http://semver.org/).
See [the Releases section of our project](https://github.com/coreui/coreui-free-bootstrap-admin-template/releases) for changelogs for each release version.
## Creators
**Łukasz Holeczek**
* <https://twitter.com/lukaszholeczek>
* <https://github.com/mrholek>
**Andrzej Kopański**
* <https://github.com/xidedix>
**CoreUI Team**
* <https://twitter.com/core_ui>
* <https://github.com/coreui>
* <https://github.com/orgs/coreui/people>
## Community
Get updates on CoreUI's development and chat with the project maintainers and community members.
- Follow [@core_ui on Twitter](https://twitter.com/core_ui).
- Read and subscribe to [CoreUI Blog](https://coreui.io/blog/).
## Support CoreUI Development
CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=bootstrap&src=github-coreui-free-bootstrap-admin-template) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
## Copyright and license
copyright 2025 creativeLabs Łukasz Holeczek. Code released under [the MIT license](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE).
================================================
FILE: build/change-version.mjs
================================================
#!/usr/bin/env node
/*!
* Script to update version number references in the project.
* Copyright 2017-2022 The Bootstrap Authors
* Copyright 2017-2022 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
import fs from 'node:fs/promises'
import path from 'node:path'
import { globby } from 'globby'
const VERBOSE = process.argv.includes('--verbose')
const DRY_RUN = process.argv.includes('--dry') || process.argv.includes('--dry-run')
// These are the filetypes we only care about replacing the version
const GLOB = [
'**/*.{css,html,js,json,md,pug,scss,txt,yml}'
]
const GLOBBY_OPTIONS = {
cwd: path.join(__dirname, '..'),
gitignore: true
}
const EXCLUDED_FILES = [
'CHANGELOG.md'
]
// Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37
function regExpQuote(string) {
return string.replace(/[$()*+-.?[\\\]^{|}]/g, '\\$&')
}
function regExpQuoteReplacement(string) {
return string.replace(/\$/g, '$$')
}
async function replaceRecursively(file, oldVersion, newVersion) {
const originalString = await fs.readFile(file, 'utf8')
const newString = originalString.replace(
new RegExp(regExpQuote(oldVersion), 'g'), regExpQuoteReplacement(newVersion)
)
// No need to move any further if the strings are identical
if (originalString === newString) {
return
}
if (VERBOSE) {
console.log(`FILE: ${file}`)
}
if (DRY_RUN) {
return
}
await fs.writeFile(file, newString, 'utf8')
}
async function main(args) {
const [oldVersion, newVersion] = args
if (!oldVersion || !newVersion) {
console.error('USAGE: change-version old_version new_version [--verbose] [--dry[-run]]')
console.error('Got arguments:', args)
process.exit(1)
}
// Strip any leading `v` from arguments because otherwise we will end up with duplicate `v`s
[oldVersion, newVersion].map(arg => arg.startsWith('v') ? arg.slice(1) : arg)
try {
const files = await globby(GLOB, GLOBBY_OPTIONS, EXCLUDED_FILES)
await Promise.all(files.map(file => replaceRecursively(file, oldVersion, newVersion)))
} catch (error) {
console.error(error)
process.exit(1)
}
}
main(process.argv.slice(2))
================================================
FILE: build/postcss.config.mjs
================================================
const mapConfig = {
inline: false,
annotation: true,
sourcesContent: true
}
export default () => {
return {
map: mapConfig,
plugins: {
autoprefixer: {
cascade: false
},
'postcss-combine-duplicated-selectors': {},
'postcss-drop-empty-css-vars': {}
}
}
}
================================================
FILE: build/pug.mjs
================================================
#!/usr/bin/env node
import fs from 'node:fs/promises'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { globby } from 'globby'
import pug from 'pug'
import { mkdirp } from 'mkdirp'
const __dirname = path.dirname(fileURLToPath(import.meta.url))
const GLOB = [
'**/*.pug'
]
const SRC = 'src/pug/views/'
const GLOBBY_OPTIONS = {
cwd: path.join(__dirname, '..', SRC)
}
const { basename, dirname, resolve, sep } = path
const base = levels => {
let path = './'
while (levels > 0) {
levels -= 1
path += '../'
}
return path
}
const compile = (filename, basedir) => {
const levels = basedir.split(`${sep}`).filter(el => el !== '').length
const fn = pug.compileFile(filename, {
basedir: './pug/',
pretty: true
})
const html = fn({
base: base(levels)
})
return html
}
const compilePugToHtml = (file, dest) => {
const dir = dirname(file)
const filename = basename(file).replace('.pug', '.html')
const relative = path.relative(path.join(__dirname, '..'), dir.replace(SRC, ''))
const html = compile(path.join(__dirname, '..', SRC, file), `${relative}`)
mkdirp(path.join(__dirname, '..', dest, relative)).then(() => {
fs.writeFile(resolve(__dirname, '..', dest, relative, filename), html, err => {
if (err) {
throw err
}
console.log(`${resolve(__dirname, '..', dest, relative, filename)} file saved!`)
})
})
}
async function main() {
try {
const files = await globby(GLOB, GLOBBY_OPTIONS)
await Promise.all(files.map(file => compilePugToHtml(file, 'src/views/')))
} catch (error) {
console.error(error)
process.exit(1)
}
}
main()
================================================
FILE: build/vendors.mjs
================================================
#!/usr/bin/env node
import fs from 'node:fs'
import path from 'node:path'
import injectVendors from '@coreui/vendors-injector'
const DIST = 'dist/'
const { extname, join } = path
const walkSync = (dir, filelist = []) => {
for (const file of fs.readdirSync(dir)) {
filelist = fs.statSync(join(dir, file)).isDirectory() ? walkSync(join(dir, file), filelist) : filelist.concat(join(dir, file))
}
return filelist
}
const main = () => {
const filenames = walkSync(DIST)
for (const filename of filenames) {
if (extname(filename) === '.html') {
injectVendors.toFile(filename)
}
}
}
main()
================================================
FILE: eslint.config.mjs
================================================
import xo from 'eslint-config-xo'
import xoBrowser from 'eslint-config-xo/browser'
import eslintPluginImport from 'eslint-plugin-import'
import eslintPluginUnicorn from 'eslint-plugin-unicorn'
import globals from 'globals'
export default [
eslintPluginImport.flatConfigs.errors,
eslintPluginImport.flatConfigs.warnings,
eslintPluginUnicorn.configs.recommended,
...xo,
...xoBrowser,
{
ignores: [
'**/*.json',
'**/*.min.js',
'**/dist/',
'.babelrc.js'
]
},
{
rules: {
'@stylistic/comma-dangle': 'off',
'@stylistic/function-paren-newline': 'off',
'@stylistic/indent': 'off',
'@stylistic/indent-binary-ops': 'off',
'@stylistic/jsx-quotes': 'off',
'@stylistic/max-len': 'off',
'@stylistic/object-curly-spacing': 'off',
'@stylistic/operator-linebreak': 'off',
'@stylistic/quotes': 'off',
'@stylistic/semi': 'off',
'arrow-body-style': 'off',
'capitalized-comments': 'off',
'comma-dangle': ['error', 'never'],
'import/extensions': [
'error',
'ignorePackages',
{
js: 'always'
}
],
'import/first': 'error',
'import/newline-after-import': 'error',
'import/no-absolute-path': 'error',
'import/no-amd': 'error',
'import/no-cycle': [
'error',
{
ignoreExternal: true
}
],
'import/no-duplicates': 'error',
'import/no-extraneous-dependencies': 'error',
'import/no-mutable-exports': 'error',
'import/no-named-as-default': 'error',
'import/no-named-as-default-member': 'error',
'import/no-named-default': 'error',
'import/no-self-import': 'error',
'import/no-unassigned-import': ['error'],
'import/no-useless-path-segments': 'error',
'import/order': 'error',
indent: [
'error',
2,
{
MemberExpression: 'off',
SwitchCase: 1
}
],
'logical-assignment-operators': 'off',
'max-params': ['warn', 5],
'multiline-ternary': ['error', 'always-multiline'],
'new-cap': [
'error',
{
properties: false
}
],
'no-console': 'error',
'no-negated-condition': 'off',
'object-curly-spacing': ['error', 'always'],
'operator-linebreak': ['error', 'after'],
'prefer-object-has-own': 'off',
'prefer-template': 'error',
semi: ['error', 'never'],
strict: 'error',
'unicorn/explicit-length-check': 'off',
'unicorn/filename-case': 'off',
'unicorn/no-anonymous-default-export': 'off',
'unicorn/no-array-callback-reference': 'off',
'unicorn/no-array-method-this-argument': 'off',
'unicorn/no-null': 'off',
'unicorn/no-typeof-undefined': 'off',
'unicorn/no-unused-properties': 'error',
'unicorn/numeric-separators-style': 'off',
'unicorn/prefer-array-flat': 'off',
'unicorn/prefer-at': 'off',
'unicorn/prefer-dom-node-dataset': 'off',
'unicorn/prefer-global-this': 'off', // added to avoid the error: 'Use `globalThis` instead of `window` or `global`'
'unicorn/prefer-module': 'off',
'unicorn/prefer-query-selector': 'off',
'unicorn/prefer-spread': 'off',
'unicorn/prefer-string-raw': 'off',
'unicorn/prefer-string-replace-all': 'off',
'unicorn/prefer-structured-clone': 'off',
'unicorn/prevent-abbreviations': 'off'
}
},
{
files: ['**/*.{js,mjs}'],
languageOptions: {
sourceType: 'module'
}
},
{
files: ['build/**'],
languageOptions: {
globals: {
...globals.node
},
sourceType: 'module'
},
rules: {
'no-console': 'off',
'unicorn/prefer-top-level-await': 'off'
}
}
]
================================================
FILE: nodemon.json
================================================
{
"ignoreRoot": [".git"],
"ignore": [
"build",
"dist"
],
"delay": 2500
}
================================================
FILE: package.json
================================================
{
"name": "@coreui/coreui-free-bootstrap-admin-template",
"version": "5.3.0",
"description": "Free Bootstrap Admin Template",
"keywords": [
"admin",
"admin panel",
"admin template",
"bootstrap",
"css",
"dashboard",
"framework",
"front-end",
"responsive",
"sass",
"ui kit",
"webapp"
],
"homepage": "https://coreui.io",
"bugs": {
"url": "https://github.com/coreui/coreui-free-bootstrap-admin-template/issues",
"email": "support@coreui.io"
},
"license": "MIT",
"author": {
"name": "creativeLabs Łukasz Holeczek",
"url": "https://coreui.io",
"github": "https://github.com/coreui",
"twitter": "https://twitter.com/core_ui"
},
"contributors": [
{
"name": "CoreUI Core Team",
"url": "https://github.com/orgs/coreui/people"
}
],
"main": "dist/index.html",
"repository": {
"type": "git",
"url": "git+https://github.com/coreui/coreui-free-bootstrap-admin-template.git"
},
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/coreui"
},
{
"type": "subscription",
"url": "hhttps://coreui.io/pricing/?framework=bootstrap"
}
],
"scripts": {
"build": "npm-run-all clean --parallel css js sync --sequential build-vendors",
"build-vendors": "node build/vendors.mjs",
"clean": "rimraf dist",
"css": "npm-run-all --parallel css-compile* --sequential css-prefix css-minify*",
"css-compile": "sass --style expanded --source-map --embed-sources --no-error-css --load-path=node_modules/ src/scss/:dist/css/",
"css-lint": "npm-run-all --continue-on-error --parallel css-lint-*",
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd",
"css-minify": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
"css-prefix": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
"js": "npm-run-all --parallel js-compile* ",
"js-compile": "cross-env babel src/js/ --out-dir dist/js/ --source-maps",
"js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives",
"localhost": "browser-sync start --server \"./dist\" --serveStatic \"./\" --files \"./dist/\"",
"pug": "node build/pug.mjs",
"release-version": "node build/change-version.mjs",
"serve": "serve dist",
"start": "npm-run-all --sequential clean css js sync --parallel localhost watch",
"sync": "npm-run-all --parallel sync-*",
"sync-assets": "syncdir src/assets dist/assets",
"sync-views": "syncdir src/views dist",
"watch": "npm-run-all --parallel watch-*",
"watch-assets": "nodemon --watch src/assets --exec \"npm run sync-assets\"",
"watch-css": "nodemon --watch scss/ --ext scss --exec \"npm-run-all css-lint css-compile css-prefix\"",
"watch-html": "nodemon --watch src/views --ext html --exec \"npm run sync-views\"",
"watch-js": "nodemon --watch src/js --ext js --exec \"npm-run-all js-lint js-compile\"",
"watch-pug": "nodemon --watch src/pug --ext pug --exec \"npm run pug\"",
"zip": "npm-run-all --sequential build zip-*",
"zip-dist": "cross-env-shell \"rm -rf coreui-free-bootstrap-admin-template-v$npm_package_version-dist coreui-free-bootstrap-admin-template-v$npm_package_version-dist.zip && cp -r dist/ coreui-free-bootstrap-admin-template-v$npm_package_version-dist && zip -qr9 coreui-free-bootstrap-admin-template-v$npm_package_version-dist.zip coreui-free-bootstrap-admin-template-v$npm_package_version-dist && rm -rf coreui-free-bootstrap-admin-template-v$npm_package_version-dist\"",
"zip-src": "git archive -o coreui-free-bootstrap-admin-template-v$npm_package_version.zip -9 HEAD"
},
"dependencies": {
"@coreui/chartjs": "^4.1.0",
"@coreui/coreui": "^5.5.0",
"@coreui/icons": "^3.0.1",
"@coreui/utils": "^2.0.2",
"chart.js": "^4.5.1",
"simplebar": "^6.3.3"
},
"devDependencies": {
"@babel/cli": "^7.28.3",
"@babel/core": "^7.28.5",
"@babel/preset-env": "^7.28.5",
"@coreui/vendors-injector": "^1.1.4",
"autoprefixer": "^10.4.23",
"browser-sync": "^3.0.4",
"clean-css-cli": "^5.6.3",
"cross-env": "^10.1.0",
"eslint": "^9.39.2",
"eslint-config-xo": "^0.49.0",
"eslint-plugin-import": "^2.32.0",
"eslint-plugin-unicorn": "^62.0.0",
"find-unused-sass-variables": "^6.1.1",
"globals": "^16.5.0",
"globby": "^16.0.0",
"mkdirp": "^3.0.1",
"nodemon": "^3.1.11",
"npm-run-all": "^4.1.5",
"postcss": "^8.5.6",
"postcss-cli": "^11.0.1",
"postcss-combine-duplicated-selectors": "^10.0.3",
"postcss-drop-empty-css-vars": "^0.0.0",
"prettier": "3.7.4",
"pug": "^3.0.3",
"rimraf": "^6.1.2",
"sass": "1.97.0",
"serve": "^14.2.5",
"shelljs": "^0.10.0",
"stylelint": "16.26.1",
"stylelint-config-twbs-bootstrap": "^16.1.0",
"sync-directory": "^6.0.5"
}
}
================================================
FILE: src/assets/favicon/browserconfig.xml
================================================
<?xml version="1.0" encoding="utf-8"?>
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
================================================
FILE: src/assets/favicon/manifest.json
================================================
{
"name": "App",
"icons": [
{
"src": "/android-icon-36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "/android-icon-48x48.png",
"sizes": "48x48",
"type": "image/png",
"density": "1.0"
},
{
"src": "/android-icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
},
{
"src": "/android-icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
},
{
"src": "/android-icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
},
{
"src": "/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
]
}
================================================
FILE: src/js/charts.js
================================================
/* global Chart */
/**
* --------------------------------------------------------------------------
* CoreUI Boostrap Admin Template charts.js
* Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
/**
* Chart.js Demo Examples
*
* This module provides demonstration examples for various Chart.js chart types
* used in the Charts page (views/charts.html). Each chart is initialized with
* sample data to showcase different visualization patterns.
*
* Chart types included:
* - Line chart (canvas-1)
* - Bar chart (canvas-2)
* - Doughnut chart (canvas-3)
* - Radar chart (canvas-4)
* - Pie chart (canvas-5)
* - Polar area chart (canvas-6)
*
* All charts use randomly generated data for demonstration purposes.
*/
/**
* Generates a random number between 0 and 100
* @returns {number} Random integer from 0 to 100
*/
const random = () => Math.round(Math.random() * 100)
// eslint-disable-next-line no-unused-vars
const lineChart = new Chart(document.getElementById('canvas-1'), {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(220, 220, 220, 0.2)',
borderColor: 'rgba(220, 220, 220, 1)',
pointBackgroundColor: 'rgba(220, 220, 220, 1)',
pointBorderColor: '#fff',
data: [random(), random(), random(), random(), random(), random(), random()]
},
{
label: 'My Second dataset',
backgroundColor: 'rgba(151, 187, 205, 0.2)',
borderColor: 'rgba(151, 187, 205, 1)',
pointBackgroundColor: 'rgba(151, 187, 205, 1)',
pointBorderColor: '#fff',
data: [random(), random(), random(), random(), random(), random(), random()]
}
]
},
options: {
responsive: true
}
})
// eslint-disable-next-line no-unused-vars
const barChart = new Chart(document.getElementById('canvas-2'), {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(220, 220, 220, 0.5)',
borderColor: 'rgba(220, 220, 220, 0.8)',
highlightFill: 'rgba(220, 220, 220, 0.75)',
highlightStroke: 'rgba(220, 220, 220, 1)',
data: [random(), random(), random(), random(), random(), random(), random()]
},
{
backgroundColor: 'rgba(151, 187, 205, 0.5)',
borderColor: 'rgba(151, 187, 205, 0.8)',
highlightFill: 'rgba(151, 187, 205, 0.75)',
highlightStroke: 'rgba(151, 187, 205, 1)',
data: [random(), random(), random(), random(), random(), random(), random()]
}
]
},
options: {
responsive: true
}
})
// eslint-disable-next-line no-unused-vars
const doughnutChart = new Chart(document.getElementById('canvas-3'), {
type: 'doughnut',
data: {
labels: ['Red', 'Green', 'Yellow'],
datasets: [{
data: [300, 50, 100],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
}]
},
options: {
responsive: true
}
})
// eslint-disable-next-line no-unused-vars
const radarChart = new Chart(document.getElementById('canvas-4'), {
type: 'radar',
data: {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(220, 220, 220, 0.2)',
borderColor: 'rgba(220, 220, 220, 1)',
pointBackgroundColor: 'rgba(220, 220, 220, 1)',
pointBorderColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(220, 220, 220, 1)',
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: 'rgba(151, 187, 205, 0.2)',
borderColor: 'rgba(151, 187, 205, 1)',
pointBackgroundColor: 'rgba(151, 187, 205, 1)',
pointBorderColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151, 187, 205, 1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
]
},
options: {
responsive: true
}
})
// eslint-disable-next-line no-unused-vars
const pieChart = new Chart(document.getElementById('canvas-5'), {
type: 'pie',
data: {
labels: ['Red', 'Green', 'Yellow'],
datasets: [{
data: [300, 50, 100],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
}]
},
options: {
responsive: true
}
})
// eslint-disable-next-line no-unused-vars
const polarAreaChart = new Chart(document.getElementById('canvas-6'), {
type: 'polarArea',
data: {
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
datasets: [{
data: [11, 16, 7, 3, 14],
backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB']
}]
},
options: {
responsive: true
}
})
================================================
FILE: src/js/color-modes.js
================================================
/*!
* Color mode toggler for CoreUI's docs (https://coreui.io/)
* Copyright (c) 2025 creativeLabs Łukasz Holeczek
* Licensed under the Creative Commons Attribution 3.0 Unported License.
*/
/**
* Dark/Light Theme Switcher
*
* This module manages the application's color scheme (light/dark/auto mode).
* It handles:
* - Persisting theme preference to localStorage
* - Detecting system color scheme preference (prefers-color-scheme)
* - Updating the DOM with the selected theme
* - Managing the theme toggle UI in the header
* - Dispatching ColorSchemeChange events for chart updates
*
* Theme modes:
* - 'light': Force light theme
* - 'dark': Force dark theme
* - 'auto': Follow system preference
*
* The theme is applied via [data-coreui-theme] attribute on <html> element.
*/
(() => {
const THEME = 'coreui-free-bootstrap-admin-template-theme'
/**
* Retrieves the stored theme preference from localStorage
* @returns {string|null} Theme name ('light', 'dark', 'auto') or null
*/
const getStoredTheme = () => localStorage.getItem(THEME)
/**
* Saves the theme preference to localStorage
* @param {string} theme - Theme name ('light', 'dark', or 'auto')
*/
const setStoredTheme = theme => localStorage.setItem(THEME, theme)
/**
* Determines the preferred theme based on stored preference or system setting
* @returns {string} Preferred theme ('light' or 'dark')
*/
const getPreferredTheme = () => {
const storedTheme = getStoredTheme()
if (storedTheme) {
return storedTheme
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
/**
* Applies the theme to the document and dispatches a change event
* @param {string} theme - Theme to apply ('light', 'dark', or 'auto')
*/
const setTheme = theme => {
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-coreui-theme', 'dark')
} else {
document.documentElement.setAttribute('data-coreui-theme', theme)
}
const event = new Event('ColorSchemeChange')
document.documentElement.dispatchEvent(event)
}
setTheme(getPreferredTheme())
/**
* Updates the theme toggle UI to reflect the active theme
* @param {string} theme - Currently active theme
*/
const showActiveTheme = theme => {
const activeThemeIcon = document.querySelector('.theme-icon-active use')
const btnToActive = document.querySelector(`[data-coreui-theme-value="${theme}"]`)
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('xlink:href')
for (const element of document.querySelectorAll('[data-coreui-theme-value]')) {
element.classList.remove('active')
}
btnToActive.classList.add('active')
activeThemeIcon.setAttribute('xlink:href', svgOfActiveBtn)
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
const storedTheme = getStoredTheme()
if (storedTheme !== 'light' || storedTheme !== 'dark') {
setTheme(getPreferredTheme())
}
})
window.addEventListener('DOMContentLoaded', () => {
showActiveTheme(getPreferredTheme())
for (const toggle of document.querySelectorAll('[data-coreui-theme-value]')) {
toggle.addEventListener('click', () => {
const theme = toggle.getAttribute('data-coreui-theme-value')
setStoredTheme(theme)
setTheme(theme)
showActiveTheme(theme)
})
}
})
})()
================================================
FILE: src/js/colors.js
================================================
/* global coreui */
/**
* --------------------------------------------------------------------------
* CoreUI Boostrap Admin Template colors.js
* Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
/**
* Theme Color Display
*
* This module enhances the Colors page (views/theme/colors.html) by automatically
* generating color information tables for each theme color swatch. It extracts the
* computed background color from elements with the .theme-color class and displays
* both HEX and RGB values below each color sample.
*
* This provides developers with easy access to color values for use in custom styles.
*/
for (const element of document.querySelectorAll('.theme-color')) {
const color = getComputedStyle(element, null).getPropertyValue('background-color')
const table = document.createElement('table')
table.classList.add('w-100')
table.innerHTML = `
<table class="w-100">
<tr>
<td class="text-body-secondary">HEX:</td>
<td class="font-weight-bold">${coreui.Utils.rgbToHex(color)}</td>
</tr>
<tr>
<td class="text-body-secondary">RGB:</td>
<td class="font-weight-bold">${color}</td>
</tr>
</table>
`
element.parentNode.append(table)
}
================================================
FILE: src/js/config.js
================================================
/**
* --------------------------------------------------------------------------
* CoreUI Boostrap Admin Template config.js
* Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
/**
* Theme Configuration from URL Parameters
*
* This module allows setting the initial theme via URL query parameters.
* Useful for sharing links with specific theme preferences or testing different themes.
*
* Usage: Add ?theme=dark, ?theme=light, or ?theme=auto to the URL
* Example: http://localhost:3000/index.html?theme=dark
*
* The selected theme is persisted to localStorage and will be used as the default
* until changed by the user or another URL parameter.
*/
(() => {
const THEME = 'coreui-free-bootstrap-admin-template-theme'
const urlParams = new URLSearchParams(window.location.href.split('?')[1])
if (urlParams.get('theme') && ['auto', 'dark', 'light'].includes(urlParams.get('theme'))) {
localStorage.setItem(THEME, urlParams.get('theme'))
}
})()
================================================
FILE: src/js/main.js
================================================
/* global Chart, coreui */
/**
* --------------------------------------------------------------------------
* CoreUI Boostrap Admin Template main.js
* Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
/**
* Dashboard Charts
*
* This module initializes and manages all charts on the main Dashboard page (index.html).
* It includes:
* - Card charts (small charts in statistic cards)
* - Main chart (large chart showing traffic/metrics over time)
* - Custom tooltip configuration using CoreUI's ChartJS utilities
* - Theme-aware chart updates (responds to dark/light mode changes)
*
* All charts use Chart.js with CoreUI's custom styling and color variables.
*/
// Configure Chart.js defaults for custom tooltips
Chart.defaults.pointHitDetectionRadius = 1
Chart.defaults.plugins.tooltip.enabled = false
Chart.defaults.plugins.tooltip.mode = 'index'
Chart.defaults.plugins.tooltip.position = 'nearest'
Chart.defaults.plugins.tooltip.external = coreui.ChartJS.customTooltips
Chart.defaults.defaultFontColor = coreui.Utils.getStyle('--cui-body-color')
document.documentElement.addEventListener('ColorSchemeChange', () => {
cardChart1.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-primary')
cardChart2.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-info')
mainChart.options.scales.x.grid.color = coreui.Utils.getStyle('--cui-border-color-translucent')
mainChart.options.scales.x.ticks.color = coreui.Utils.getStyle('--cui-body-color')
mainChart.options.scales.y.border.color = coreui.Utils.getStyle('--cui-border-color-translucent')
mainChart.options.scales.y.grid.color = coreui.Utils.getStyle('--cui-border-color-translucent')
mainChart.options.scales.y.ticks.color = coreui.Utils.getStyle('--cui-body-color')
cardChart1.update()
cardChart2.update()
mainChart.update()
})
/**
* Generates a random integer between min and max (inclusive)
* @param {number} min - Minimum value
* @param {number} max - Maximum value
* @returns {number} Random integer between min and max
*/
const random = (min, max) =>
Math.floor((Math.random() * (max - min + 1)) + min)
const cardChart1 = new Chart(document.getElementById('card-chart1'), {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'transparent',
borderColor: 'rgba(255,255,255,.55)',
pointBackgroundColor: coreui.Utils.getStyle('--cui-primary'),
data: [65, 59, 84, 84, 51, 55, 40]
}
]
},
options: {
plugins: {
legend: {
display: false
}
},
maintainAspectRatio: false,
scales: {
x: {
border: {
display: false
},
grid: {
display: false,
drawBorder: false
},
ticks: {
display: false
}
},
y: {
min: 30,
max: 89,
display: false,
grid: {
display: false
},
ticks: {
display: false
}
}
},
elements: {
line: {
borderWidth: 1,
tension: 0.4
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4
}
}
}
})
const cardChart2 = new Chart(document.getElementById('card-chart2'), {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'transparent',
borderColor: 'rgba(255,255,255,.55)',
pointBackgroundColor: coreui.Utils.getStyle('--cui-info'),
data: [1, 18, 9, 17, 34, 22, 11]
}
]
},
options: {
plugins: {
legend: {
display: false
}
},
maintainAspectRatio: false,
scales: {
x: {
border: {
display: false
},
grid: {
display: false,
drawBorder: false
},
ticks: {
display: false
}
},
y: {
min: -9,
max: 39,
display: false,
grid: {
display: false
},
ticks: {
display: false
}
}
},
elements: {
line: {
borderWidth: 1
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4
}
}
}
})
// eslint-disable-next-line no-unused-vars
const cardChart3 = new Chart(document.getElementById('card-chart3'), {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.2)',
borderColor: 'rgba(255,255,255,.55)',
data: [78, 81, 80, 45, 34, 12, 40],
fill: true
}
]
},
options: {
plugins: {
legend: {
display: false
}
},
maintainAspectRatio: false,
scales: {
x: {
display: false
},
y: {
display: false
}
},
elements: {
line: {
borderWidth: 2,
tension: 0.4
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4
}
}
}
})
// eslint-disable-next-line no-unused-vars
const cardChart4 = new Chart(document.getElementById('card-chart4'), {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.2)',
borderColor: 'rgba(255,255,255,.55)',
data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
barPercentage: 0.6
}
]
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
x: {
grid: {
display: false,
drawTicks: false
},
ticks: {
display: false
}
},
y: {
border: {
display: false
},
grid: {
display: false,
drawBorder: false,
drawTicks: false
},
ticks: {
display: false
}
}
}
}
})
const mainChart = new Chart(document.getElementById('main-chart'), {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: `rgba(${coreui.Utils.getStyle('--cui-info-rgb')}, .1)`,
borderColor: coreui.Utils.getStyle('--cui-info'),
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200)
],
fill: true
},
{
label: 'My Second dataset',
borderColor: coreui.Utils.getStyle('--cui-success'),
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200)
]
}
]
},
options: {
maintainAspectRatio: false,
plugins: {
annotation: {
annotations: {
line1: {
type: 'line',
yMin: 95,
yMax: 95,
borderColor: coreui.Utils.getStyle('--cui-danger'),
borderWidth: 1,
borderDash: [8, 5]
}
}
},
legend: {
display: false
}
},
scales: {
x: {
grid: {
color: coreui.Utils.getStyle('--cui-border-color-translucent'),
drawOnChartArea: false
},
ticks: {
color: coreui.Utils.getStyle('--cui-body-color')
}
},
y: {
border: {
color: coreui.Utils.getStyle('--cui-border-color-translucent')
},
grid: {
color: coreui.Utils.getStyle('--cui-border-color-translucent')
},
ticks: {
beginAtZero: true,
color: coreui.Utils.getStyle('--cui-body-color'),
max: 250,
maxTicksLimit: 5,
stepSize: Math.ceil(250 / 5)
}
}
},
elements: {
line: {
tension: 0.4
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3
}
}
}
})
================================================
FILE: src/js/popovers.js
================================================
/* global coreui */
/**
* --------------------------------------------------------------------------
* CoreUI Boostrap Admin Template popovers.js
* Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
/**
* Popover Initialization
*
* This module automatically initializes all CoreUI Popover components on the page.
* Popovers are similar to tooltips but can contain more content and are triggered
* by clicks instead of hover.
*
* Any element with [data-coreui-toggle="popover"] will be initialized automatically.
* Used on pages like views/notifications/popovers.html
*
* @see https://coreui.io/bootstrap/docs/components/popovers/
*/
for (const element of document.querySelectorAll('[data-coreui-toggle="popover"]')) {
// eslint-disable-next-line no-new
new coreui.Popover(element)
}
================================================
FILE: src/js/toasts.js
================================================
/* global coreui */
/**
* --------------------------------------------------------------------------
* CoreUI Boostrap Admin Template toasts.js
* Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
/**
* Toast Notifications
*
* This module handles the live toast notification demo on views/notifications/toasts.html
* Toasts are lightweight notifications that appear temporarily to show messages to users.
*
* This implementation shows a toast when the demo button is clicked.
*
* @see https://coreui.io/bootstrap/docs/components/toasts/
*/
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
const toast = new coreui.Toast(toastLiveExample)
toast.show()
})
}
================================================
FILE: src/js/tooltips.js
================================================
/* global coreui */
/**
* --------------------------------------------------------------------------
* CoreUI Boostrap Admin Template tooltips.js
* Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
/**
* Tooltip Initialization
*
* This module automatically initializes all CoreUI Tooltip components on the page.
* Tooltips display helpful text on hover and are used throughout the template
* for additional context and information.
*
* Any element with [data-coreui-toggle="tooltip"] will be initialized automatically.
* Used on pages like views/notifications/tooltips.html
*
* @see https://coreui.io/bootstrap/docs/components/tooltips/
*/
for (const element of document.querySelectorAll('[data-coreui-toggle="tooltip"]')) {
// eslint-disable-next-line no-new
new coreui.Tooltip(element)
}
================================================
FILE: src/js/widgets.js
================================================
/* global Chart, coreui */
/**
* --------------------------------------------------------------------------
* CoreUI Boostrap Admin Template widgets.js
* Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
/**
* Widgets Page Charts
*
* This module initializes and manages all charts on the Widgets page (views/widgets.html).
* It includes multiple chart types:
* - Card charts (compact charts for cards)
* - Sparkline charts (mini bar and line charts)
* - Social box charts (brand-specific charts)
*
* All charts are configured with:
* - Custom CoreUI tooltips
* - Theme-aware color updates (dark/light mode support)
* - Randomly generated demo data
*/
// Configure Chart.js defaults for custom tooltips
Chart.defaults.pointHitDetectionRadius = 1
Chart.defaults.plugins.tooltip.enabled = false
Chart.defaults.plugins.tooltip.mode = 'index'
Chart.defaults.plugins.tooltip.position = 'nearest'
Chart.defaults.plugins.tooltip.external = coreui.ChartJS.customTooltips
Chart.defaults.defaultFontColor = coreui.Utils.getStyle('--cui-body-color')
document.documentElement.addEventListener('ColorSchemeChange', () => {
cardChart1.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-primary')
cardChart2.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-info')
cardChart1.update()
cardChart2.update()
})
const cardChart1 = new Chart(document.getElementById('card-chart1'), {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'transparent',
borderColor: 'rgba(255,255,255,.55)',
pointBackgroundColor: coreui.Utils.getStyle('--cui-primary'),
data: [65, 59, 84, 84, 51, 55, 40]
}
]
},
options: {
plugins: {
legend: {
display: false
}
},
maintainAspectRatio: false,
scales: {
x: {
border: {
display: false
},
grid: {
display: false,
drawBorder: false
},
ticks: {
display: false
}
},
y: {
min: 30,
max: 89,
display: false,
grid: {
display: false
},
ticks: {
display: false
}
}
},
elements: {
line: {
borderWidth: 1,
tension: 0.4
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4
}
}
}
})
const cardChart2 = new Chart(document.getElementById('card-chart2'), {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'transparent',
borderColor: 'rgba(255,255,255,.55)',
pointBackgroundColor: coreui.Utils.getStyle('--cui-info'),
data: [1, 18, 9, 17, 34, 22, 11]
}
]
},
options: {
plugins: {
legend: {
display: false
}
},
maintainAspectRatio: false,
scales: {
x: {
border: {
display: false
},
grid: {
display: false,
drawBorder: false
},
ticks: {
display: false
}
},
y: {
min: -9,
max: 39,
display: false,
grid: {
display: false
},
ticks: {
display: false
}
}
},
elements: {
line: {
borderWidth: 1
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4
}
}
}
})
// eslint-disable-next-line no-unused-vars
const cardChart3 = new Chart(document.getElementById('card-chart3'), {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.2)',
borderColor: 'rgba(255,255,255,.55)',
data: [78, 81, 80, 45, 34, 12, 40],
fill: true
}
]
},
options: {
plugins: {
legend: {
display: false
}
},
maintainAspectRatio: false,
scales: {
x: {
display: false
},
y: {
display: false
}
},
elements: {
line: {
borderWidth: 2,
tension: 0.4
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4
}
}
}
})
// eslint-disable-next-line no-unused-vars
const cardChart4 = new Chart(document.getElementById('card-chart4'), {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.2)',
borderColor: 'rgba(255,255,255,.55)',
data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
barPercentage: 0.6
}
]
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
x: {
grid: {
display: false,
drawTicks: false
},
ticks: {
display: false
}
},
y: {
border: {
display: false
},
grid: {
display: false,
drawBorder: false,
drawTicks: false
},
ticks: {
display: false
}
}
}
}
})
// Random Numbers
const random = (min, max) => Math.floor((Math.random() * (max - min + 1)) + min)
// eslint-disable-next-line no-unused-vars
const sparklineChart1 = new Chart(document.getElementById('sparkline-chart-1'), {
type: 'bar',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
datasets: [
{
backgroundColor: coreui.Utils.getStyle('--cui-primary'),
borderColor: 'transparent',
borderWidth: 1,
data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
}
]
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
x: {
display: false
},
y: {
display: false
}
}
}
})
// eslint-disable-next-line no-unused-vars
const sparklineChart2 = new Chart(document.getElementById('sparkline-chart-2'), {
type: 'bar',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
datasets: [
{
backgroundColor: coreui.Utils.getStyle('--cui-warning'),
borderColor: 'transparent',
borderWidth: 1,
data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
}
]
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
x: {
display: false
},
y: {
display: false
}
}
}
})
// eslint-disable-next-line no-unused-vars
const sparklineChart3 = new Chart(document.getElementById('sparkline-chart-3'), {
type: 'bar',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
datasets: [
{
backgroundColor: coreui.Utils.getStyle('--cui-success'),
borderColor: 'transparent',
borderWidth: 1,
data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
}
]
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
x: {
display: false
},
y: {
display: false
}
}
}
})
// eslint-disable-next-line no-unused-vars
const sparklineChart4 = new Chart(document.getElementById('sparkline-chart-4'), {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [
{
backgroundColor: 'transparent',
borderColor: coreui.Utils.getStyle('--cui-info'),
borderWidth: 2,
data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
}
]
},
options: {
maintainAspectRatio: false,
elements: {
line: {
tension: 0.4
},
point: {
radius: 0
}
},
plugins: {
legend: {
display: false
}
},
scales: {
x: {
display: false
},
y: {
display: false
}
}
}
})
// eslint-disable-next-line no-unused-vars
const sparklineChart5 = new Chart(document.getElementById('sparkline-chart-5'), {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [
{
backgroundColor: 'transparent',
borderColor: coreui.Utils.getStyle('--cui-success'),
borderWidth: 2,
data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
}
]
},
options: {
maintainAspectRatio: false,
elements: {
line: {
tension: 0.4
},
point: {
radius: 0
}
},
plugins: {
legend: {
display: false
}
},
scales: {
x: {
display: false
},
y: {
display: false
}
}
}
})
// eslint-disable-next-line no-unused-vars
const sparklineChart6 = new Chart(document.getElementById('sparkline-chart-6'), {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [
{
backgroundColor: 'transparent',
borderColor: coreui.Utils.getStyle('--cui-danger'),
borderWidth: 2,
data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
}
]
},
options: {
maintainAspectRatio: false,
elements: {
line: {
tension: 0.4
},
point: {
radius: 0
}
},
plugins: {
legend: {
display: false
}
},
scales: {
x: {
display: false
},
y: {
display: false
}
}
}
})
const brandBoxChartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']
const brandBoxChartOptions = {
elements: {
line: {
tension: 0.4
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3
}
},
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
x: {
display: false
},
y: {
display: false
}
}
}
// eslint-disable-next-line no-unused-vars
const brandBoxChart1 = new Chart(document.getElementById('social-box-chart-1'), {
type: 'line',
data: {
labels: brandBoxChartLabels,
datasets: [{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [65, 59, 84, 84, 51, 55, 40],
fill: true
}]
},
options: brandBoxChartOptions
})
// eslint-disable-next-line no-unused-vars
const brandBoxChart2 = new Chart(document.getElementById('social-box-chart-2'), {
type: 'line',
data: {
labels: brandBoxChartLabels,
datasets: [{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [1, 13, 9, 17, 34, 41, 38],
fill: true
}]
},
options: brandBoxChartOptions
})
// eslint-disable-next-line no-unused-vars
const brandBoxChart3 = new Chart(document.getElementById('social-box-chart-3'), {
type: 'line',
data: {
labels: brandBoxChartLabels,
datasets: [{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [78, 81, 80, 45, 34, 12, 40],
fill: true
}]
},
options: brandBoxChartOptions
})
================================================
FILE: src/pug/_layout/default.pug
================================================
- var count = 1000
doctype html
include ../_partials/banner.pug
include ../_mixins/breadcrumb.pug
include ../_mixins/callout.pug
include ../_mixins/callout-custom.pug
include ../_mixins/docs-components.pug
include ../_mixins/example.pug
html(lang='en')
head
base(href=base)
include ../_partials/head.pug
block canonical
block styles
body
include ../_partials/sidebar.pug
.wrapper.d-flex.flex-column.min-vh-100
include ../_partials/header.pug
.body.flex-grow-1
.container-lg.px-4
block view
include ../_partials/footer.pug
include ../_partials/scripts.pug
================================================
FILE: src/pug/_layout/pages.pug
================================================
- var page = true
doctype html
include ../_partials/banner.pug
html(lang='en')
head
base(href=base)
include ../_partials/head.pug
block styles
body
.bg-body-tertiary.min-vh-100.d-flex.flex-row.align-items-center
block view
include ../_partials/scripts.pug
================================================
FILE: src/pug/_mixins/breadcrumb.pug
================================================
mixin breadcrumb(items)
nav(aria-label="breadcrumb")
ol.breadcrumb.my-0
each item, index in items
- var href = item.href
- var label = item.label
li.breadcrumb-item(class=(index === items.length - 1 ? 'active' : false))
if (href)
a(href=(href ? href : '#'))= label ? label : item
else
span= label ? label : item
================================================
FILE: src/pug/_mixins/callout-custom.pug
================================================
mixin callout-custom
.callout.callout-info.bg-body
block
================================================
FILE: src/pug/_mixins/callout.pug
================================================
mixin callout(name, href)
.callout.callout-info.bg-white
| CoreUI #{name} has been created as an extension of Bootstrap #{name}. #{name} is delivered with some new features, variants, and unique design that matches CoreUI Design System requirements.
br
br
| For more information please visit our official
|
a(href=href target="_blank") documentation
| .
================================================
FILE: src/pug/_mixins/docs-components.pug
================================================
mixin docs-components(href)
.bg-primary.bg-opacity-10.border.border-2.border-primary.rounded.mb-4
.row.d-flex.align-items-center.p-3.px-xl-4.flex-xl-nowrap
.col-xl-auto.col-12.d-none.d-xl-block.p-0
img.img-fluid(src='assets/img/components.webp' width='160px' height='160px' alt='CoreUI PRO hexagon')
.col-md.col-12.px-lg-4
| Our Admin Panel isn’t just a mix of third-party components. It’s <strong>the only open-source Bootstrap dashboard built on a professional, enterprise-grade UI Components Library</strong>.
| This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs.
.col-md-auto.col-12.mt-3.mt-lg-0
a.btn.btn-primary.text-nowrap.text-white(href=href target="_blank" rel='noopener noreferrer') Explore Documentation
================================================
FILE: src/pug/_mixins/example.pug
================================================
mixin example(url, classNames)
.example
ul.nav.nav-underline-border(role="tablist")
li.nav-item
a.nav-link.active(data-coreui-toggle="tab" href="#preview-"+count role="tab")
svg.icon.me-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play")
|
| Preview
if url
li.nav-item
a.nav-link(href=url target="_blank")
svg.icon.me-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code")
|
| Code
.tab-content.rounded-bottom(class=classNames)
.tab-pane.p-3.active.preview(role="tabpanel" id="preview-"+count++ )
block
================================================
FILE: src/pug/_partials/banner.pug
================================================
//
* CoreUI - Free Bootstrap Admin Template
* @version v5.3.0
* @link https://coreui.io/product/free-bootstrap-admin-template/
* Copyright (c) 2025 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)
= "\n"
================================================
FILE: src/pug/_partials/docs-icons.pug
================================================
.bg-warning.bg-opacity-10.border.border-2.border-warning.rounded.mb-4
.row.d-flex.align-items-center.p-3.px-xl-4.flex-xl-nowrap
.col-xl-auto.col-12.d-none.d-xl-block.p-0
img.img-fluid(src='assets/img/icons.webp' width='160px' height='160px' alt='CoreUI Icons')
.col-md.col-12.px-lg-4
| CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG,
| and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You
| can use them in your digital products for web or mobile app. For more information please
| visit our documentation.
.col-md-auto.col-12.mt-3.mt-lg-0
a.btn.btn-warning.text-nowrap.text-white(href='https://coreui.io/bootstrap/docs/icons/' target='_blank' rel='noopener noreferrer')
| Explore Documentation
================================================
FILE: src/pug/_partials/footer.pug
================================================
footer.footer.px-4
div
a(href='https://coreui.io') CoreUI
a(href='https://coreui.io/product/free-bootstrap-admin-template/') Bootstrap Admin Template
| © 2025 creativeLabs.
div.ms-auto
| Powered by
a(href='https://coreui.io/bootstrap/docs/') CoreUI UI Components
================================================
FILE: src/pug/_partials/head.pug
================================================
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='viewport', content='width=device-width, initial-scale=1.0, shrink-to-fit=no')
meta(name='description', content='CoreUI - Open Source Bootstrap Admin Template')
meta(name='author', content='Łukasz Holeczek')
meta(name='keyword', content='Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard')
title CoreUI Free Bootstrap Admin Template
link(rel='apple-touch-icon', sizes='57x57', href='assets/favicon/apple-icon-57x57.png')
link(rel='apple-touch-icon', sizes='60x60', href='assets/favicon/apple-icon-60x60.png')
link(rel='apple-touch-icon', sizes='72x72', href='assets/favicon/apple-icon-72x72.png')
link(rel='apple-touch-icon', sizes='76x76', href='assets/favicon/apple-icon-76x76.png')
link(rel='apple-touch-icon', sizes='114x114', href='assets/favicon/apple-icon-114x114.png')
link(rel='apple-touch-icon', sizes='120x120', href='assets/favicon/apple-icon-120x120.png')
link(rel='apple-touch-icon', sizes='144x144', href='assets/favicon/apple-icon-144x144.png')
link(rel='apple-touch-icon', sizes='152x152', href='assets/favicon/apple-icon-152x152.png')
link(rel='apple-touch-icon', sizes='180x180', href='assets/favicon/apple-icon-180x180.png')
link(rel='icon', type='image/png', sizes='192x192', href='assets/favicon/android-icon-192x192.png')
link(rel='icon', type='image/png', sizes='32x32', href='assets/favicon/favicon-32x32.png')
link(rel='icon', type='image/png', sizes='96x96', href='assets/favicon/favicon-96x96.png')
link(rel='icon', type='image/png', sizes='16x16', href='assets/favicon/favicon-16x16.png')
link(rel='manifest', href='assets/favicon/manifest.json')
meta(name='msapplication-TileColor', content='#ffffff')
meta(name='msapplication-TileImage', content='assets/favicon/ms-icon-144x144.png')
meta(name='theme-color', content='#ffffff')
// Vendors styles
link(rel='stylesheet' href='node_modules/simplebar/dist/simplebar.css')
link(rel='stylesheet' href='css/vendors/simplebar.css')
// Main styles for this application
link(href='css/style.css', rel='stylesheet')
// We use those styles to show code examples, you should remove them in your application.
link(href='css/examples.css', rel='stylesheet')
script(src='js/config.js')
script(src='js/color-modes.js')
================================================
FILE: src/pug/_partials/header.pug
================================================
header.header.header-sticky.p-0.mb-4
.container-fluid.border-bottom.px-4
button.header-toggler(type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()" style="margin-inline-start: -14px;")
svg.icon.icon-lg
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-menu")
ul.header-nav.d-none.d-lg-flex
li.nav-item
a.nav-link(href="#") Dashboard
li.nav-item
a.nav-link(href="#") Users
li.nav-item
a.nav-link(href="#") Settings
ul.header-nav.ms-auto
li.nav-item
a.nav-link(href="#")
svg.icon.icon-lg
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell")
li.nav-item
a.nav-link(href="#")
svg.icon.icon-lg
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-list-rich")
li.nav-item
a.nav-link(href="#")
svg.icon.icon-lg
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open")
ul.header-nav
li.nav-item.py-1
.vr.h-100.mx-2.text-body.text-opacity-75
li.nav-item.dropdown
button.btn.btn-link.nav-link.py-2.px-2.d-flex.align-items-center(type="button" aria-expanded="false" data-coreui-toggle="dropdown")
svg.icon.icon-lg.theme-icon-active
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-contrast")
ul.dropdown-menu.dropdown-menu-end(style='--cui-dropdown-min-width: 8rem;')
li
button.dropdown-item.d-flex.align-items-center(type='button' data-coreui-theme-value='light')
svg.icon.icon-lg.me-3
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-sun")
| Light
li
button.dropdown-item.d-flex.align-items-center(type='button' data-coreui-theme-value='dark')
svg.icon.icon-lg.me-3
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-moon")
| Dark
li
button.dropdown-item.d-flex.align-items-center.active(type='button' data-coreui-theme-value='auto')
svg.icon.icon-lg.me-3
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-contrast")
| Auto
li.nav-item.py-1
.vr.h-100.mx-2.text-body.text-opacity-75
li.nav-item.dropdown
a.nav-link.py-0.pe-0(data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false")
.avatar.avatar-md
img.avatar-img(src="assets/img/avatars/8.jpg" alt="user@email.com")
.dropdown-menu.dropdown-menu-end.pt-0
.dropdown-header.bg-body-tertiary.text-body-secondary.fw-semibold.rounded-top.mb-2 Account
a.dropdown-item(href="#")
svg.icon.me-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell")
|
| Updates
span.badge.badge-sm.bg-info.ms-2 42
a.dropdown-item(href="#")
svg.icon.me-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open")
|
| Messages
span.badge.badge-sm.bg-success.ms-2 42
a.dropdown-item(href="#")
svg.icon.me-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-task")
|
| Tasks
span.badge.badge-sm.bg-danger.ms-2 42
a.dropdown-item(href="#")
svg.icon.me-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-comment-square")
|
| Comments
span.badge.badge-sm.bg-warning.ms-2 42
.dropdown-header.bg-body-tertiary.text-body-secondary.fw-semibold.my-2
.fw-semibold Settings
a.dropdown-item(href="#")
svg.icon.me-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-user")
|
| Profile
a.dropdown-item(href="#")
svg.icon.me-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-settings")
|
| Settings
a.dropdown-item(href="#")
svg.icon.me-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-credit-card")
|
| Payments
span.badge.badge-sm.bg-secondary.ms-2 42
a.dropdown-item(href="#")
svg.icon.me-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-file")
|
| Projects
span.badge.badge-sm.bg-primary.ms-2 42
.dropdown-divider
a.dropdown-item(href="#")
svg.icon.me-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-lock-locked")
|
| Lock Account
a.dropdown-item(href="#")
svg.icon.me-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-account-logout")
|
| Logout
.container-fluid.px-4
block breadcrumb
================================================
FILE: src/pug/_partials/scripts.pug
================================================
// CoreUI and necessary plugins
script(src='node_modules/@coreui/coreui/dist/js/coreui.bundle.min.js')
script(src='node_modules/simplebar/dist/simplebar.min.js')
script.
const header = document.querySelector('header.header');
document.addEventListener('scroll', () => {
if (header) {
header.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0);
}
});
block scripts
script
block js
================================================
FILE: src/pug/_partials/sidebar.pug
================================================
.sidebar.sidebar-dark.sidebar-fixed.border-end#sidebar
.sidebar-header.border-bottom
.sidebar-brand
svg.sidebar-brand-full(width="88" height="32" alt="CoreUI Logo")
use(xlink:href="assets/brand/coreui.svg#full")
|
svg.sidebar-brand-narrow(width="32" height="32" alt="CoreUI Logo")
use(xlink:href="assets/brand/coreui.svg#signet")
button.btn-close.d-lg-none(type='button' data-coreui-theme="dark" aria-label='Close' onclick='coreui.Sidebar.getInstance(document.querySelector("#sidebar")).toggle()')
ul.sidebar-nav(data-coreui="navigation" data-simplebar)
li.nav-item
a.nav-link(href='index.html')
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-speedometer")
| Dashboard
span.badge.badge-sm.bg-info.ms-auto NEW
li.nav-title
| Theme
li.nav-item
a.nav-link(href='colors.html')
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-drop")
| Colors
li.nav-item
a.nav-link(href='typography.html')
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-pencil")
| Typography
li.nav-title
| Components
li.nav-group
a.nav-link.nav-group-toggle(href='#')
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-puzzle")
| Base
ul.nav-group-items.compact
li.nav-item
a.nav-link(href='base/accordion.html')
span.nav-icon
span.nav-icon-bullet
| Accordion
li.nav-item
a.nav-link(href='base/breadcrumb.html')
span.nav-icon
span.nav-icon-bullet
| Breadcrumb
li.nav-item
a.nav-link(href='https://coreui.io/bootstrap/docs/components/calendar/' target='_blank')
span.nav-icon
span.nav-icon-bullet
| Calendar
svg.icon.icon-sm.ms-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link")
span.badge.badge-sm.bg-danger.ms-auto PRO
li.nav-item
a.nav-link(href='base/cards.html')
span.nav-icon
span.nav-icon-bullet
| Cards
li.nav-item
a.nav-link(href='base/carousel.html')
span.nav-icon
span.nav-icon-bullet
| Carousel
li.nav-item
a.nav-link(href='base/collapse.html')
span.nav-icon
span.nav-icon-bullet
| Collapse
li.nav-item
a.nav-link(href='base/list-group.html')
span.nav-icon
span.nav-icon-bullet
| List group
li.nav-item
a.nav-link(href='base/navs-tabs.html')
span.nav-icon
span.nav-icon-bullet
| Navs & Tabs
li.nav-item
a.nav-link(href='base/pagination.html')
span.nav-icon
span.nav-icon-bullet
| Pagination
li.nav-item
a.nav-link(href='base/placeholders.html')
span.nav-icon
span.nav-icon-bullet
| Placeholders
li.nav-item
a.nav-link(href='base/popovers.html')
span.nav-icon
span.nav-icon-bullet
| Popovers
li.nav-item
a.nav-link(href='base/progress.html')
span.nav-icon
span.nav-icon-bullet
| Progress
li.nav-item
a.nav-link(href='base/spinners.html')
span.nav-icon
span.nav-icon-bullet
| Spinners
li.nav-item
a.nav-link(href='base/tables.html')
span.nav-icon
span.nav-icon-bullet
| Tables
li.nav-item
a.nav-link(href='base/tooltips.html')
span.nav-icon
span.nav-icon-bullet
| Tooltips
li.nav-group
a.nav-link.nav-group-toggle(href='#')
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-cursor")
| Buttons
ul.nav-group-items.compact
li.nav-item
a.nav-link(href='buttons/buttons.html')
span.nav-icon
span.nav-icon-bullet
| Buttons
li.nav-item
a.nav-link(href='buttons/button-group.html')
span.nav-icon
span.nav-icon-bullet
| Buttons Group
li.nav-item
a.nav-link(href='buttons/dropdowns.html')
span.nav-icon
span.nav-icon-bullet
| Dropdowns
li.nav-item
a.nav-link(href='https://coreui.io/bootstrap/docs/components/loading-buttons/' target='_blank')
span.nav-icon
span.nav-icon-bullet
| Loading Buttons
svg.icon.icon-sm.ms-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link")
span.badge.badge-sm.bg-danger.ms-auto PRO
li.nav-item
a.nav-link(href='charts.html')
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chart-pie")
| Charts
li.nav-group
a.nav-link.nav-group-toggle(href='#')
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-notes")
| Forms
ul.nav-group-items.compact
li.nav-item
a.nav-link(href='https://coreui.io/bootstrap/docs/forms/autocomplete/' target='_blank')
span.nav-icon
span.nav-icon-bullet
| Autocomplete
svg.icon.icon-sm.ms-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link")
span.badge.badge-sm.bg-danger.ms-auto PRO
li.nav-item
a.nav-link(href='forms/checks-radios.html')
span.nav-icon
span.nav-icon-bullet
| Checks and radios
li.nav-item
a.nav-link(href='https://coreui.io/bootstrap/docs/forms/date-picker/' target='_blank')
span.nav-icon
span.nav-icon-bullet
| Date Picker
svg.icon.icon-sm.ms-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link")
span.badge.badge-sm.bg-danger.ms-auto PRO
li.nav-item
a.nav-link(href='https://coreui.io/bootstrap/docs/forms/date-range-picker/' target='_blank')
span.nav-icon
span.nav-icon-bullet
| Date Range Picker
span.badge.badge-sm.bg-danger.ms-auto PRO
li.nav-item
a.nav-link(href='forms/floating-labels.html')
span.nav-icon
span.nav-icon-bullet
| Floating labels
li.nav-item
a.nav-link(href='forms/form-control.html')
span.nav-icon
span.nav-icon-bullet
| Form Control
li.nav-item
a.nav-link(href='forms/input-group.html')
span.nav-icon
span.nav-icon-bullet
| Input group
li.nav-item
a.nav-link(href='https://coreui.io/bootstrap/docs/forms/multi-select/' target='_blank')
span.nav-icon
span.nav-icon-bullet
| Multi Select
svg.icon.icon-sm.ms-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link")
span.badge.badge-sm.bg-danger.ms-auto PRO
li.nav-item
a.nav-link(href='forms/range.html')
span.nav-icon
span.nav-icon-bullet
| Range
li.nav-item
a.nav-link(href='https://coreui.io/bootstrap/docs/forms/range-slider/' target='_blank')
span.nav-icon
span.nav-icon-bullet
| Range Slider
svg.icon.icon-sm.ms-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link")
span.badge.badge-sm.bg-danger.ms-auto PRO
li.nav-item
a.nav-link(href='https://coreui.io/bootstrap/docs/forms/rating/' target='_blank')
span.nav-icon
span.nav-icon-bullet
| Rating
svg.icon.icon-sm.ms-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link")
span.badge.badge-sm.bg-danger.ms-auto PRO
li.nav-item
a.nav-link(href='forms/select.html')
span.nav-icon
span.nav-icon-bullet
| Select
li.nav-item
a.nav-link(href='https://coreui.io/bootstrap/docs/forms/time-picker/' target='_blank')
span.nav-icon
span.nav-icon-bullet
| Time Picker
svg.icon.icon-sm.ms-2
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link")
span.badge.badge-sm.bg-danger.ms-auto PRO
li.nav-item
a.nav-link(href='forms/layout.html')
span.nav-icon
span.nav-icon-bullet
| Layout
li.nav-item
a.nav-link(href='forms/validation.html')
span.nav-icon
span.nav-icon-bullet
| Validation
li.nav-group
a.nav-link.nav-group-toggle(href='#')
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-star")
| Icons
ul.nav-group-items.compact
li.nav-item
a.nav-link(href='icons/coreui-icons-free.html')
span.nav-icon
span.nav-icon-bullet
| CoreUI Icons
span.badge.badge-sm.bg-success.ms-auto Free
li.nav-item
a.nav-link(href='icons/coreui-icons-brand.html')
span.nav-icon
span.nav-icon-bullet
| CoreUI Icons - Brand
li.nav-item
a.nav-link(href='icons/coreui-icons-flag.html')
span.nav-icon
span.nav-icon-bullet
| CoreUI Icons - Flag
li.nav-group
a.nav-link.nav-group-toggle(href='#')
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell")
| Notifications
ul.nav-group-items.compact
li.nav-item
a.nav-link(href='notifications/alerts.html')
span.nav-icon
span.nav-icon-bullet
| Alerts
li.nav-item
a.nav-link(href='notifications/badge.html')
span.nav-icon
span.nav-icon-bullet
| Badge
li.nav-item
a.nav-link(href='notifications/modals.html')
span.nav-icon
span.nav-icon-bullet
| Modals
li.nav-item
a.nav-link(href='notifications/toasts.html')
span.nav-icon
span.nav-icon-bullet
| Toasts
li.nav-item
a.nav-link(href='widgets.html')
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-calculator")
| Widgets
span.badge.badge-sm.bg-info.ms-auto NEW
li.nav-divider
li.nav-title
| Extras
li.nav-group
a.nav-link.nav-group-toggle(href='#')
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-star")
| Pages
ul.nav-group-items.compact
li.nav-item
a.nav-link(href='login.html' target="_top")
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-account-logout")
| Login
li.nav-item
a.nav-link(href='register.html' target="_top")
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-account-logout")
| Register
li.nav-item
a.nav-link(href='404.html' target="_top")
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bug")
| Error 404
li.nav-item
a.nav-link(href='500.html' target="_top")
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bug")
| Error 500
li.nav-item.mt-auto
a.nav-link(href='https://coreui.io/bootstrap/docs/templates/installation/' target='_blank')
svg.nav-icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-description")
| Docs
li.nav-item
a.nav-link.text-primary.fw-semibold(href="https://coreui.io/product/bootstrap-dashboard-template/" target="_top")
svg.nav-icon.text-primary
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-layers")
| Try CoreUI PRO
.sidebar-footer.border-top.d-none.d-md-flex
button.sidebar-toggler(type="button" data-coreui-toggle="unfoldable")
================================================
FILE: src/pug/views/404.pug
================================================
extends ../_layout/pages.pug
block view
.container
.row.justify-content-center
.col-md-6
.clearfix
h1.float-start.display-3.me-4 404
h4.pt-3 Oops! You're lost.
p.text-body-secondary The page you are looking for was not found.
.input-group
span.input-group-text
svg.icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-magnifying-glass")
|
input#prependedInput.form-control(size='16', type='text', placeholder='What are you looking for?')
button.btn.btn-info(type='button') Search
================================================
FILE: src/pug/views/500.pug
================================================
extends ../_layout/pages.pug
block view
.container
.row.justify-content-center
.col-md-6
.clearfix
h1.float-start.display-3.me-4 500
h4.pt-3 Houston, we have a problem!
p.text-body-secondary The page you are looking for is temporarily unavailable.
.input-group
span.input-group-text
svg.icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-magnifying-glass")
|
input#prependedInput.form-control(size='16', type='text', placeholder='What are you looking for?')
button.btn.btn-info(type='button') Search
================================================
FILE: src/pug/views/base/accordion.pug
================================================
extends ../../_layout/default.pug
block canonical
link(rel='canonical' href='https://coreui.io/bootstrap/docs/components/accordion/')
block breadcrumb
+breadcrumb(
[
{ href: '#', label: 'Home'},
{ label: 'Components'},
{ label: 'Base'},
'Accordion'
],
)
block view
+docs-components('https://coreui.io/bootstrap/docs/components/accordion/')
.row
.col-12
.card.mb-4
.card-header
strong Accordion
.card-body
p.text-body-secondary.small
| Click the accordions below to expand/collapse the accordion content.
+example('https://coreui.io/bootstrap/docs/components/accordion/#how-it-works')
#accordionExample.accordion
.accordion-item
h2#headingOne.accordion-header
button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#collapseOne' aria-expanded='false' aria-controls='collapseOne')
| Accordion Item #1
#collapseOne.accordion-collapse.collapse(aria-labelledby='headingOne' data-coreui-parent='#accordionExample' style='')
.accordion-body
strong This is the first item's accordion body.
| It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
code .accordion-body
| , though the transition does limit overflow.
.accordion-item
h2#headingTwo.accordion-header
button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#collapseTwo' aria-expanded='false' aria-controls='collapseTwo')
| Accordion Item #2
#collapseTwo.accordion-collapse.collapse(aria-labelledby='headingTwo' data-coreui-parent='#accordionExample' style='')
.accordion-body
strong This is the second item's accordion body.
| It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
code .accordion-body
| , though the transition does limit overflow.
.accordion-item
h2#headingThree.accordion-header
button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#collapseThree' aria-expanded='false' aria-controls='collapseThree')
| Accordion Item #3
#collapseThree.accordion-collapse.collapse(aria-labelledby='headingThree' data-coreui-parent='#accordionExample' style='')
.accordion-body
strong This is the third item's accordion body.
| It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
code .accordion-body
| , though the transition does limit overflow.
.col-12
.card.mb-4
.card-header
strong Accordion
span.small.ms-1 Flush
.card-body
p.text-body-secondary.small
| Add
code .accordion-flush
| to remove the default
code background-color
| , some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
+example('https://coreui.io/bootstrap/docs/components/accordion/#flush')
#accordionFlushExample.accordion.accordion-flush
.accordion-item
h2#flush-headingOne.accordion-header
button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#flush-collapseOne' aria-expanded='false' aria-controls='flush-collapseOne')
| Accordion Item #1
#flush-collapseOne.accordion-collapse.collapse(aria-labelledby='flush-headingOne' data-coreui-parent='#accordionFlushExample')
.accordion-body
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
.accordion-item
h2#flush-headingTwo.accordion-header
button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#flush-collapseTwo' aria-expanded='false' aria-controls='flush-collapseTwo')
| Accordion Item #2
#flush-collapseTwo.accordion-collapse.collapse(aria-labelledby='flush-headingTwo' data-coreui-parent='#accordionFlushExample')
.accordion-body
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
.accordion-item
h2#flush-headingThree.accordion-header
button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#flush-collapseThree' aria-expanded='false' aria-controls='flush-collapseThree')
| Accordion Item #3
#flush-collapseThree.accordion-collapse.collapse(aria-labelledby='flush-headingThree' data-coreui-parent='#accordionFlushExample')
.accordion-body
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
================================================
FILE: src/pug/views/base/breadcrumb.pug
================================================
extends ../../_layout/default.pug
block canonical
link(rel='canonical' href='https://coreui.io/bootstrap/docs/components/breadcrumb/')
block breadcrumb
+breadcrumb(
[
{ href: '#', label: 'Home'},
{ label: 'Components'},
{ label: 'Base'},
'Breadcrumb'
]
)
block view
+docs-components('https://coreui.io/bootstrap/docs/components/breadcrumb/')
.row
.col-lg-12
.card.mb-4
.card-header
strong Breadcrumb
.card-body
p.text-body-secondary.small
| The breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through
a(href='https://developer.mozilla.org/en-US/docs/Web/CSS/::before')
code ::before
| and
a(href='https://developer.mozilla.org/en-US/docs/Web/CSS/content')
code content
| .
+example('https://coreui.io/bootstrap/docs/components/breadcrumb/#example')
nav(aria-label='breadcrumb', role='navigation')
ol.breadcrumb
li.breadcrumb-item.active(aria-current='page') Home
nav(aria-label='breadcrumb', role='navigation')
ol.breadcrumb
li.breadcrumb-item
a(href='#') Home
li.breadcrumb-item.active(aria-current='page') Library
nav(aria-label='breadcrumb', role='navigation')
ol.breadcrumb
li.breadcrumb-item
a(href='#') Home
li.breadcrumb-item
a(href='#') Library
li.breadcrumb-item.active(aria-current='page') Data
nav.breadcrumb
a.breadcrumb-item(href='#') Home
a.breadcrumb-item(href='#') Library
a.breadcrumb-item(href='#') Data
span.breadcrumb-item.active Bootstrap
// /.row
================================================
FILE: src/pug/views/base/cards.pug
================================================
extends ../../_layout/default.pug
block canonical
link(rel='canonical' href='https://coreui.io/bootstrap/docs/components/card/')
block breadcrumb
+breadcrumb(
[
{ href: '#', label: 'Home'},
{ label: 'Components'},
{ label: 'Base'},
'Cards'
],
)
block view
+docs-components('https://coreui.io/bootstrap/docs/components/card/')
.card.mb-4
.card-header
strong Card
span.small.ms-1 Example
.card-body
p.text-body-secondary.small
| Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. Cards have no top, left, and right margins by default, so use
a(href='https://coreui.io/bootstrap/docs/utilities/spacing/') spacing utilities
| as needed. They have no fixed width to start, so they’ll fill the full width of its parent.
p.text-body-secondary.small
| Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various
a(href='#sizing') sizing options
| .
+example('https://coreui.io/bootstrap/docs/components/card/#example')
.card(style='width: 18rem;')
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
a.btn.btn-primary(href='#') Go somewhere
.card.mb-4
.card-header
strong Card
span.small.ms-1 Body
.card-body
p.text-body-secondary.small
| The main block of a card is the
code .card-body
| . Use it whenever you need a padded section within a card.
+example('https://coreui.io/bootstrap/docs/components/card/#body')
.card
.card-body
| This is some text within a card body.
.card.mb-4
.card-header
strong Card
span.small.ms-1 Titles, text, and links
.card-body
p.text-body-secondary.small
| Card titles are managed by adding
code .card-title
| to a
code
= '<h*>'
| tag. Identically, links are attached and collected next to each other by adding
code .card-link
| to an
code
= '<a>'
| tag.
p.text-body-secondary.small
| Subtitles are managed by adding a
code .card-subtitle
| to a
code
= '<h*>'
| tag. If the
code .card-title
| also, the
code .card-subtitle
| items are stored in a
code .card-body
| item, the card title, and subtitle are arranged rightly.
+example('https://coreui.io/bootstrap/docs/components/card/#titles-text-and-links')
.card(style='width: 18rem;')
.card-body
h5.card-title Card title
h6.card-subtitle.mb-2.text-body-secondary Card subtitle
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
a.card-link(href='#') Card link
a.card-link(href='#') Another link
.card.mb-4
.card-header
strong Card
span.small.ms-1 Images
.card-body
p.text-body-secondary.small
code .card-img-top
| places a picture to the top of the card. With
code .card-text
| , text can be added to the card. Text within
code .card-text
| can additionally be styled with the regular HTML tags.
+example('https://coreui.io/bootstrap/docs/components/card/#titles-text-and-links')
.card(style='width: 18rem;')
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.card.mb-4
.card-header
strong Card
span.small.ms-1 List groups
.card-body
p.text-body-secondary.small Create lists of content in a card with a flush list group.
+example('https://coreui.io/bootstrap/docs/components/card/#list-groups')
.row
.col-lg-4
.card
ul.list-group.list-group-flush
li.list-group-item An item
li.list-group-item A second item
li.list-group-item A third item
.col-lg-4
.card
.card-header
| Featured
ul.list-group.list-group-flush
li.list-group-item An item
li.list-group-item A second item
li.list-group-item A third item
.col-lg-4
.card
ul.list-group.list-group-flush
li.list-group-item An item
li.list-group-item A second item
li.list-group-item A third item
.card-footer
| Card footer
.card.mb-4
.card-header
strong Card
span.small.ms-1 Kitchen sink
.card-body
p.text-body-secondary.small
| Combine and match many content types to build the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
+example('https://coreui.io/bootstrap/docs/components/card/#kitchen-sink')
.card(style='width: 18rem;')
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
ul.list-group.list-group-flush
li.list-group-item An item
li.list-group-item A second item
li.list-group-item A third item
.card-body
a.card-link(href='#') Card link
a.card-link(href='#') Another link
.card.mb-4
.card-header
strong Card
span.small.ms-1 Header and footer
.card-body
p.text-body-secondary.small Add an optional header and/or footer within a card.
+example('https://coreui.io/bootstrap/docs/components/card/#header-and-footer')
.card.mb-3
.card-header
| Featured
.card-body
h5.card-title Special title treatment
p.card-text With supporting text below as a natural lead-in to additional content.
a.btn.btn-primary(href='#') Go somewhere
p.text-body-secondary.small
| Card headers can be styled by adding
code .card-header
| to
code
= '<h*>'
| elements.
+example('https://coreui.io/bootstrap/docs/components/card/#header-and-footer')
.card.mb-3
h5.card-header Featured
.card-body
h5.card-title Special title treatment
p.card-text With supporting text below as a natural lead-in to additional content.
a.btn.btn-primary(href='#') Go somewhere
+example('https://coreui.io/bootstrap/docs/components/card/#header-and-footer')
.card.mb-3
.card-header
| Quote
.card-body
blockquote.blockquote.mb-0
p A well-known quote, contained in a blockquote element.
footer.blockquote-footer
| Someone famous in
cite(title='Source Title') Source Title
+example('https://coreui.io/bootstrap/docs/components/card/#header-and-footer')
.card.text-center
.card-header
| Featured
.card-body
h5.card-title Special title treatment
p.card-text With supporting text below as a natural lead-in to additional content.
a.btn.btn-primary(href='#') Go somewhere
.card-footer.text-body-secondary
| 2 days ago
.card.mb-4
.card-header
strong Card
span.small.ms-1 Sizing - Using grid markup
.card-body
p.text-body-secondary.small Using the grid, wrap cards in columns and rows as needed.
+example('https://coreui.io/bootstrap/docs/components/card/#using-grid-markup')
.row
.col-sm-6
.card
.card-body
h5.card-title Special title treatment
p.card-text With supporting text below as a natural lead-in to additional content.
a.btn.btn-primary(href='#') Go somewhere
.col-sm-6
.card
.card-body
h5.card-title Special title treatment
p.card-text With supporting text below as a natural lead-in to additional content.
a.btn.btn-primary(href='#') Go somewhere
.card.mb-4
.card-header
strong Card
span.small.ms-1 Sizing - Using utilities
.card-body
p.text-body-secondary.small
| Use some of
a(href='https://coreui.io/bootstrap/docs/utilities/sizing/') available sizing utilities
| to rapidly set a card’s width.
+example('https://coreui.io/bootstrap/docs/components/card/#using-utilities')
.card.w-75.mb-3
.card-body
h5.card-title Card title
p.card-text With supporting text below as a natural lead-in to additional content.
a.btn.btn-primary(href='#') Button
.card.w-50
.card-body
h5.card-title Card title
p.card-text With supporting text below as a natural lead-in to additional content.
a.btn.btn-primary(href='#') Button
.card.mb-4
.card-header
strong Card
span.small.ms-1 Sizing - Using custom CSS
.card-body
p.text-body-secondary.small Use custom CSS in your stylesheets or as inline styles to set a width.
+example('https://coreui.io/bootstrap/docs/components/card/#using-custom-css')
.card(style='width: 18rem;')
.card-body
h5.card-title Special title treatment
p.card-text With supporting text below as a natural lead-in to additional content.
a.btn.btn-primary(href='#') Go somewhere
.card.mb-4
.card-header
strong Card
span.small.ms-1 Text alignment
.card-body
p.text-body-secondary.small
| You can instantly change the text arrangement of any card—in its whole or specific parts—with
a(href='https://coreui.io/bootstrap/docs/utilities/text/#text-alignment') text align classes
| .
+example('https://coreui.io/bootstrap/docs/components/card/#text-alignment')
.card.mb-3(style='width: 18rem;')
.card-body
h5.card-title Special title treatment
p.card-text With supporting text below as a natural lead-in to additional content.
a.btn.btn-primary(href='#') Go somewhere
.card.mb-3.text-center(style='width: 18rem;')
.card-body
h5.card-title Special title treatment
p.card-text With supporting text below as a natural lead-in to additional content.
a.btn.btn-primary(href='#') Go somewhere
.card.mb-3.text-end(style='width: 18rem;')
.card-body
h5.card-title Special title treatment
p.card-text With supporting text below as a natural lead-in to additional content.
a.btn.btn-primary(href='#') Go somewhere
.card.mb-4
.card-header
strong Card
span.small.ms-1 Navigation
.card-body
p.text-body-secondary.small
| Add some navigation to a card’s header (or block) with Bootstrap’s
a(href='https://coreui.io/bootstrap/docs/components/navs-tabs/') nav components
| .
+example('https://coreui.io/bootstrap/docs/components/card/#navigation')
.card.text-center
.card-header
ul.nav.nav-tabs.card-header-tabs
li.nav-item
a.nav-link.active(aria-current='true' href='#') Active
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
.card-body
h5.card-title Special title treatment
p.card-text With supporting text below as a natural lead-in to additional content.
a.btn.btn-primary(href='#') Go somewhere
+example('https://coreui.io/bootstrap/docs/components/card/#navigation')
.card.text-center
.card-header
ul.nav.nav-pills.card-header-pills
li.nav-item
a.nav-link.active(href='#') Active
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
.card-body
h5.card-title Special title treatment
p.card-text With supporting text below as a natural lead-in to additional content.
a.btn.btn-primary(href='#') Go somewhere
.card.mb-4
.card-header
strong Card
span.small.ms-1 Image caps
.card-body
p.text-body-secondary.small
| Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
+example('https://coreui.io/bootstrap/docs/components/card/#image-caps')
.row
.col-md-6
.card.mb-3
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
p.card-text
small.text-body-secondary Last updated 3 mins ago
.col-md-6
.card
.card-body
h5.card-title Card title
p.card-text
| This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
p.card-text
small.text-body-secondary Last updated 3 mins ago
img.card-img-bottom(src='assets/img/full.jpg' alt='')
.card.mb-4
.card-header
strong Card
span.small.ms-1 Image overlays
.card-body
p.text-body-secondary.small
| Adapt an image into a background and overlay your text. Depending on the image, you may need additional styles or utilities.
+example('https://coreui.io/bootstrap/docs/components/card/#image-overlays')
.card.bg-dark.text-white
img.card-img(src='assets/img/full.jpg' alt='')
.card-img-overlay
h5.card-title Card title
p.card-text
| This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
p.card-text Last updated 3 mins ago
.card.mb-4
.card-header
strong Card
span.small.ms-1 Horizontal
.card-body
p.text-body-secondary.small
| Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with
code .g-0
| and use
code .col-md-*
| classes to make the card horizontal at the
code md
| breakpoint. Further adjustments may be needed depending on your card content.
+example('https://coreui.io/bootstrap/docs/components/card/#horizontal')
.card
.row.g-0
.col-md-4
img.card-img(src='assets/img/full.jpg' alt='')
.col-md-8
.card-body
h5.card-title Card title
p.card-text
| This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
p.card-text
small.text-body-secondary Last updated 3 mins ago
.card.mb-4
.card-header
strong Card
span.small.ms-1 Card styles - Background and color
.card-body
p.text-body-secondary.small
| Cards include various options for customizing their backgrounds, borders, and color.
| Use
a(href='https://coreui.io/bootstrap/docs/utilities/colors/') text color
| and
a(href='https://coreui.io/bootstrap/docs/utilities/background/') background utilities
| to change the appearance of a card.
+example('https://coreui.io/bootstrap/docs/components/card/#background-and-color')
.row
.col-xl-4
.card.text-white.bg-primary.mb-3
.card-header Header
.card-body
h5.card-title Primary card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.text-white.bg-secondary.mb-3
.card-header Header
.card-body
h5.card-title Secondary card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.text-white.bg-success.mb-3
.card-header Header
.card-body
h5.card-title Success card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.text-white.bg-danger.mb-3
.card-header Header
.card-body
h5.card-title Danger card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.text-white.bg-warning.mb-3
.card-header Header
.card-body
h5.card-title Warning card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.text-white.bg-info.mb-3
.card-header Header
.card-body
h5.card-title Info card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.text-dark.bg-light.mb-3
.card-header Header
.card-body
h5.card-title Light card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.text-white.bg-dark.mb-3
.card-header Header
.card-body
h5.card-title Dark card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.card.mb-4
.card-header
strong Card
span.small.ms-1 Card styles - Border
.card-body
p.text-body-secondary.small
| Use
a(href='https://coreui.io/bootstrap/docs/utilities/borders/') border utilities
| to change just the
code border-color
| of a card. Note that you can put
code .text-{color}
| classes on the parent
code .card
| or a subset of the card’s contents as shown below.
+example('https://coreui.io/bootstrap/docs/components/card/#border')
.row
.col-xl-4
.card.border-primary.mb-3
.card-header Header
.card-body.text-primary
h5.card-title Primary card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.border-secondary.mb-3
.card-header Header
.card-body.text-body-secondary
h5.card-title Secondary card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.border-success.mb-3
.card-header Header
.card-body.text-success
h5.card-title Success card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.border-danger.mb-3
.card-header Header
.card-body.text-danger
h5.card-title Danger card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.border-warning.mb-3
.card-header Header
.card-body.text-warning
h5.card-title Warning card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.border-info.mb-3
.card-header Header
.card-body.text-info
h5.card-title Info card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.border-light.mb-3
.card-header Header
.card-body
h5.card-title Light card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.border-dark.mb-3
.card-header Header
.card-body.text-dark
h5.card-title Dark card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.card.mb-4
.card-header
strong Card
span.small.ms-1 Top border
.card-body
p.text-body-secondary.small
| Use
a(href='https://coreui.io/bootstrap/docs/utilities/borders/') border utilities
| to change just the
code border-top-color
| of a card. Note that you can put
code .text-{color}
| classes on the parent
code .card
| or a subset of the card’s contents as shown below.
+example('https://coreui.io/bootstrap/docs/components/card/#top-border')
.row
.col-xl-4
.card.border-top-primary.border-top-3.mb-3
.card-header Header
.card-body.text-primary
h5.card-title Primary card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.border-top-secondary.border-top-3.mb-3
.card-header Header
.card-body.text-body-secondary
h5.card-title Secondary card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.border-top-success.border-top-3.mb-3
.card-header Header
.card-body.text-success
h5.card-title Success card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.border-top-danger.border-top-3.mb-3
.card-header Header
.card-body.text-danger
h5.card-title Danger card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.border-top-warning.border-top-3.mb-3
.card-header Header
.card-body.text-warning
h5.card-title Warning card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.border-top-info.border-top-3.mb-3
.card-header Header
.card-body.text-info
h5.card-title Info card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.border-top-light.border-top-3.mb-3
.card-header Header
.card-body
h5.card-title Light card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.col-xl-4
.card.border-top-dark.border-top-3.mb-3
.card-header Header
.card-body.text-dark
h5.card-title Dark card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.card.mb-4
.card-header
strong Card
span.small.ms-1 Mixins utilities
.card-body
p.text-body-secondary.small
| You are able to adjust the borders on the card elements as needed, and even exclude their
code background-color
| with
code .bg-transparent
| .
+example('https://coreui.io/bootstrap/docs/components/card/#mixins-utilities')
.card.border-success.mb-3(style='max-width: 18rem;')
.card-header.bg-transparent.border-success Header
.card-body.text-success
h5.card-title Success card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
.card-footer.bg-transparent.border-success Footer
.card.mb-4
.card-header
strong Card
span.small.ms-1 Card groups
.card-body
p.text-body-secondary.small
| Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use
code display: flex;
| to become attached with uniform dimensions starting at the
code sm
| breakpoint.
+example()
.card-group
.card
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
p.card-text
small.text-body-secondary Last updated 3 mins ago
.card
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text This card has supporting text below as a natural lead-in to additional content.
p.card-text
small.text-body-secondary Last updated 3 mins ago
.card
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
p.card-text
small.text-body-secondary Last updated 3 mins ago
p.text-body-secondary.small When using card groups with footers, their content will automatically line up.
+example('https://coreui.io/bootstrap/docs/components/card/#card-groups')
.card-group
.card
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
.card-footer
small.text-body-secondary Last updated 3 mins ago
.card
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text This card has supporting text below as a natural lead-in to additional content.
.card-footer
small.text-body-secondary Last updated 3 mins ago
.card
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
.card-footer
small.text-body-secondary Last updated 3 mins ago
.card.mb-4
.card-header
strong Card
span.small.ms-1 Grid cards
.card-body
p.text-body-secondary.small
| Use the Bootstrap grid system and its
a(href='https://coreui.io/bootstrap/docs/layout/grid/#row-columns')
code .row-cols
| classes
| to control how many grid columns (wrapped around your cards) you show per row. For example, here’s
code .row-cols-1
| laying out the cards on one column, and
code .row-cols-md-2
| splitting four cards to equal width across multiple rows, from the medium breakpoint up.
+example('https://coreui.io/bootstrap/docs/components/card/#grid-cards')
.row.row-cols-1.row-cols-md-2.g-4
.col
.card
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
.col
.card
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
.col
.card
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a longer card with supporting text below as a natural lead-in to additional content.
.col
.card
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
p.text-body-secondary.small
| Change it to
code .row-cols-3
| and you’ll see the fourth card wrap.
+example('https://coreui.io/bootstrap/docs/components/card/#grid-cards')
.row.row-cols-1.row-cols-md-3.g-4
.col
.card
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
.col
.card
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
.col
.card
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a longer card with supporting text below as a natural lead-in to additional content.
.col
.card
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
p.text-body-secondary.small
| When you need equal height, add
code .h-100
| to the cards. If you want equal heights by default, you can set
code $card-height: 100%
| in Sass.
+example('https://coreui.io/bootstrap/docs/components/card/#grid-cards')
.row.row-cols-1.row-cols-md-3.g-4
.col
.card.h-100
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
.col
.card.h-100
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text This is a short card.
.col
.card.h-100
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a longer card with supporting text below as a natural lead-in to additional content.
.col
.card.h-100
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
p.text-body-secondary.small Just like with card groups, card footers will automatically line up.
+example('https://coreui.io/bootstrap/docs/components/card/#grid-cards')
.row.row-cols-1.row-cols-md-3.g-4
.col
.card.h-100
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
.card-footer
small.text-body-secondary Last updated 3 mins ago
.col
.card.h-100
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text This card has supporting text below as a natural lead-in to additional content.
.card-footer
small.text-body-secondary Last updated 3 mins ago
.col
.card.h-100
img.card-img-top(src='assets/img/full.jpg' alt='')
.card-body
h5.card-title Card title
p.card-text
| This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
.card-footer
small.text-body-secondary Last updated 3 mins ago
================================================
FILE: src/pug/views/base/carousel.pug
================================================
extends ../../_layout/default.pug
block canonical
link(rel='canonical' href='https://coreui.io/bootstrap/docs/components/carousel/')
block breadcrumb
+breadcrumb(
[
{ href: '#', label: 'Home'},
{ label: 'Components'},
{ label: 'Base'},
'Carousel'
],
)
block view
+docs-components('https://coreui.io/bootstrap/docs/components/carousel/')
.card.mb-4
.card-header
strong Carousel
span.small.ms-1 Slides only
.card-body
p.text-body-secondary.small
| Here’s a carousel with slides. Note the appearance of the
code .d-block
| also,
code .w-100
| on carousel images to override browser default image alignment.
+example('https://coreui.io/bootstrap/docs/components/carousel/#slides-only')
#carouselExampleSlidesOnly.carousel.slide(data-coreui-ride='carousel')
.carousel-inner
.carousel-item
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#777')
text(x='50%' y='50%' fill='#555' dy='.3em') First slide
.carousel-item
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#666')
text(x='50%' y='50%' fill='#444' dy='.3em') Second slide
.carousel-item.active
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#555')
text(x='50%' y='50%' fill='#333' dy='.3em') Third slide
.card.mb-4
.card-header
strong Carousel
span.small.ms-1 With controls
.card-body
p.text-body-secondary.small
| Adding in the previous and next controls. We recommend using
code
= '<button>'
| elements, but you can also use
code
= '<a>'
| elements with
code role="button"
| .
+example('https://coreui.io/bootstrap/docs/components/carousel/#with-controls')
#carouselExampleControls.carousel.slide(data-coreui-ride='carousel')
.carousel-inner
.carousel-item
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#777')
text(x='50%' y='50%' fill='#555' dy='.3em') First slide
.carousel-item
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#666')
text(x='50%' y='50%' fill='#444' dy='.3em') Second slide
.carousel-item.active
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#555')
text(x='50%' y='50%' fill='#333' dy='.3em') Third slide
button.carousel-control-prev(type='button' data-coreui-target='#carouselExampleControls' data-coreui-slide='prev')
span.carousel-control-prev-icon(aria-hidden='true')
span.visually-hidden Previous
button.carousel-control-next(type='button' data-coreui-target='#carouselExampleControls' data-coreui-slide='next')
span.carousel-control-next-icon(aria-hidden='true')
sp
gitextract_al_e0b_v/
├── .babelrc.js
├── .browserslistrc
├── .cursorrules
├── .editorconfig
├── .gitattributes
├── .github/
│ ├── CONTRIBUTING.md
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ ├── config.yml
│ │ └── feature_request.md
│ ├── ISSUE_TEMPLATE.md
│ ├── SUPPORT.md
│ └── stale.yml
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── .stylelintignore
├── .stylelintrc
├── ARCHITECTURE.md
├── DEVELOPMENT.md
├── LICENSE
├── README.md
├── build/
│ ├── change-version.mjs
│ ├── postcss.config.mjs
│ ├── pug.mjs
│ └── vendors.mjs
├── eslint.config.mjs
├── nodemon.json
├── package.json
└── src/
├── assets/
│ └── favicon/
│ ├── browserconfig.xml
│ └── manifest.json
├── js/
│ ├── charts.js
│ ├── color-modes.js
│ ├── colors.js
│ ├── config.js
│ ├── main.js
│ ├── popovers.js
│ ├── toasts.js
│ ├── tooltips.js
│ └── widgets.js
├── pug/
│ ├── _layout/
│ │ ├── default.pug
│ │ └── pages.pug
│ ├── _mixins/
│ │ ├── breadcrumb.pug
│ │ ├── callout-custom.pug
│ │ ├── callout.pug
│ │ ├── docs-components.pug
│ │ └── example.pug
│ ├── _partials/
│ │ ├── banner.pug
│ │ ├── docs-icons.pug
│ │ ├── footer.pug
│ │ ├── head.pug
│ │ ├── header.pug
│ │ ├── scripts.pug
│ │ └── sidebar.pug
│ └── views/
│ ├── 404.pug
│ ├── 500.pug
│ ├── base/
│ │ ├── accordion.pug
│ │ ├── breadcrumb.pug
│ │ ├── cards.pug
│ │ ├── carousel.pug
│ │ ├── collapse.pug
│ │ ├── list-group.pug
│ │ ├── navs-tabs.pug
│ │ ├── pagination.pug
│ │ ├── placeholders.pug
│ │ ├── popovers.pug
│ │ ├── progress.pug
│ │ ├── spinners.pug
│ │ ├── tables.pug
│ │ └── tooltips.pug
│ ├── blank.pug
│ ├── buttons/
│ │ ├── button-group.pug
│ │ ├── buttons.pug
│ │ └── dropdowns.pug
│ ├── charts.pug
│ ├── colors.pug
│ ├── forms/
│ │ ├── checks-radios.pug
│ │ ├── floating-labels.pug
│ │ ├── form-control.pug
│ │ ├── input-group.pug
│ │ ├── layout.pug
│ │ ├── range.pug
│ │ ├── select.pug
│ │ └── validation.pug
│ ├── icons/
│ │ ├── coreui-icons-brand.pug
│ │ ├── coreui-icons-flag.pug
│ │ └── coreui-icons-free.pug
│ ├── index.pug
│ ├── login.pug
│ ├── notifications/
│ │ ├── alerts.pug
│ │ ├── badge.pug
│ │ ├── modals.pug
│ │ └── toasts.pug
│ ├── register.pug
│ ├── typography.pug
│ └── widgets.pug
├── scss/
│ ├── examples.scss
│ ├── style.scss
│ └── vendors/
│ └── simplebar.scss
└── views/
├── 404.html
├── 500.html
├── base/
│ ├── accordion.html
│ ├── breadcrumb.html
│ ├── cards.html
│ ├── carousel.html
│ ├── collapse.html
│ ├── list-group.html
│ ├── navs-tabs.html
│ ├── pagination.html
│ ├── placeholders.html
│ ├── popovers.html
│ ├── progress.html
│ ├── spinners.html
│ ├── tables.html
│ └── tooltips.html
├── blank.html
├── buttons/
│ ├── button-group.html
│ ├── buttons.html
│ └── dropdowns.html
├── charts.html
├── colors.html
├── forms/
│ ├── checks-radios.html
│ ├── floating-labels.html
│ ├── form-control.html
│ ├── input-group.html
│ ├── layout.html
│ ├── range.html
│ ├── select.html
│ └── validation.html
├── icons/
│ ├── coreui-icons-brand.html
│ ├── coreui-icons-flag.html
│ └── coreui-icons-free.html
├── index.html
├── login.html
├── notifications/
│ ├── alerts.html
│ ├── badge.html
│ ├── modals.html
│ └── toasts.html
├── register.html
├── typography.html
└── widgets.html
SYMBOL INDEX (14 symbols across 3 files)
FILE: build/change-version.mjs
constant VERBOSE (line 14) | const VERBOSE = process.argv.includes('--verbose')
constant DRY_RUN (line 15) | const DRY_RUN = process.argv.includes('--dry') || process.argv.includes(...
constant GLOB (line 18) | const GLOB = [
constant GLOBBY_OPTIONS (line 21) | const GLOBBY_OPTIONS = {
constant EXCLUDED_FILES (line 25) | const EXCLUDED_FILES = [
function regExpQuote (line 30) | function regExpQuote(string) {
function regExpQuoteReplacement (line 34) | function regExpQuoteReplacement(string) {
function replaceRecursively (line 38) | async function replaceRecursively(file, oldVersion, newVersion) {
function main (line 60) | async function main(args) {
FILE: build/pug.mjs
constant GLOB (line 12) | const GLOB = [
constant SRC (line 16) | const SRC = 'src/pug/views/'
constant GLOBBY_OPTIONS (line 18) | const GLOBBY_OPTIONS = {
function main (line 64) | async function main() {
FILE: build/vendors.mjs
constant DIST (line 7) | const DIST = 'dist/'
Condensed preview — 141 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (3,006K chars).
[
{
"path": ".babelrc.js",
"chars": 162,
"preview": "module.exports = {\n presets: [\n [\n '@babel/preset-env',\n {\n loose: true,\n bugfixes: true,\n "
},
{
"path": ".browserslistrc",
"chars": 175,
"preview": "# https://github.com/browserslist/browserslist#readme\n\n>= 0.5%\nlast 2 major versions\nnot dead\nChrome >= 60\nFirefox >= 60"
},
{
"path": ".cursorrules",
"chars": 5801,
"preview": "# CoreUI Free Bootstrap Admin Template - AI Context\n\n## Project Overview\nThis is a Bootstrap 5 admin dashboard template "
},
{
"path": ".editorconfig",
"chars": 304,
"preview": "# Editor configuration, see http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nin"
},
{
"path": ".gitattributes",
"chars": 101,
"preview": "# Enforce Unix newlines\n* text=auto eol=lf\n\n# Don't diff or textually merge source maps\n*.map binary\n"
},
{
"path": ".github/CONTRIBUTING.md",
"chars": 7919,
"preview": "# Contributing to CoreUI\n\nLooking to contribute something to CoreUI? **Here's how you can help.**\n\nPlease take a moment "
},
{
"path": ".github/FUNDING.yml",
"chars": 125,
"preview": "# These are supported funding model platforms\n\ncustom: \"https://coreui.io/pricing?support=bootstrap\"\nopen_collective: co"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 825,
"preview": "---\nname: Bug report\nabout: Tell us about a bug you may have identified in CoreUI.\ntitle: ''\nlabels: ''\nassignees: ''\n\n-"
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"chars": 151,
"preview": "contact_links:\n - name: Ask a question\n url: https://community.coreui.io/\n about: Ask and discuss questions with "
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 614,
"preview": "---\nname: Feature request\nabout: Suggest an idea for a new feature in CoreUI.\ntitle: ''\nlabels: feature\nassignees: ''\n\n-"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 993,
"preview": "Before opening an issue:\n\n- [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-bootstrap-admi"
},
{
"path": ".github/SUPPORT.md",
"chars": 332,
"preview": "### Bug reports\n\nSee the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports.\n\n### How-to\n\nFor general tr"
},
{
"path": ".github/stale.yml",
"chars": 685,
"preview": "# Number of days of inactivity before an issue becomes stale\ndaysUntilStale: 360\n# Number of days of inactivity before a"
},
{
"path": ".gitignore",
"chars": 443,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\n\n# eslint cache\n.eslintcache\n\n# Numero"
},
{
"path": ".prettierignore",
"chars": 56,
"preview": "\n# Ignore artifacts:\nbuild\ncoverage\n\n#ignore source\nsrc\n"
},
{
"path": ".prettierrc.json",
"chars": 100,
"preview": "{\n \"overrides\": [\n {\n \"files\": \"*.html\",\n \"options\": { \"parser\": \"html\" }\n }\n ]\n}\n"
},
{
"path": ".stylelintignore",
"chars": 33,
"preview": "**/*.min.css\n**/dist/\n**/vendor/\n"
},
{
"path": ".stylelintrc",
"chars": 873,
"preview": "{\n \"extends\": [\n \"stylelint-config-twbs-bootstrap\"\n ],\n \"reportInvalidScopeDisables\": true,\n \"reportNeedlessDisab"
},
{
"path": "ARCHITECTURE.md",
"chars": 15488,
"preview": "# Architecture Documentation\n\n## Project Purpose\n\nCoreUI Free Bootstrap Admin Template is a professional admin dashboard"
},
{
"path": "DEVELOPMENT.md",
"chars": 13467,
"preview": "# Development Guide\n\nThis guide provides practical information for developers working on the CoreUI Free Bootstrap Admin"
},
{
"path": "LICENSE",
"chars": 1096,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2025 creativeLabs Łukasz Holeczek.\n\nPermission is hereby granted, free of charge, t"
},
{
"path": "README.md",
"chars": 13950,
"preview": "# CoreUI Free Bootstrap Admin Template — Built for AI-Assisted Development [![Tweet](https://img.shields.io/twitter/url/"
},
{
"path": "build/change-version.mjs",
"chars": 2200,
"preview": "#!/usr/bin/env node\n\n/*!\n * Script to update version number references in the project.\n * Copyright 2017-2022 The Bootst"
},
{
"path": "build/postcss.config.mjs",
"chars": 308,
"preview": "const mapConfig = {\n inline: false,\n annotation: true,\n sourcesContent: true\n}\n\nexport default () => {\n return {\n "
},
{
"path": "build/pug.mjs",
"chars": 1672,
"preview": "#!/usr/bin/env node\n\nimport fs from 'node:fs/promises'\nimport path from 'node:path'\nimport { fileURLToPath } from 'node:"
},
{
"path": "build/vendors.mjs",
"chars": 619,
"preview": "#!/usr/bin/env node\n\nimport fs from 'node:fs'\nimport path from 'node:path'\nimport injectVendors from '@coreui/vendors-in"
},
{
"path": "eslint.config.mjs",
"chars": 3815,
"preview": "import xo from 'eslint-config-xo'\nimport xoBrowser from 'eslint-config-xo/browser'\nimport eslintPluginImport from 'eslin"
},
{
"path": "nodemon.json",
"chars": 89,
"preview": "{\n \"ignoreRoot\": [\".git\"],\n \"ignore\": [\n \"build\",\n \"dist\"\n ],\n \"delay\": 2500\n}\n"
},
{
"path": "package.json",
"chars": 5151,
"preview": "{\n \"name\": \"@coreui/coreui-free-bootstrap-admin-template\",\n \"version\": \"5.3.0\",\n \"description\": \"Free Bootstrap Admin"
},
{
"path": "src/assets/favicon/browserconfig.xml",
"chars": 281,
"preview": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<browserconfig><msapplication><tile><square70x70logo src=\"/ms-icon-70x70.png\"/><s"
},
{
"path": "src/assets/favicon/manifest.json",
"chars": 808,
"preview": "{\n \"name\": \"App\",\n \"icons\": [\n {\n \"src\": \"/android-icon-36x36.png\",\n \"sizes\": \"36x36\",\n \"type\": \"ima"
},
{
"path": "src/js/charts.js",
"chars": 5088,
"preview": "/* global Chart */\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI Boostrap"
},
{
"path": "src/js/color-modes.js",
"chars": 3524,
"preview": "/*!\n* Color mode toggler for CoreUI's docs (https://coreui.io/)\n* Copyright (c) 2025 creativeLabs Łukasz Holeczek\n* Lice"
},
{
"path": "src/js/colors.js",
"chars": 1389,
"preview": "/* global coreui */\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI Boostra"
},
{
"path": "src/js/config.js",
"chars": 1105,
"preview": "/**\n * --------------------------------------------------------------------------\n * CoreUI Boostrap Admin Template conf"
},
{
"path": "src/js/main.js",
"chars": 8915,
"preview": "/* global Chart, coreui */\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI "
},
{
"path": "src/js/popovers.js",
"chars": 938,
"preview": "/* global coreui */\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI Boostra"
},
{
"path": "src/js/toasts.js",
"chars": 957,
"preview": "/* global coreui */\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI Boostra"
},
{
"path": "src/js/tooltips.js",
"chars": 945,
"preview": "/* global coreui */\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI Boostra"
},
{
"path": "src/js/widgets.js",
"chars": 12942,
"preview": "/* global Chart, coreui */\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI "
},
{
"path": "src/pug/_layout/default.pug",
"chars": 624,
"preview": "- var count = 1000\ndoctype html\ninclude ../_partials/banner.pug\ninclude ../_mixins/breadcrumb.pug\ninclude ../_mixins/cal"
},
{
"path": "src/pug/_layout/pages.pug",
"chars": 288,
"preview": "- var page = true\ndoctype html\ninclude ../_partials/banner.pug\n\nhtml(lang='en')\n head\n base(href=base)\n include ."
},
{
"path": "src/pug/_mixins/breadcrumb.pug",
"chars": 393,
"preview": "mixin breadcrumb(items)\n nav(aria-label=\"breadcrumb\")\n ol.breadcrumb.my-0\n each item, index in items\n - "
},
{
"path": "src/pug/_mixins/callout-custom.pug",
"chars": 63,
"preview": "mixin callout-custom\n .callout.callout-info.bg-body\n block\n"
},
{
"path": "src/pug/_mixins/callout.pug",
"chars": 384,
"preview": "mixin callout(name, href)\n .callout.callout-info.bg-white\n | CoreUI #{name} has been created as an extension of Boot"
},
{
"path": "src/pug/_mixins/docs-components.pug",
"chars": 912,
"preview": "mixin docs-components(href)\n .bg-primary.bg-opacity-10.border.border-2.border-primary.rounded.mb-4\n .row.d-flex.alig"
},
{
"path": "src/pug/_mixins/example.pug",
"chars": 706,
"preview": "mixin example(url, classNames)\n .example\n ul.nav.nav-underline-border(role=\"tablist\")\n li.nav-item\n a.na"
},
{
"path": "src/pug/_partials/banner.pug",
"chars": 303,
"preview": "//\n * CoreUI - Free Bootstrap Admin Template\n * @version v5.3.0\n * @link https://coreui.io/product/free-bootstrap-"
},
{
"path": "src/pug/_partials/docs-icons.pug",
"chars": 835,
"preview": ".bg-warning.bg-opacity-10.border.border-2.border-warning.rounded.mb-4\n .row.d-flex.align-items-center.p-3.px-xl-4.flex-"
},
{
"path": "src/pug/_partials/footer.pug",
"chars": 300,
"preview": "footer.footer.px-4\n div\n a(href='https://coreui.io') CoreUI \n a(href='https://coreui.io/product/free-bootstrap-ad"
},
{
"path": "src/pug/_partials/head.pug",
"chars": 2291,
"preview": "meta(charset='utf-8')\nmeta(http-equiv='X-UA-Compatible', content='IE=edge')\nmeta(name='viewport', content='width=device-"
},
{
"path": "src/pug/_partials/header.pug",
"chars": 5206,
"preview": "header.header.header-sticky.p-0.mb-4\n .container-fluid.border-bottom.px-4\n button.header-toggler(type=\"button\" oncli"
},
{
"path": "src/pug/_partials/scripts.pug",
"chars": 426,
"preview": "// CoreUI and necessary plugins\nscript(src='node_modules/@coreui/coreui/dist/js/coreui.bundle.min.js')\nscript(src='node_"
},
{
"path": "src/pug/_partials/sidebar.pug",
"chars": 13006,
"preview": ".sidebar.sidebar-dark.sidebar-fixed.border-end#sidebar\n .sidebar-header.border-bottom\n .sidebar-brand\n svg.side"
},
{
"path": "src/pug/views/404.pug",
"chars": 625,
"preview": "extends ../_layout/pages.pug\n\nblock view\n .container\n .row.justify-content-center\n .col-md-6\n .clearfix\n"
},
{
"path": "src/pug/views/500.pug",
"chars": 647,
"preview": "extends ../_layout/pages.pug\n\nblock view\n .container\n .row.justify-content-center\n .col-md-6\n .clearfix\n"
},
{
"path": "src/pug/views/base/accordion.pug",
"chars": 7794,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/base/breadcrumb.pug",
"chars": 2041,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/base/cards.pug",
"chars": 36445,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/base/carousel.pug",
"chars": 16442,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/base/collapse.pug",
"chars": 4689,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/base/list-group.pug",
"chars": 18323,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/base/navs-tabs.pug",
"chars": 28131,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/base/pagination.pug",
"chars": 8185,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/base/placeholders.pug",
"chars": 5772,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/base/popovers.pug",
"chars": 4377,
"preview": "extends ../../_layout/default.pug\n\nblock scripts\n // Plugins and scripts required by this view\n script(src='js/popover"
},
{
"path": "src/pug/views/base/progress.pug",
"chars": 7521,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/base/spinners.pug",
"chars": 9169,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/base/tables.pug",
"chars": 22569,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/content"
},
{
"path": "src/pug/views/base/tooltips.pug",
"chars": 3635,
"preview": "extends ../../_layout/default.pug\n\nblock scripts\n // Plugins and scripts required by this view\n script(src='js/tooltip"
},
{
"path": "src/pug/views/blank.pug",
"chars": 94,
"preview": "extends ../_layout/default.pug\n\nblock breadcrumb\n +breadcrumb(['Home'], 'Blank')\n\nblock view\n"
},
{
"path": "src/pug/views/buttons/button-group.pug",
"chars": 13546,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/buttons/buttons.pug",
"chars": 22077,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/buttons/dropdowns.pug",
"chars": 35035,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/charts.pug",
"chars": 1831,
"preview": "extends ../_layout/default.pug\n\nblock styles\n link(href='node_modules/@coreui/chartjs/dist/css/coreui-chartjs.css', rel"
},
{
"path": "src/pug/views/colors.pug",
"chars": 1672,
"preview": "extends ../_layout/default.pug\n\nblock scripts\n if !starter\n // Plugins and scripts required by this view\n script("
},
{
"path": "src/pug/views/forms/checks-radios.pug",
"chars": 14103,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/forms/c"
},
{
"path": "src/pug/views/forms/floating-labels.pug",
"chars": 6089,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/forms/f"
},
{
"path": "src/pug/views/forms/form-control.pug",
"chars": 7454,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/forms/f"
},
{
"path": "src/pug/views/forms/input-group.pug",
"chars": 15277,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/forms/i"
},
{
"path": "src/pug/views/forms/layout.pug",
"chars": 14796,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/forms/l"
},
{
"path": "src/pug/views/forms/range.pug",
"chars": 2757,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/forms/r"
},
{
"path": "src/pug/views/forms/select.pug",
"chars": 3603,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/forms/s"
},
{
"path": "src/pug/views/forms/validation.pug",
"chars": 16001,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/forms/v"
},
{
"path": "src/pug/views/icons/coreui-icons-brand.pug",
"chars": 10629,
"preview": "extends ../../_layout/default.pug\n\nblock styles\n link(href='node_modules/@coreui/icons/css/brand.min.css', rel='stylesh"
},
{
"path": "src/pug/views/icons/coreui-icons-flag.pug",
"chars": 1838,
"preview": "extends ../../_layout/default.pug\n\nblock styles\n link(href='node_modules/@coreui/icons/css/flag.min.css', rel='styleshe"
},
{
"path": "src/pug/views/icons/coreui-icons-free.pug",
"chars": 8164,
"preview": "extends ../../_layout/default.pug\n\nblock styles\n link(href='node_modules/@coreui/icons/css/free.min.css', rel='styleshe"
},
{
"path": "src/pug/views/index.pug",
"chars": 29887,
"preview": "extends ../_layout/default.pug\n\nblock styles\n link(href='node_modules/@coreui/chartjs/dist/css/coreui-chartjs.css', rel"
},
{
"path": "src/pug/views/login.pug",
"chars": 1468,
"preview": "extends ../_layout/pages.pug\n\nblock view\n .container\n .row.justify-content-center\n .col-lg-8\n .card-grou"
},
{
"path": "src/pug/views/notifications/alerts.pug",
"chars": 5064,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/notifications/badge.pug",
"chars": 3768,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/notifications/modals.pug",
"chars": 36442,
"preview": "extends ../../_layout/default.pug\n\nblock scripts\n // Plugins and scripts required by this view\n script(src='js/popover"
},
{
"path": "src/pug/views/notifications/toasts.pug",
"chars": 7869,
"preview": "extends ../../_layout/default.pug\n\nblock canonical\n link(rel='canonical' href='https://coreui.io/bootstrap/docs/compone"
},
{
"path": "src/pug/views/register.pug",
"chars": 1440,
"preview": "extends ../_layout/pages.pug\n\nblock view\n .container\n .row.justify-content-center\n .col-md-6\n .card.mb-4"
},
{
"path": "src/pug/views/typography.pug",
"chars": 4850,
"preview": "extends ../_layout/default.pug\n\nblock breadcrumb\n +breadcrumb(\n [\n { href: '#', label: 'Home'},\n { label"
},
{
"path": "src/pug/views/widgets.pug",
"chars": 34151,
"preview": "extends ../_layout/default.pug\n\nblock styles\n link(href='node_modules/@coreui/chartjs/dist/css/coreui-chartjs.css', rel"
},
{
"path": "src/scss/examples.scss",
"chars": 1948,
"preview": "/* stylelint-disable scss/selector-no-redundant-nesting-selector */\n@use \"@coreui/coreui/scss/variables\" as * with (\n $"
},
{
"path": "src/scss/style.scss",
"chars": 1293,
"preview": "@use \"@coreui/coreui/scss/coreui\" as * with (\n $enable-deprecation-messages: false\n);\n@use \"vendors/simplebar\";\n\nbody {"
},
{
"path": "src/scss/vendors/simplebar.scss",
"chars": 86,
"preview": ".simplebar-content {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n}\n"
},
{
"path": "src/views/404.html",
"chars": 4317,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/500.html",
"chars": 4339,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/base/accordion.html",
"chars": 38683,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/base/breadcrumb.html",
"chars": 31055,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/base/cards.html",
"chars": 108355,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/base/carousel.html",
"chars": 55032,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/base/collapse.html",
"chars": 35733,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/base/list-group.html",
"chars": 62213,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/base/navs-tabs.html",
"chars": 79040,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/base/pagination.html",
"chars": 45516,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/base/placeholders.html",
"chars": 40371,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/base/popovers.html",
"chars": 36395,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/base/progress.html",
"chars": 45589,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/base/spinners.html",
"chars": 51654,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/base/tables.html",
"chars": 87184,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/base/tooltips.html",
"chars": 34430,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/blank.html",
"chars": 26367,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/buttons/button-group.html",
"chars": 58813,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/buttons/buttons.html",
"chars": 71660,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/buttons/dropdowns.html",
"chars": 99270,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/charts.html",
"chars": 35590,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/colors.html",
"chars": 28831,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/forms/checks-radios.html",
"chars": 63707,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/forms/floating-labels.html",
"chars": 41967,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/forms/form-control.html",
"chars": 46667,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/forms/input-group.html",
"chars": 60212,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/forms/layout.html",
"chars": 58879,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/forms/range.html",
"chars": 34837,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/forms/select.html",
"chars": 37204,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/forms/validation.html",
"chars": 54424,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/icons/coreui-icons-brand.html",
"chars": 169765,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/icons/coreui-icons-flag.html",
"chars": 59321,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/icons/coreui-icons-free.html",
"chars": 124060,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/index.html",
"chars": 72552,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/login.html",
"chars": 5562,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/notifications/alerts.html",
"chars": 37441,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/notifications/badge.html",
"chars": 35398,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/notifications/modals.html",
"chars": 86418,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/notifications/toasts.html",
"chars": 44214,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/register.html",
"chars": 5400,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/typography.html",
"chars": 33672,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
},
{
"path": "src/views/widgets.html",
"chars": 92320,
"preview": "<!DOCTYPE html>\n<!--\n* CoreUI - Free Bootstrap Admin Template\n* @version v5.3.0\n* @link https://coreui.io/product/free-b"
}
]
About this extraction
This page contains the full source code of the coreui/coreui-free-bootstrap-admin-template GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 141 files (2.7 MB), approximately 722.4k tokens, and a symbol index with 14 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.