# CoreUI JavaScript documentation

> Open Source UI Components library built on top of Bootstrap 5.

## Getting started

- [Introduction](/bootstrap/docs/getting-started/introduction.md): CoreUI is the fastest way to build a modern dashboard for any platforms, browser, or device. A complete UI Kit that allows you to quickly build eye-catching, high-quality, high-performance responsive applications.
- [Download](/bootstrap/docs/getting-started/download.md): Download CoreUI for Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
- [Contents](/bootstrap/docs/getting-started/contents.md): Discover what's included in CoreUI, including our precompiled and source code flavors.
- [Browsers & devices](/bootstrap/docs/getting-started/browsers-devices.md): Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.
- [JavaScript](/bootstrap/docs/getting-started/javascript.md): Bring CoreUI for Bootstrap to life with our optional JavaScript plugins. Learn about each plugin, our data and programmatic API options, and more.
- [Webpack](/bootstrap/docs/getting-started/webpack.md): The official guide for how to include and bundle CoreUI's CSS and JavaScript in your project using Webpack.
- [Parcel](/bootstrap/docs/getting-started/parcel.md): The official guide for how to include and bundle CoreUI's CSS and JavaScript in your project using Parcel.
- [Vite](/bootstrap/docs/getting-started/vite.md): The official guide for how to include and bundle CoreUI's CSS and JavaScript in your project using Vite.
- [Accessibility](/bootstrap/docs/getting-started/accessibility.md): A brief overview of CoreUI for Bootstrap features and limitations for the creation of accessible content.
- [RFS](/bootstrap/docs/getting-started/rfs.md): CoreUI's resizing engine responsively scales common CSS properties to better utilize available space across viewports and devices.
- [RTL](/bootstrap/docs/getting-started/rtl.md): Learn how to enable support for right-to-left text in CoreUI for Bootstrap across our layout, components, and utilities.

## AI Tools

- [LLMs.txt](/bootstrap/docs/ai-tools/llms-txt.md): LLM-optimized documentation endpoints for CoreUI — llms.txt, llms-full.txt, and a Markdown version of every page.
- [MCP Server](/bootstrap/docs/ai-tools/mcp.md): Bring the CoreUI documentation into your AI coding assistant with the @coreui/docs-mcp Model Context Protocol server.

## Integration guides

- [Laravel](/bootstrap/docs/integration-guides/laravel.md): The official guide for how to include and bundle CoreUI’s CSS and JavaScript in your Laravel project.

## Customize

- [Overview](/bootstrap/docs/customize/overview.md): Learn how to theme, customize, and extend CoreUI for Bootstrap with Sass, a boatload of global options, an expansive color system, and more.
- [Sass](/bootstrap/docs/customize/sass.md): Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
- [Options](/bootstrap/docs/customize/options.md): Quickly customize CoreUI for Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior.
- [Color](/bootstrap/docs/customize/color.md): CoreUI for Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
- [Color modes](/bootstrap/docs/customize/color-modes.md): CoreUI now supports color modes, or themes, as of v5.0.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
- [Components](/bootstrap/docs/customize/components.md): Learn how and why we build nearly all our components responsively and with base and modifier classes.
- [CSS variables](/bootstrap/docs/customize/css-variables.md): Use CoreUI for Bootstrap's CSS custom properties for fast and forward-looking design and development.
- [Optimize](/bootstrap/docs/customize/optimize.md): Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.

## Layout

- [Breakpoints](/bootstrap/docs/layout/breakpoints.md): Breakpoints are the triggers in CoreUI for Bootstrap for how your layout responsive changes across device or viewport sizes.
- [Containers](/bootstrap/docs/layout/containers.md): Containers are a fundamental building block of CoreUI for Bootstrap that contain, pad, and align your content within a given device or viewport.
- [Grid](/bootstrap/docs/layout/grid.md): Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
- [Columns](/bootstrap/docs/layout/columns.md): Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.
- [Gutters](/bootstrap/docs/layout/gutters.md): Gutters are the padding between your columns, used to responsively space and align content in the CoreUI for Bootstrap grid system.
- [Utilities](/bootstrap/docs/layout/utilities.md): For faster mobile-friendly and responsive development, CoreUI for Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.
- [Z-index](/bootstrap/docs/layout/z-index.md): While not a part of CoreUI for Bootstrap's grid system, z-indexes play an important part in how our components overlay and interact with one another.
- [CSS Grid](/bootstrap/docs/layout/css-grid.md): Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.
- [Container queries Grid](/bootstrap/docs/layout/container-queries-grid.md): Build responsive layouts using our container query–based flexbox grid. With a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes, you can create flexible layouts that respond to the size of their container.

## Content

- [Reboot](/bootstrap/docs/content/reboot.md): Reboot, a collection of element-specific CSS changes in a single file, kickstart CoreUI for Bootstrap to provide an elegant, consistent, and simple baseline to build upon.
- [Typography](/bootstrap/docs/content/typography.md): Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
- [Images](/bootstrap/docs/content/images.md): Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.
- [Tables](/bootstrap/docs/content/tables.md): Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
- [Figures](/bootstrap/docs/content/figures.md): Documentation and examples for displaying related images and text with the figure component in Bootstrap.

## Forms

- [Overview](/bootstrap/docs/forms/overview.md): Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
- [Autocomplete](/bootstrap/docs/forms/autocomplete.md): Create intelligent, responsive input fields using the Bootstrap Autocomplete plugin. This component enhances user input with dynamic dropdown suggestions, flexible data providers, and callback support.
- [Checks & radios](/bootstrap/docs/forms/checks-radios.md): Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
- [Chip input](/bootstrap/docs/forms/chip-input.md): Bootstrap Chip Input component for CoreUI — create tag-like multi-value inputs for skills, categories, or recipients with keyboard support, selection, and form integration.
- [Date Picker](/bootstrap/docs/forms/date-picker.md): Bootstrap Date Picker is a customizable, user-friendly, cross-browser calendar tool for Bootstrap forms, supporting localization and validation for accurate date selection.
- [Date Range Picker](/bootstrap/docs/forms/date-range-picker.md): Bootstrap Date Range Picker is a customizable, user-friendly calendar tool for Bootstrap forms, supporting date ranges, localization, and validation for accurate date selection.
- [Floating labels](/bootstrap/docs/forms/floating-labels.md): Create beautifully simple form labels that float over your input fields.
- [Form control](/bootstrap/docs/forms/form-control.md): Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.
- [Input group](/bootstrap/docs/forms/input-group.md): Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
- [Multi Select](/bootstrap/docs/forms/multi-select.md): Customize the native `<select>`s with a powerful Bootstrap Multi-Select component that changes the element's initial appearance and brings some new functionalities.
- [OTP Input](/bootstrap/docs/forms/otp-input.md): Create secure and user-friendly one-time password input fields with automatic navigation, paste support, validation, and customizable options for modern authentication flows.
- [Password Input](/bootstrap/docs/forms/password-input.md): Enhance your password input fields in Bootstrap with custom styles, sizing options, toggle visibility button, and more.
- [Range](/bootstrap/docs/forms/range.md): Use our custom range inputs for consistent cross-browser styling and built-in customization.
- [Range Slider](/bootstrap/docs/forms/range-slider.md): Enhance your forms with our customizable Bootstrap 5 Range Slider component for advanced range selection.
- [Rating](/bootstrap/docs/forms/rating.md): The Rating component allows users to provide feedback on content or services by selecting a rating value. It is customizable, supports various sizes and icons, and can be made interactive or read-only.
- [Select](/bootstrap/docs/forms/select.md): Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
- [Stepper](/bootstrap/docs/forms/stepper.md): Build responsive, accessible multi-step forms and form wizards using CoreUI's Bootstrap 5 Stepper Component. Vertical and horizontal layouts, built-in validation, full customization.
- [Time Picker](/bootstrap/docs/forms/time-picker.md): Bootstrap Time Picker is a customizable and user-friendly tool for selecting times in forms. It supports various locales, sizes, and states to enhance the user experience.
- [Layout](/bootstrap/docs/forms/layout.md): Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
- [Validation](/bootstrap/docs/forms/validation.md): Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

## Components

- [Accordion](/bootstrap/docs/components/accordion.md): Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
- [Alerts](/bootstrap/docs/components/alerts.md): Bootstrap alerts give contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.
- [Avatar](/bootstrap/docs/components/avatar.md): The Avatar component is used to display circular user profile pictures. Avatars can portray people or objects and support images, icons, or letters.
- [Badge](/bootstrap/docs/components/badge.md): Bootstrap badge is small count and labeling components.
- [Breadcrumb](/bootstrap/docs/components/breadcrumb.md): Bootstrap breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
- [Buttons](/bootstrap/docs/components/buttons.md): Bootstrap button component for actions in tables, forms, cards, and more. CoreUI for Bootstrap provides various styles, states, and size. Ready to use and easy to customize.
- [Button group](/bootstrap/docs/components/button-group.md): Bootstrap button group allows to group a series of buttons and power them with JavaScript.
- [Calendar](/bootstrap/docs/components/calendar.md): The Bootstrap Calendar Component is a versatile, customizable tool for creating responsive calendars in Bootstrap, supporting day, month, and year selection, and global locales.
- [Callout](/bootstrap/docs/components/callout.md): Callouts provide presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.
- [Card](/bootstrap/docs/components/card.md): Bootstrap card component provides a flexible and extensible container for displaying content. Bootstrap card is delivered with a bunch of variants and options.
- [Carousel](/bootstrap/docs/components/carousel.md): Bootstrap carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
- [Chip](/bootstrap/docs/components/chip.md): Bootstrap Chip component for CoreUI — build removable tags, selectable labels, and filterable chips with icons, avatars, and full keyboard support.
- [Chip set](/bootstrap/docs/components/chip-set.md): Bootstrap Chip set component for CoreUI — group chips into an accessible, keyboard-navigable container with single or multiple selection.
- [Close button](/bootstrap/docs/components/close-button.md): A generic close button for dismissing content like modals and alerts.
- [Collapse](/bootstrap/docs/components/collapse.md): Bootstrap collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.
- [Dropdowns](/bootstrap/docs/components/dropdowns.md): Bootstrap dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.
- [Footer](/bootstrap/docs/components/footer.md): Bootstrap Footer is an additional navigation used for displaying general information that a user might want to access from any page within your site. It is a place to display boilerplate text about the site, company info, copyrights, links to a contact form, sitemap, FAQ and other such resources.
- [Header](/bootstrap/docs/components/header.md): Documentation and examples for CoreUI's powerful, responsive header. Includes support for branding, navigation, and more.
- [Jumbotron](/bootstrap/docs/components/jumbotron.md): Bootstrap jumbotron component indicates a big grey box for showcasing hero unit style content.
- [List group](/bootstrap/docs/components/list-group.md): Bootstrap List Groups allows displaying are a series of content. Learn how to use Bootstrap list group to build complex list structure on your website.
- [Loading buttons](/bootstrap/docs/components/loading-buttons.md): Bootstrap loading buttons are interactive elements that provide visual feedback to users, indicating that an action is being processed. These buttons typically display a loading spinner or animation.
- [Modal](/bootstrap/docs/components/modal.md): Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup to add dialogs to yours. Learn how to customize Bootstrap Modals easily. Multiple examples and tutorial.
- [Navbar](/bootstrap/docs/components/navbar.md): Documentation and examples for CoreUI for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
- [Navs & tabs](/bootstrap/docs/components/navs-tabs.md): Documentation and examples for how to use CoreUI for Bootstrap's included navigation components.
- [Offcanvas](/bootstrap/docs/components/offcanvas.md): Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
- [Pagination](/bootstrap/docs/components/pagination.md): Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
- [Placeholders](/bootstrap/docs/components/placeholders.md): Use loading placeholders for your components or pages to indicate something may still be loading.
- [Popovers](/bootstrap/docs/components/popovers.md): Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
- [Progress](/bootstrap/docs/components/progress.md): Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
- [Scrollspy](/bootstrap/docs/components/scrollspy.md): Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
- [Search Button](/bootstrap/docs/components/search-button.md): Bootstrap Search Button for CoreUI is a keyboard-aware trigger component that can open search interfaces, modals, offcanvas panels, and custom flows from click or shortcut.
- [Sidebar](/bootstrap/docs/components/sidebar.md): Bootstrap Sidebar is a powerful and customizable responsive navigation component for any type of vertical navigation. Bootstrap Sidebar come with built-in support for branding, navigation, and more.
- [Spinners](/bootstrap/docs/components/spinners.md): Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
- [Toasts](/bootstrap/docs/components/toasts.md): Send push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
- [Tooltips](/bootstrap/docs/components/tooltips.md): Use Bootstrap Tooltips to add small, informative text boxes that appear when users hover or focus on an element. This feature enhances UX by providing contextual help without cluttering your interface.

## Icons

- [Icons](/bootstrap/docs/icons.md): CoreUI Icons is an open-source icon set with more than 500 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.

## Helpers

- [Clearfix](/bootstrap/docs/helpers/clearfix.md): Quickly and easily clear floated content within a container by adding a clearfix utility.
- [Color & background](/bootstrap/docs/helpers/color-background.md): Set a background color with contrasting foreground color.
- [Colored links](/bootstrap/docs/helpers/colored-links.md): Colored links with hover states
- [Focus ring](/bootstrap/docs/helpers/focus-ring.md): Utility classes that allows you to add and modify custom focus ring styles to elements and components.
- [Icon link](/bootstrap/docs/helpers/icon-link.md): Quickly create stylized hyperlinks with CoreUI Icons or other icons.
- [Position](/bootstrap/docs/helpers/position.md): Use these helpers for quickly configuring the position of an element.
- [Ratio](/bootstrap/docs/helpers/ratio.md): Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.
- [Stacks](/bootstrap/docs/helpers/stacks.md): Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
- [Stretched link](/bootstrap/docs/helpers/stretched-link.md): Make any HTML element or CoreUI for Bootstrap component clickable by "stretching" a nested link via CSS.
- [Text truncation](/bootstrap/docs/helpers/text-truncation.md): Truncate long strings of text with an ellipsis.
- [Vertical rule](/bootstrap/docs/helpers/vertical-rule.md): Use the custom vertical rule helper to create vertical dividers like the `<hr>` element.
- [Visually hidden](/bootstrap/docs/helpers/visually-hidden.md): Use these helpers to visually hide elements but keep them accessible to assistive technologies.

## Utilities

- [API](/bootstrap/docs/utilities/api.md): The utility API is a Sass-based tool to generate utility classes.
- [Background](/bootstrap/docs/utilities/background.md): Convey meaning through `background-color` and add decoration with gradients.
- [Borders](/bootstrap/docs/utilities/borders.md): Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
- [Colors](/bootstrap/docs/utilities/colors.md): Convey meaning through `color` with a handful of color utility classes. Includes support for styling links with hover states, too.
- [Display](/bootstrap/docs/utilities/display.md): Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
- [Flex](/bootstrap/docs/utilities/flex.md): Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
- [Float](/bootstrap/docs/utilities/float.md): Toggle floats on any element, across any breakpoint, using our responsive float utilities.
- [Interactions](/bootstrap/docs/utilities/interactions.md): Utility classes that change how users interact with contents of a website.
- [Link](/bootstrap/docs/utilities/link.md): Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
- [Object fit](/bootstrap/docs/utilities/object-fit.md): Use the object fit utilities to modify how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an `<img>` or `<video>`, should be resized to fit its container.
- [Opacity](/bootstrap/docs/utilities/opacity.md): Control the opacity of elements.
- [Overflow](/bootstrap/docs/utilities/overflow.md): Use these shorthand utilities for quickly configuring how content overflows an element.
- [Position](/bootstrap/docs/utilities/position.md): Use these shorthand utilities for quickly configuring the position of an element.
- [Shadows](/bootstrap/docs/utilities/shadows.md): Add or remove shadows to elements with box-shadow utilities.
- [Sizing](/bootstrap/docs/utilities/sizing.md): Easily make an element as wide or as tall with our width and height utilities.
- [Spacing](/bootstrap/docs/utilities/spacing.md): CoreUI for Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element's appearance.
- [Text](/bootstrap/docs/utilities/text.md): Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
- [Vertical align](/bootstrap/docs/utilities/vertical-align.md): Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
- [Visibility](/bootstrap/docs/utilities/visibility.md): Control the visibility of elements, without modifying their display, with visibility utilities.
- [Z-index](/bootstrap/docs/utilities/z-index.md): Use our low-level `z-index` utilities to quickly change the stack level of an element or component.

## Templates

- [Admin & Dashboard](/bootstrap/docs/templates/admin-dashboard.md): Develop modern, beautiful, and responsive applications in half the time with high-performing and easy-to-customize react admin panels to cover any requirement.
- [Download](/bootstrap/docs/templates/download.md): Download CoreUI for Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
- [Installation](/bootstrap/docs/templates/installation.md): Learn how to use CoreUI Bootstrap Admin Dashboard  Templates including npm scripts to build templates, compile source code, run tests, and more.
- [Customize](/bootstrap/docs/templates/customize.md): Learn how to theme, customize, and extend CoreUI Bootstrap Templates with Sass, a boatload of global options.
- [Contents](/bootstrap/docs/templates/contents.md): Discover what's included in CoreUI Bootstrap Admin Template, including our precompiled and source code flavors.

## Migration

- [v4](/bootstrap/docs/migration/v4.md): Track and review changes to the CoreUI for Bootstrap source files, documentation, and components to help you migrate from v3 to v4.
- [v5](/bootstrap/docs/migration/v5.md): Track and review changes to the CoreUI for Bootstrap source files, documentation, and components to help you migrate from v4 to v5.